Grid Framework Documentation

The grid is built on the mobile-first philosophy. In other words, set up your content presentation in mobile first, then adjust for larger screens.

The grid relies on fractions and uniformity. Not only does it fix the responsive issues, the grid brings a few extra niceties:

Grid Framework

For use in the 3.1 Framework

The 3.1 Web Framework does not support the new grid system by default. With a few lines of CSS, you can easily start using this new grid system on your site and transition smoothly when you migrate your site into the 4.0 Web Framework.

Here's HOW

Grid How-To

First, every grid set requires a set. Think of the wrapper or row: a collection of grid columns.

class="wdn-grid-set"

Finally, every column is a percentage of width inside the wdn-grid-set (your "row"). The sum of all the grid columns widths must equal 1.1

<section class="wdn-grid-set">
    <div class="wdn-col-one-half">
        First column content
    </div>
    <figure class="wdn-col-one-half">
        Graphic inside second column
    </figure>
</section>
                            
1The grid is available up to sevenths.

Mobile-First Layouts

In its simplest form, the v3 Grid implementation will retain a complete fluid column set from mobile all the way to the widest screen.

wdn-col-full
wdn-col-one-half
wdn-col-one-half
wdn-col-one-third
wdn-col-two-thirds
wdn-col-one-fourth
wdn-col-three-fourths
wdn-col-one-fifth
wdn-col-four-fifths
wdn-col-one-sixth
wdn-col-five-sixths
wdn-col-three-sevenths
wdn-col-four-sevenths

Breakpoint Layout Control

In many cases, shrunk-down columns present content incorrectly on smaller screens. So, you can make every column full-width on smaller screens and introduce your layout at wider views.

bp1-wdn-col-*
Breakpoint 1: 480px
bp2-wdn-col-*
Breakpoint 2: 768px
bp3-wdn-col-*
Breakpoint 3: 960px
bp4-wdn-col-*
Breakpoint 4: 1044px
bp1-wdn-col-full
bp1-wdn-col-one-half
bp1-wdn-col-one-half
bp1-wdn-col-one-third
bp1-wdn-col-two-thirds
bp1-wdn-col-one-fourth
bp1-wdn-col-three-fourths
bp1-wdn-col-one-fifth
bp1-wdn-col-four-fifths
bp1-wdn-col-one-sixth
bp1-wdn-col-five-sixths
bp1-wdn-col-three-sevenths
bp1-wdn-col-four-sevenths

An Example at Breakpoint2

bp2-wdn-col-full
bp2-wdn-col-one-half
bp2-wdn-col-one-half
bp2-wdn-col-one-third
bp2-wdn-col-two-thirds
bp2-wdn-col-one-fourth
bp2-wdn-col-three-fourths
bp2-wdn-col-one-fifth
bp2-wdn-col-four-fifths
bp2-wdn-col-one-sixth
bp2-wdn-col-five-sixths
bp2-wdn-col-three-sevenths
bp2-wdn-col-four-sevenths

Centered Layouts

Whitespace is an important part of legibility and design. Sometimes it helps to center your content.

wdn-col-one-half centered
wdn-col-one-third centered
wdn-col-one-fourth centered

Short cuts

If your wdn-grid-set is built with columns of proportionate widths, then you can use a grid set definition. Then each column simply needs a simple wdn-col class.

wdn-grid-set-halves

wdn-col
wdn-col

wdn-grid-set-thirds

wdn-col
wdn-col
wdn-col

wdn-grid-set-fourths

wdn-col
wdn-col
wdn-col
wdn-col

wdn-grid-set-fifths

wdn-col
wdn-col
wdn-col
wdn-col
wdn-col

wdn-grid-set-sixths

wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col

wdn-grid-set-sevenths

wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col

Breakpoints

These work at each of the breakpoints as well. bp1-wdn-grid-set-halves will provide full-width columns below breakpoint 1, but then side-by-side half columns at breakpoint 1 and above.
wdn-col
wdn-col

Unlimited Nesting

Want your grid in your grid? No problem, nest as often as you'd like (this page is).

wdn-col-one-half
wdn-col-one-half
wdn-col-one-half
wdn-col-one-half
wdn-col-two-thirds
wdn-col-one-third
wdn-col-three-fourths
wdn-col-one-half
wdn-col-one-half
wdn-col-one-fourth
wdn-col-two-thirds centered

Visual Columns

The grid elements are built for structural layouts only, and presentation shouldn't be introduced to these classes (let's keep the sanity!).

However, it is often necessary to create a visual presentation inside a column (think backgrounds and borders). Therefore, add a new element with a class of .visual-island inside your column.

Here's an example of a background without the crowded content. Wow, this looks nice!

visual-island

Here's an example of a background without the crowded content. Wow, this looks nice!

visual-island
dummy placeholder image visual-island
dummy placeholder image visual-island
dummy placeholder image visual-island

Example CSS for visuals above:

.visual-island {
    background-color: rgba(111, 191, 77, 0.5);
    border: 3px solid rgba(96, 166, 66, 0.2);
    border-radius: 3px;
}