Grid Framework Examples

This page provides some examples of how to implement the grid. Detailed documentation is available on another page.

Breakpoint layout control
Centered columns
Short cuts
Unlimited nesting
Visual columns (think backgrounds)

Grid Framework

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

View documentation on breakpoints

An Example at Breakpoint 480px (formerly bp1)

bp480-wdn-col-full

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-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-grid-set-thirds`

wdn-col

`wdn-grid-set-fourths`

wdn-col

`wdn-grid-set-fifths`

wdn-col

`wdn-grid-set-sixths`

wdn-col

`wdn-grid-set-sevenths`

wdn-col

`wdn-grid-set-eighths`

wdn-col

`wdn-grid-set-ninths`

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

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-two-thirds

wdn-col-one-third

wdn-col-three-fourths

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

visual-island