Grid Framework

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:

Basic Usage

To use a grid you need two thing. First, you need a .wdn-grid-set container. Secondly, within the container, you need columns. The example below, columns are marked as .wdn-col-one-half

<div class="wdn-grid-set">
    <div class="wdn-col-one-half">
        First column content
    </div>
    <div class="wdn-col-one-half">
        Second column content
    </div>
</div>

Breakpoints

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

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. These breakpoints were .bp1-wdn-col-*(480px), .bp2-wdn-col-*(768px), .bp3-wdn-col-*(960px), and .bp4-wdn-col-*(1280px)

<div class="wdn-grid-set">
    <div class="bp768-wdn-col-one-half">
        First column content
    </div>
    <div class="bp768-wdn-col-one-half">
        Second column content
    </div>
</div>

Options

The grid has a lot of options and shortcuts. Some of these include:

• Centered Columns
• Grid Shortcuts
• Visual Islands

Centered Columns

Whitespace is an important part of legibility and design. Sometimes it helps to center your content. Add a .centered class to your column to center it.

<div class="wdn-grid-set">
    <div class="col-one-half centered">
        First column content
    </div>
    <div class="col-one-half">
        Second column content
    </div>
</div>

Grid Shortcuts

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. These work at each of the breakpoints as well. .bp480-wdn-grid-set-halves will provide full-width columns below breakpoint 480, but then side-by-side half columns at breakpoint 480 and above. Possible grid set definitions include:

• .wdn-grid-set-halves
• .wdn-grid-set-thirds
• .wdn-grid-set-fourths
• .wdn-grid-set-fifths
• .wdn-grid-set-sixths
• .wdn-grid-set-sevenths
• .wdn-grid-set-eighths
• .wdn-grid-set-ninths

<div class="wdn-grid-set-halves">
    <div class="wdn-col">
        First column content
    </div>
    <div class="wdn-col">
        Second column content
    </div>
</div>

Visual Islands

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.

<div class="wdn-col-one-half visual-island">This column is in a visual island</div>

You can also add a background color with css, such as:

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