A float grid is the most basic type of responsive grid. It allows you to set the amount of columns an element spans, as well as any column offsets. The default number of columns in the grid is 12, but this can be overritten as outlined in settings#grid-columns.
A float grid must be wrapped in an element with the .clearfix class for the document to respect the grid's height. The grid items must have .col class, as well as the respective .col-<columns> class. To create gutters, use a combination of the .mxn<spacing> class on the parent element and .px<spacing> classes on the column children.
<div class='clearfix mxn2'> <div class='col col-12 md:col-4 px2 bg-color-blue'> COLUMN #1 </div> <div class='col col-12 md:col-4 px2 bg-color-blue'> COLUMN #2 </div> <div class='col col-12 md:col-4 px2 bg-color-blue'> COLUMN #2 </div> <div class='col off-4 col-8 px2 bg-color-blue'> OFFSET COLUMN </div> </div>
ResultCOLUMN #1COLUMN #2COLUMN #3OFFSET COLUMN
The flex grid has the advantage of utilizing flexbox’s alignment properties: align-items and justify-content.
The implementation is similar to the float grid, however, instead of wrapping the columns in a .clearfix element, we’ll wrap it in a .flex element. Remember that with flex you will have to specifiy the parent’s flex direction if you want the elements to stack differently at different breakpoints. You can also ignore the .col class in the flex grid, as this was responsible for setting the float property, which is no longer neccesary.
<div class='flex flex-col md:flex-row items-stretch md:items-center mxn2'> <div class='col-12 md:col-6 px2'> <div class="bg-color-blue"> COL #1 </div> </div> <div class='col-12 md:col-3 px2'> <div class="bg-color-blue"> COL #2 </div> </div> <div class='col-12 md:col-3 px2'> <div class="bg-color-blue"> COL #3 </div> </div> </div>
ResultCOL #1COL #2COL #3
Responsive Classes / Media Queries
All responsive classes can be prefixed with a <breakpoint>: tag. With this prefix applied, the given class will only be applied to the element at the given breakpoint and up.
For example a class of .lg:block applies the block display property to the element at a min-width of breakpoint lg.
Breakpoints are defined in the $breakpoints setting as outlined in settings#breakpoints.
<div class=‘text-left md:text-center’> This text is left justified on mobile and centered from desktop to beyond! </div> <!-- Resize the viewport to see the responsive classes in action -->
ResultThis text is left justified on mobile and centered from desktop to beyond!
Aspect Ratio Helper
The aspect ratio helper constrains elements to designated aspect ratios. .aspect-<ratio> classes are generated from the $aspect-ratios setting as outlined in settings#aspect-ratios.
The use this helper, apply the .aspect-<ratio> class to a nelement. All direct descendants will be constrained to the respective aspect ratio.
<div class='aspect-portrait'> <div style='background-image: url('dots.svg”)'> </div> </div> <div class='aspect-landscape'> <div style='background-image': url("stripes.svg")'> </div> </div>
All colors defined in the $colors setting will have .color-<color>, .bg-color-<color>, and .border-color-<color> classes generated for it
The .color-<color> class is responsible for setting the CSS color property.
The .bg-color-<color> is responsible for setting the CSS background-color property.
The .border-color-<color> is responsible for setting the CSS border-color property.
<div class='bg-color-blue p2'> <p class='p2 border-color-white color-white'> White text with white border </p> <p class='p2 border-color-black color-black'> White text with white border </p> </div>
White text with white border
Black text with black border