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

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 ninths.

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-one-seventh
wdn-col-six-sevenths
wdn-col-one-eighth
wdn-col-seven-eighths
wdn-col-one-ninth
wdn-col-eight-ninths

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.

The breakpoint class names used in 4.0 were numeric and, therefore, limited the ability to add additional interstitial breakpoints. The 4.0 class names are still supported (with no current plans to remove them), however, it would be a good idea to use the new 4.1 classes as you move forward.

bp1-wdn-col-*
Breakpoint 1 = 480px
bp2-wdn-col-*
Breakpoint 2 = 768px
bp3-wdn-col-*
Breakpoint 3 = 960px
bp4-wdn-col-*
Breakpoint 4 = 1280px

The new 4.1 breakpoint classes are named for the pixel value they represent and new values have been added for increased layout control.

bp480-wdn-col-*
Breakpoint 480px
bp640-wdn-col-*
Breakpoint 640px
bp768-wdn-col-*
Breakpoint 768px
bp960-wdn-col-*
Breakpoint 960px
bp1280-wdn-col-*
Breakpoint 1280px
bp1600-wdn-col-*
Breakpoint 1600px

An Example at Breakpoint 480px (formerly bp1)

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

An Example at Breakpoint 768 (formerly bp2)

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

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-setis built with columns of proportionate widths, then you can use a grid set definition. Then each column simply needs a simple wdn-colclass.

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

wdn-grid-set-eighths

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

wdn-grid-set-ninths

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

These work at each of the breakpoints as well. bp480-wdn-grid-set-halveswill provide full-width columns below breakpoint 480, but then side-by-side half columns at breakpoint 480 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-islandinside 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;
                    }