This is how the grid system works.
The grid system is based on Neat from the Bourbon library,
you can find additional information on their website.
The grid system is based on Neat from the Bourbon library,
you can find additional information on their website.
You can use the .w1-12 classes in the html to make separate columns.
These classes are mainly used to create asymetric grids.
You should not use this if you want to create a SYMETRIC grid.
<div class="clearfix">
<div class="w8">.w8</div>
<div class="w4">.w4</div>
</div>
<div class="clearfix">
<div class="w3">.w3</div>
<div class="w4">.w4</div>
<div class="w5">.w5</div>
</div>
This can be powered by @breakpoint syntax. For example @tablet or @mobile
When this suffix is used, the class will only be active from that breakpoint and up.
Remember, the number of columns can be different per breakpoint, that is the way bourbon works, take a look at breakpoints.json in this case, the number is 8 for tablet.
<div class="clearfix">
<div class="w2@tablet">.w2@tablet</div>
<div class="w2@tablet">.w2@tablet</div>
<div class="w4@tablet">.w4@tablet</div>
</div>
This can even be more powerfull when combining breakpoints
<div class="clearfix">
<div class="w2@tablet w3@desktop"><small>.w2@tablet.w3@desktop</small></div>
<div class="w2@tablet w5@desktop"><small>.w2@tablet.w5@desktop</small></div>
<div class="w4@tablet w4@desktop"><small>.w4@tablet.w4@desktop</small></div>
</div>
You can use the .grid-1 to grid-6 classes in the html to make symetric rasters.
The number is based on the amount of columns, so grid-6 will create 6 columns, grid-3 will create 3 columns.
When you use .grid-2 for example, you must have 2 child divs present in the wrapper.
<div class="grid-2">
<div>Content here</div>
<div>Content here</div>
</div><div class="grid-6">
<div>teaser</div>
<div>teaser</div>
<div>teaser</div>
<div>teaser</div>
<div>teaser</div>
<div>teaser</div>
<div>teaser</div>
<div>teaser</div>
<div>teaser</div>
<div>teaser</div>
<div>teaser</div>
<div>teaser</div>
</div>You can combine grids at your will, the syntax is @#{bp-one}2#{bp-two}. Very handy If your grid, changes from 2 to 4 over a breakpoint.
<div class="grid-2@zero2mobile grid-4@mobile">
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
</div><div class="grid-2@zero2mobile grid-3@mobile2desktop grid-6@desktop">
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
</div>
You can use the .latest class to make the last item float right.
This can also be combinned with the @breakpoint suffixes.
<div class="clearfix">
<div class="w3">.w3</div>
<div class="w4 latest">.w4.latest</div>
</div><div class="clearfix">
<div class="w3@tablet">.w3@tablet</div>
<div class="w4@tablet latest@mobile">.w4@tablet.latest@mobile</div>
</div>
You can use the .row class to make rows inside the layout.
The use of rows in a grid-x is irrelevant so you do not have to wrap every row. Rows are typically used on the main layout.
<div class="rows">
<div class="row">
<div class="w4">.w4</div>
<div class="w4">.w4</div>
<div class="w4">.w4</div>
</div>
<div class="row">
<div class="w4">.w4</div>
<div class="w4">.w4</div>
<div class="w4">.w4</div>
</div>
</div>
You can use the .center-col-x class to center an item on the grid.
The use of rows in a grid-x is irrelevant so you do not have to wrap every row. Rows are typically used on the main layout.
<div class="cf">
<div class="center-col-6">.center-col-6</div>
</div>This can also be combinned with the @breakpoint suffixes.
<div class="cf">
<div class="center-col-5@tablet center-col-10@desktop">
.center-col-5@tablet.center-col-10@desktop
</div>
</div>