Inline Block Grid System

The inline block system is a 12-column grid that is similar to the float grid system, in that it is mobile first, responsive, infinitely nestable, and offers push, pull, prefix and suffix utilities.

The major difference is that inline blocks offer greater flexibility, most importantly the ability to stipulate different column arrangements at different breakpoints. Inline blocks also provide horizontal alignment options (left, center, and right) as well as vertical alignment options (top, middle, bottom).

Basic Markup

As with our float system, the "container" class centers and provides a max width for its content. The "grid" class wraps every grouping of one or more columns, which are identified with the class "column".

Every module on the site should be wrapped with the container, grid, and column elements, as this is what provides consistent gutters, even if there is only one column in a given module.

The default size of a column is 100%. Altering the size of columns is achieved by adding sizing classes to the column element:

<div class="container">
    <div class="grid">
        <div class="column  size12of12  sm_size6of12  xl_size8of12">
            Column content
        </div><!--end .column--> 
        <div class="column  size12of12  sm_size6of12  xl_size4of12">
            Column content
        </div><!--end .column-->
    </div><!--end .grid-->  
</div><!--end .container-->

Multiple sizing classes can be applied to a column to allow for different widths at different breakpoints. The following predefined prefixes trigger at the given device widths:

PrefixSample ClassDevice Width
{no prefix}size1of12Un-prefixed size is default/mobile
sm_sm_size1of12Min-width: 481px
med_med_size1of12Min-width: 768px
lg_lg_size1of12Min-width: 1024px
xl_xl_size1of12Min-width: 1280px

A breakpoint sizing class only needs to be added if it is different than smaller breakpoints.

Basic Example

In the following example, each column is full width in the mobile first (non-prefixed) size. At the "med" breakpoint, the columns each use 6 of 12 columns (ie. they are 50% of their parent's width). At the "lg" breakpoint, the first column is assigned to go full width (lg_size12of12), while the following three columns take up 4 out of 12 columns each. Finally, at the "xl" breakpoint, each column is in 3 of 12 columns, or 25% of their parent's width.

size12of12 
med_size6of12 
lg_size12of12 
xl_size3of12
size12of12 
med_size6of12 
lg_size4of12 
xl_size3of12
size12of12 
med_size6of12 
lg_size4of12 
xl_size3of12
size12of12 
med_size6of12 
lg_size4of12 
xl_size3of12

More examples »