Layout modules are more complex than utilities and are tied to markup structure. They are designed to be highly reusable and to inter-operate with other styles.
The utility-based grid allows a lot of flexibility in creating complex layouts.
Start by using a .clearfix
container.
Optionally use a .container
to set a max-width.
<div class="container">
<div class="clearfix">
</div>
</div>
Add columns using the .col
and grid width .col-N
classes.
<div class="clearfix">
<div class="col col-6 outline-blue">.col.col-6</div>
<div class="col col-6 outline-blue">.col.col-6</div>
</div>
Use breakpoint-prefixed column utilities to change the grid at different screen widths.
<div class="clearfix">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 outline-blue">.sm-col.sm-col-6.md-col-5.lg-col-4</div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8 outline-blue">.sm-col.sm-col-6.md-col-7.lg-col-8</div>
</div>
Use padding and negative margin utilities to create gutters based on the white space scale.
<div class="clearfix mxn2">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 px2 outline-blue"><div>.px2</div></div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8 px2 outline-blue"><div>.px2</div></div>
</div>
<!-- Nested divs for demonstration only -->
Use the table object to vertically center content. These styles can be combined with grid width and white-space utilities for a wide range of layout options.
For vertically centered content
<div class="table outline-blue">
<div class="table-cell">
<h1 class="m0">.table-cell</h1>
<p class="m0">For vertically centered content</p>
</div>
<div class="table-cell">.table-cell</div>
</div>