Basic usage

Examples using functions and mixins directly on SASS. Considering that all examples below wil usse this registered grids.

Registering grids

Example of generated grids calculation when registering them. This elements are just created as a test purpose, just to show the values registered reflected on a visual platform. This gridsystem won't make any box modelling, so it won't place any float, inline-block, etc.

This example will register a 2 column flexible grid with 10px gutter: 

@include gs-register-grid( "mobile", 100%, 2, 10px);

Note that gutter will only be used as a variable. It won't be calculated together with the columns.

Next grid will be registered as a fixed 12 column with 974px and 10px gutter: 

@include gs-register-grid( "desktop", 974px, 12, 10px);

Columns and gutters

Use gs-column() to get column values. Next example shows a simple implementation of column:

1 column from previously registered mobile grid:

50% large 
.example-mobile { width: gs-column(1, "mobile"); }
<div class="example-mobile"> I'm 50% large </div>

1 column from previously registered desktop grid:

66px large 
.example-desktop { width: gs-column(1, "desktop"); }
<div class="example-desktop"> I have 66px </div>

Box modelling and extra values

It's possible to add an extra value to gs-column(). For example, use gs-gutter() do get gutter value for specific grid:

3 columns
I'm width "auto".
3 columns + gutter
I'm width "auto". 
.example-3 {
  float: left;
  width: gs-column(3, "desktop", gs-gutter(1, "desktop"));
}
.example-3-gutter {
  float: left;
  width: gs-column(3, "desktop");
  margin-right: gs-gutter(1, "desktop");
}
.example-auto {
  overflow: hidden;
  margin: 0;
}
<div class="example-wrapper">
  <div class="example-3"> 3 columns </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>
<div class="example-wrapper">
  <div class="example-3-gutter"> 3 columns + gutter </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>
  1. Just example show that the box-modelling is made by the developer;
  2. This will return the gutter value registered for desktop grid;
  3. Example to show that the developer has the freedom to use the desired technique, in this case, having a fluid element instead of setting "9 columns".

Mixins

There are some mixins that can be used to help on box modelling, responsive lay-outs and generation of classes.

Rows

For continuous lists, such as product lists, there's a mixin called gs-row that will apply a negative gutter to the element and a fixed width, if necessary.

The example below shows a list with 3 columns per item with a holder with a fixed-width of the full desktop grid. It's possible to hover to check that the element ul is with a negative margin and each li have a positive margin, giving the impression of gutters only between the elements:

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item 
.example-list {
  @include gs-row(gs-column(all, "desktop"), "desktop");
  > li {
    width: gs-column(3, "desktop");
    margin-left: gs-gutter(1, "desktop");
  }
}

<ul class="example-list">
  <li> item </li>
  ...
</ul>

Note that the example is ignoring the box modelling to make the gridsystem implementation clearer.

Media queries

The mixin gs-media-query can be used when aplying media queries directly inside CSS output: 

@include gs-media-query("desktop") {
  .example-class {
    width: gs-column(2, "desktop");
    padding-right: gs-gutter(1, "desktop");
  }
}

Will output into: 

@media screen and (max-width: 974px) {
  .example-class {
    width: 154px;
    padding-right: 10px;
  }
}

For now that's a very simple implementation that only allow to change $media and switch between max-width and min-width using $type parameter. 

@include gs-media-query("desktop", "screen", "min-width") {
  .example-class {
    width: gs-column(2, "desktop");
    padding-right: gs-gutter(1, "desktop");
  }
}

This will just change the max-width to min-width: 

@media screen and (min-width: 974px) {
  .example-class {
    width: 154px;
    padding-right: 10px;
  }
}

The $break-point parameter inside gs-register-grid will just be used on this mixin. If the project will use media queries on HTML tag link, this can be ommited.

Generating classes

It's possible to generate classes based on a previously registered grid. For now, there's 4 types of classes that it generates: row (for wrappers), col (with width) and push (with margin-left and margin-right). Note that they don't have the responsive behaviour by default.

12 cols
1 col
11 cols
2 cols
10 cols
3 cols
9 cols
4 cols
8 cols
5 cols
7 cols
6 cols
6 cols 
@include gs-classes("desktop", "d-");

Note that d- will be used as the class prefix.

<div class="d-row">
  <div class="d-col-12"> 12 cols </div>
</div>
<div class="d-row">
  <div class="d-col-1"> 1 col </div>
  <div class="d-col-11"> 11 cols </div>
</div>
<div class="d-row">
  <div class="d-col-2"> 2 cols </div>
  <div class="d-col-10"> 10 cols</div>
</div>
<div class="d-row">
  <div class="d-col-3"> 3 cols </div>
  <div class="d-col-9"> 9 cols </div>
</div>
<div class="d-row">
  <div class="d-col-4"> 4 cols </div>
  <div class="d-col-8"> 8 cols </div>
</div>
<div class="d-row">
  <div class="d-col-5"> 5 cols </div>
  <div class="d-col-7"> 7 cols </div>
</div>
<div class="d-row">
  <div class="d-col-6"> 6 cols </div>
  <div class="d-col-6"> 6 cols </div>
</div>

By default, classes are generated width, margin and float techniques. It's possible to pass a $float: false parameter and only width and margin will be applied. Eg.: @include gs-classes("desktop", "d-", $float: false);, in this case all positioning needs to be configured manually.

It's also possible to use spacing classes. Considering the registration on the above example, spacing left would be made as:

12 cols
11 cols push prev 1
10 cols push prev 2
9 cols push prev 3
8 cols push prev 4
7 cols push prev 5
6 cols push prev 6
5 cols push prev 7
4 cols push prev 8
3 cols push prev 9
2 cols push prev 10
1 col push prev 11 
<div class="d-row">
  <div class="d-col-12"> 12 cols </div>
