0
Welcome Guest! Login
0 items Join Now

Grid system and class suffix across devices

  • Grid system and class suffix across devices

    Posted 6 years 5 months ago
    • I am still using in G5 with the help of Rokcandie macros multicolumns content layout
      For the container

      MACRO RC
      [bloc]{text}[/bloc]
      HTML
      <div class="g-grid">{text}</div>

      ... and columns inside this container

      MACRO RC
      [colonne class="{taille}"]{text}[/colonne]
      HTML
      <div class="g-block size-{taille}">{text}</div>

      Question : Is it possible to use and find still in G5 framework something like in boostrap with the prefix .col-xs, .col-sm, .col-md and .col-lg... In order to control the number and size of columns for instance in Desktop/Tablett and Smartphone ? Bootstrap grid system explanation

      Ex :
      DESKTOP : 3 columns
      <div class="g-block">
          <div class="g-block size-8">image</div>
          <div class="g-block size-2">(spacer)</div>
          <div class="g-block size-90">Text area...</div>
      </div>
      SMARTPHONE : 3 columns (Instead of one actually)
      <div class="g-block">
          <div class="g-block size-8">image</div>
          <div class="g-block size-2">(spacer)</div>
          <div class="g-block size-90">Text area...</div>
      </div>
      Here is the page example (Grey block in the middle of the page)

      Thanks!
    • Last Edit: 6 years 5 months ago by Laurent BRIERE.
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 20637
    • Thanks: 2932
    • messin' with stuff

    Re: Grid system and class suffix across devices

    Posted 6 years 5 months ago
    • G5 currently uses our custom made Nucleus engine... but G5 also supports using whatever engine you want for your framework... this isn't to say bootstrap or other base css/js are currently available out of the box but setting up G5 to run off other engines is certainly possible

      docs.gantry.org/gantry5/advanced/customi...e-files#engine-files

      in your current G5 installation check out:

      \media\gantry5\engines\nucleus

      I haven't had a time to go through all the .scss files yet... but I'd bet there's some things in there... there is a _sizes scss file and the _utilities mixin seems to have something for columns but I haven't quite figured that out/haven't had a chance to play with it
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics :woohoo:
  • Re: Grid system and class suffix across devices

    Posted 6 years 5 months ago
    • _sizes scss is to control the css class size-#
      Example : column of 15% ==> class="size-15"
      and in the _utilities.scss file
      // List Reset
      %list-reset {
      	margin: 0;
      	padding: 0;
      	list-style: none;
      }
      
      // Vertical Centering
      %vertical-align {
      	position: relative;
      	top: 50%;
      	@include transform(translateY(-50%));
      }
      
      // Columns
      @mixin columns($columns) {
      	width: percentage(1/$columns);
      }
      
      // Float with margin variable
      @mixin float($direction, $margin: 0) {
      	float: $direction;
      	margin-#{opposite-direction($direction)}: $margin;
      }
      Nothing that could works that I am able to understand :D
      Could you explain what %xxx (%vertical-align) means and how to use it in my custom.scss
      I still know that when you have "@mixin xxxx" and can write in my scss code "@include xxxx" but never see "%xxxx"
    • Last Edit: 6 years 5 months ago by Laurent BRIERE.
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 20637
    • Thanks: 2932
    • messin' with stuff

    Re: Grid system and class suffix across devices

    Posted 6 years 5 months ago

Time to create page: 0.080 seconds