Styleguide

.grid-#

Use the grid to handle the arrangement of fluid width elements on the page. Your grid should allow for responsive width adjustments at different breakpoints.

<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>

<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>

<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>

<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>

.grid-flex

Apply flexbox styling to a grid for matching container heights.

.container-#

Use container classes for semi-fixed width elements. Use .container, .box, .wrapper, .div, .div or something similar as a prefix. Typically these have their left and right margin set to auto so they will be centered.

.box-center {
  margin-left: auto;
  margin-right: auto;
}
.box-320 {  max-width:320px; }
.box-400 {  max-width:400px; }
.box-480 {  max-width:480px; }
.box-640 {  max-width:640px; }
.box-720 {  max-width:720px; }
.box-800 {  max-width:800px; }
.box-960 {  max-width:960px; }
.box-1100 { max-width:1100px; }
.box-1200 { max-width:1200px; }

.pad-# .marg-#

Use classes for levels of padding and margin to use across your site. By using these classes exclusively to set the spacing in and around the elements on the page, you will find it simple to maintain consistent alignment.

Use breakpoint prefixing to adjust spacing for making layout adjustments at different screen sizes (e.g. .s-pad-0 to remove padding for small screen sizes).

.pad-1 { padding: .5em; }
.pad-1-left { padding-left: .5em; }
.pad-1-right { padding-right: .5em; }
.pad-1-top { padding-top: .5em; }
.pad-1-bottom { padding-bottom: .5em; }
.pad-1-sides { padding-left: .5em; padding-right: .5em; }
.pad-1-vert { padding-top: .5em; padding-bottom: .5em; }
.pad-2 { padding: 1em; }
.pad-2-left { padding-left: 1em; }
...etc

.marg-1 { margin: .5em; }
.marg-1-left { margin-left: .5em; }
.marg-1-right { margin-right: .5em; }
.marg-1-top { margin-top: .5em; }
.marg-1-bottom { margin-bottom: .5em; }
.marg-1-sides { margin-left: .5em; margin-right: .5em; }
.marg-1-vert { margin-top: .5em; margin-bottom: .5em; }
.marg-2 { margin: 1em; }
.marg-2-left { margin-left: 1em; }
...etc

.border-#

.rounded .circle

.rel .abs .pos-#

.front