</div>
<div class="d-row">
  <div class="d-col-11 d-push-prev-1"> 11 cols </div>
</div>
<div class="d-row">
  <div class="d-col-10 d-push-prev-2"> 10 cols </div>
</div>
... go on "d-push-prev-3", d-push-prev-4"...
<div class="d-row">
  <div class="d-col-1 d-push-prev-11"> 1 col </div>
</div>

And spacing it to the right:

1 col push next 10
1 col
2 cols push next 9
1 col
3 cols push next 8
1 col
4 cols push next 7
1 col
5 cols push next 6
1 col
6 cols push next 5
1 col
7 cols push next 4
1 col
8 cols push next 3
1 col
9 cols push next 2
1 col
10 cols push next 1
1 col
12 cols 
<div class="d-row">
  <div class="d-col-1 d-push-next-10"> 1 col </div>
  <div class="d-col-1"> 1 col </div>
</div>
<div class="d-row">
  <div class="d-col-2 d-push-next-9"> 2 cols </div>
  <div class="d-col-1"> 1 col </div>
</div>
... go on with "d-push-next-8", "d-push-next-7"...
<div class="d-row">
  <div class="d-col-10 d-push-next-1"> 10 cols </div>
  <div class="d-col-1"> 1 col </div>
</div>
<div class="d-row">
  <div class="d-col-12"> 12 cols </div>
</div>

Example with mobile grid:

2 cols
1 col
1 col 
<div class="m-row">
  <div class="m-col-2"> 2 cols </div>
</div>
<div class="m-row">
  <div class="m-col-1"> 1 col </div>
  <div class="m-col-1"> 1 col </div>
</div>
2 cols
1 col push prev 1 
<div class="m-row">
  <div class="m-col-2"> 2 cols </div>
</div>
<div class="m-row">
  <div class="m-col-1 m-push-prev-1"> 1 col <em>push prev 1</em> </div>
</div>
1 col push next 1
2 cols 
<div class="m-row">
  <div class="m-col-1 m-push-next-1"> 1 col <em>push next 1</em> </div>
</div>
<div class="m-row">
  <div class="m-col-2"> 2 cols </div>
</div>

Advanced usage

Fractionated values

It's also possible to add fractionated columns if there's any need to do so. Example below with 1/2 column:

1 col
I'm width "auto".
½
½
I'm width "auto". 
.example-1 { width: gs-column(1, "desktop"); }
.example-1-2 { width: gs-column(1/2, "desktop"); }
<div class="example-wrapper">
  <div class="example-1"> 1 col </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>
<div class="example-wrapper">
  <div class="example-1-2"> ½ </div>
  <div class="example-1-2"> ½ </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>

And the example below with 1/3 columns:

⅓
I'm width "auto".
⅓
⅓
⅓
I'm width "auto". 
.example-1 { width: gs-column(1, "desktop"); }
.example-1-3 { width: gs-column(1/3, "desktop"); }
<div class="example-wrapper">
  <div class="example-1"> ⅓ </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>
<div class="example-wrapper">
  <div class="example-1-3"> ⅓ </div>
  <div class="example-1-3"> ⅓ </div>
  <div class="example-1-3"> ⅓ </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>

Important

Only use fractionated columns if your columns are divisible by the values you are trying to get. Usually grids have columns divisible by 2 and 3, so in this case only 1/2, 1/3 and 2/3.

Note that fractional values ignore gutter inside the columns. Follow the rule for columns with numbers divisible by 2 and 3. So 1 column + 1/3 will consider the gutter between the 2 columns, but the next should be fluid or fractal too:

1 col
½
½
1 col
I'm width "auto".
1 + ½
I'm width "auto".
1 + ½
1 + ½
I'm width "auto". 
.example-1 { width: gs-column(1, "desktop"); }
.example-1-2 { width: gs-column(1/2, "desktop"); }
.example-1-1-2 { width: gs-column(1 + 1/2, "desktop"); }
<div class="example-wrapper">
  <div class="example-1"> 1 col </div>
  <div class="example-1-2"> ½ </div>
  <div class="example-1-2"> ½ </div>
  <div class="example-1"> 1 col </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>
<div class="example-wrapper">
  <div class="example-1-1-2"> 1 + ½ </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>
<div class="example-wrapper">
  <div class="example-1-1-2"> 1 + ½ </div>
  <div class="example-1-1-2"> 1 + ½ </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>
1 col
⅓
⅓
⅓
1 col
I'm width "auto".
1 + ⅓
1 + ⅔
I'm width "auto".
1 + ⅓
I'm width "auto".
1 + ⅔
I'm width "auto". 
.example-1 { width: gs-column(1, "desktop"); }
.example-1-3 { width: gs-column(1/3, "desktop"); }
.example-1-1-3 { width: gs-column(1 + 1/3, "desktop"); }
.example-1-2-3 { width: gs-column(1 + 2/3, "desktop"); }
<div class="example-wrapper">
  <div class="example-1"> 1 col </div>
  <div class="example-1-3"> ⅓ </div>
  <div class="example-1-3"> ⅓ </div>
  <div class="example-1-3"> ⅓ </div>
  <div class="example-1"> 1 col </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>
<div class="example-wrapper">
  <div class="example-1-1-3"> 1 + ⅓ </div>
  <div class="example-1-2-3"> 1 + ⅔ </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>
<div class="example-wrapper">
  <div class="example-1-1-3"> 1 + ⅓ </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>
<div class="example-wrapper">
  <div class="example-1-2-3"> 1 + ⅔ </div>
  <div class="example-auto"> I'm width "auto". </div>
</div>