0
Welcome Guest! Login
0 items Join Now

Grid system and class suffix across devices

Last Post
Search Topic

  • Grid system and class suffix across devices

    Posted 9 years 8 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: 9 years 8 months ago by Laurent BRIERE.
    #1223953
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22281
    • Thanks: 3225
    • messin' with stuff

    Re: Grid system and class suffix across devices

    Posted 9 years 8 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. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1224153

  • Re: Grid system and class suffix across devices

    Posted 9 years 8 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: 9 years 8 months ago by Laurent BRIERE.
    #1224765
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22281
    • Thanks: 3225
    • messin' with stuff

    Re: Grid system and class suffix across devices

    Posted 9 years 8 months ago
    #1224776

Time to create page: 0.058 seconds