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.
Adjust the container width with the --container-width
variable.
<div class="container">
<div class="clearfix">
</div>
</div>
Add columns using the .col
and grid width .col-N
classes.
.col
floats elements left and sets box-sizing to border-box.
.col-N
sets width according to a 12 column grid.
The total number of columns in a row should add up to 12.
<div class="clearfix outline-blue">
<div class="col col-6">.col.col-6</div>
<div class="col col-6">.col.col-6</div>
</div>
Use breakpoint-prefixed column utilities to change the grid at different screen widths. Each breakpoint applies to that screen width and up. Unprefixed styles apply to all screen widths.
<div class="clearfix outline-blue">
<div class="sm-col sm-col-6 md-col-5 lg-col-4">.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">.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. When using negative margin, be sure to compensate for the extra width created with a padded parent element or by using overflow hidden. Otherwise, horizontal scrolling may occur.
<div class="clearfix mxn2 outline-blue">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div>.px2</div></div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8 px2"><div>.px2</div></div>
</div>
Nest whole grid structures within columns to created nested grids.
<div class="clearfix mxn2 outline-blue">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div>Unnested</div></div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8 px2">
<div class="clearfix mxn2">
<div class="col col-6 px2"><div>Nested</div></div>
<div class="col col-6 px2"><div>Nested</div></div>
</div>
</div>
</div>
To reverse the order of columns, use the .col-right
class to float right
<div class="clearfix outline-blue">
<div class="col-right col-6">.col-right.col-6</div>
<div class="col col-6">.col.col-6</div>
</div>
Use the .mx-auto
class to center columns within their containers.
<div class="clearfix mxn2 outline-blue">
<div class="col-8 px2 mx-auto">
<div>Centered Column</div>
</div>
</div>
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.
Apply padding to .table-cell
elements to contol spacing.
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>
The flag object can be emulated by adding .full-width
to one of the cells.
To add padding to the body, nest another div within the full-width cell.
The full-width utility makes the table object behave like the flag object.
<div class="table outline-blue">
<div class="table-cell p2">Image</div>
<div class="table-cell full-width">
<h1 class="m0">Flag Body</h1>
<p class="m0">The full-width utility makes the table object behave like the flag object.</p>
</div>
</div>
Use the .table-fixed
extension to create equal-width cells.
For vertically centered content
<div class="table table-fixed 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 class="table-cell">.table-cell</div>
</div>
Use breakpoint prefixes to keep table objects stacked at smaller screen sizes. This is useful for things like navigation.
Only kicks in above the small breakpoint
Only kicks in above the large breakpoint
<div class="sm-table mb1 outline-blue">
<div class="sm-table-cell">
<h1 class="m0">.sm-table-cell</h1>
<p class="m0">Only kicks in above the small breakpoint</p>
</div>
<div class="sm-table-cell">.sm-table-cell</div>
</div>
<div class="lg-table outline-blue">
<div class="lg-table-cell">
<h1 class="m0">.lg-table-cell</h1>
<p class="m0">Only kicks in above the large breakpoint</p>
</div>
<div class="lg-table-cell">.lg-table-cell</div>
</div>
The table object can be combined with grid width utilities to create vertically centered columns.
For vertically centered content
<div class="table outline-blue">
<div class="table-cell col-7">
<h1 class="m0">.table-cell.col-7</h1>
<p class="m0">For vertically centered content</p>
</div>
<div class="table-cell col-5">.table-cell.col-5</div>
</div>
MIT License
CSS layout module using flexbox
jxnblk.com/flex-objectThe flex-object is a powerful suite of utilities based on the flexible box layout module. These utilities can replace the need for a grid system in many instances, but can also be combined with the Basscss grid for even more possibilities.
Note: browser support for the flexible box layout module is limited. See http://caniuse.com/#feat=flexbox
To begin, add the .flex
class to a parent element.
This sets the element to display: flex
and enables a flex context for all direct child elements.
<div class="flex">
<a href="#" class="button">Link</a>
<a href="#" class="button">Link</a>
</div>
To wrap elements, use the .flex-wrap
utility.
<div class="flex flex-wrap">
<a href="#" class="button">Home</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
</div>
To arrange items vertically, use the .flex-column
utility.
<div class="flex flex-column">
<div class="p1 blue border">Row</div>
<div class="p1 blue border">Row</div>
<div class="p1 blue border">Row</div>
</div>
Use these utilities to control vertical alignment of child elements.
To vertically center child elements, add the .flex-center
class to the parent element.
<div class="flex flex-center">
<div class="flex-auto px2 py4 blue border">
<h1 class="m0">Big</h1>
</div>
<div class="px2 blue border">Small</div>
</div>
To stretch all elements to fill the height of the parent, use the .flex-stretch
utility.
<div class="flex flex-stretch">
<div class="flex-auto px2 py4 blue border">
<h1 class="m0">Big</h1>
</div>
<div class="px2 blue border">Small</div>
</div>
To ensure nested elements stretch as well, add the .flex
class to relevant elements.
<div class="flex flex-stretch">
<div class="flex-auto px2 py4 blue border">
<h1 class="m0">Big</h1>
</div>
<div class="flex blue border">
<div class="px2 white bg-blue">
Small
</div>
</div>
</div>
To align child elements to their baseline, use the .flex-baseline
utility.
<div class="flex flex-baseline blue border-bottom">
<div class="flex-auto px2">
<h1 class="m0">Big</h1>
</div>
<div class="px2">Small</div>
</div>
To align child elements to the top, use the .flex-start
utility.
<div class="flex flex-start blue border-top">
<div class="flex-auto px2">
<h1 class="m0">Big</h1>
</div>
<div class="px2">Small</div>
</div>
To align child elements to the bottom, use the .flex-end
utility.
<div class="flex flex-end blue border-bottom">
<div class="flex-auto px2">
<h1 class="m0">Big</h1>
</div>
<div class="px2">Small</div>
</div>
To set display flex only at certain breakpoints and up,
use the breakpoint-prefixed versions of .flex
.
All other utilities will only work at the set breakpoint.
<div class="sm-flex flex-center mb2 blue">
<div class="border">
<h2 class="m0">.sm-flex</h2>
</div>
<div class="flex-auto border">Div</div>
<div class="border">Div</div>
</div>
<div class="md-flex flex-center mb2 blue">
<div class="border">
<h2 class="m0">.md-flex</h2>
</div>
<div class="flex-auto border">Div</div>
<div class="border">Div</div>
</div>
<div class="lg-flex flex-center mb2 blue">
<div class="border">
<h2 class="m0">.lg-flex</h2>
</div>
<div class="flex-auto border">Div</div>
<div class="border">Div</div>
</div>
To control the size and behavior of child elements, use these utilities.
To make an element grow or shrink as needed, use the .flex-auto
utility.
<div class="flex">
<a href="#" class="button button-nav-light">Nav Item</a>
<a href="#" class="button button-nav-light">Nav Item</a>
<div class="flex-auto blue border"></div>
<a href="#" class="button button-nav-light">Nav Item</a>
</div>
To make an element grow, but not shrink, use the .flex-grow
utility.
<div class="flex">
<a href="#" class="button button-nav-light">Nav Item</a>
<a href="#" class="button button-nav-light">Nav Item</a>
<div class="flex-grow blue border"></div>
<a href="#" class="button button-nav-light">Nav Item</a>
</div>
To prevent an element from growing or shrinking, use the .flex-none
utility.
<div class="flex">
<a href="#" class="flex-auto m1 button button-blue">Nav Item</a>
<a href="#" class="flex-auto m1 button button-blue">Nav Item</a>
<a href="#" class="flex-none m1 button button-blue">Nav Item</a>
</div>
To change the order of child elements, use the .flex-first
and .flex-last
utilities.
<div class="flex">
<a href="#" class="button button-blue">Nav Item</a>
<a href="#" class="flex-first button button-blue">Nav Item First</a>
<a href="#" class="button button-blue">Nav Item</a>
</div>
<div class="flex">
<a href="#" class="button button-blue">Nav Item</a>
<a href="#" class="flex-last button button-blue">Nav Item Last</a>
<a href="#" class="button button-blue">Nav Item</a>
</div>
.flex { display: flex }
.flex-column { flex-direction: column }
.flex-wrap { flex-wrap: wrap }
.flex-center { align-items: center }
.flex-baseline { align-items: baseline }
.flex-stretch { align-items: stretch }
.flex-start { align-items: flex-start }
.flex-end { align-items: flex-end }
.flex-first { order: -1 }
.flex-last { order: 1024 }
.flex-auto { flex: 1 1 auto }
.flex-grow { flex: 1 0 auto }
.flex-none { flex: none }
Adjust these custom media query values to change the breakpoints.
@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);