5 #layout Layout

Site layout styles

5.1 #layout.container Container

  • .container-outer
    should be placed on an outer div for appropriate padding
  • .container-left
    7/12 width container that floats left
  • .container-right
    5/12 width container that floats left
  • .container-left-8
    8/12 width container that floats left
  • .container-right-4
    4/12 width container that floats left
  • .container-half
    6/12 width container that floats left
  • .container-padded
    full width container with padding

5.2 #layout.slabs Slabs

Slabs are full-width blocks of color. Slabs should contain containers to center content. Slabs can can have background color styles applied. By default is a neutral background.

Examples
Default styling

[modifier class]

.slab-alpha
full width slab of $white

slab-alpha

.slab-beta
full width slab of $light-gray

slab-beta

.slab-charlie
full width slab of $mid-gray

slab-charlie

.slab-delta
full width slab of $light-blue

slab-delta

.slab-echo
full width slab of $pale-blue

slab-echo

.slab-foxtrot
full width slab of $mid-blue

slab-foxtrot

<section class="slab [modifier class]">
<h1>[modifier class]</h1>
</section>