It's time for a better grid, a grid made for the advancements brought with the power of responsive design. We need a responsible, responsive grid.
Our current grid tries hard at guessing the appropriate layout at responsive breakpoints. No matter how hard it tries, more often than not it fails. It's failure is reflected in a disorganized content presentation. Furthermore, the current relies on the out-dated "desktop-first" approach by requiring identification of the .first column.
Enter the New v3 Grid
The new grid (we're calling it v3) is built on the mobile-first philosophy. In other words, set up your content presentation in mobile first, then adjust for larger screens.
The v3 Grid grid relies on fractions and uniformity. Not only does it fix the responsive issues, the v3 Grid brings a few extra niceties:
v3 Grid How-To
First, you need the CSS loaded in your page head:
<link rel="stylesheet" href="/wdn/templates_3.1/css/content/grid-v3.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="/wdn/templates_3.1/css/variations/grid-v3-ie.css" />
<![endif]-->
Next, 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>
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-fullwdn-col-one-halfwdn-col-one-halfwdn-col-one-thirdwdn-col-two-thirdswdn-col-one-fourthwdn-col-three-fourthswdn-col-one-fifthwdn-col-four-fifthswdn-col-one-sixthwdn-col-five-sixthswdn-col-three-seventhswdn-col-four-seventhsBreakpoint 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: 1040px
bp1-wdn-col-fullbp1-wdn-col-one-halfbp1-wdn-col-one-halfbp1-wdn-col-one-thirdbp1-wdn-col-two-thirdsbp1-wdn-col-one-fourthbp1-wdn-col-three-fourthsbp1-wdn-col-one-fifthbp1-wdn-col-four-fifthsbp1-wdn-col-one-sixthbp1-wdn-col-five-sixthsbp1-wdn-col-three-seventhsbp1-wdn-col-four-seventhsAn Example at Breakpoint2
bp2-wdn-col-fullbp2-wdn-col-one-halfbp2-wdn-col-one-halfbp2-wdn-col-one-thirdbp2-wdn-col-two-thirdsbp2-wdn-col-one-fourthbp2-wdn-col-three-fourthsbp2-wdn-col-one-fifthbp2-wdn-col-four-fifthsbp2-wdn-col-one-sixthbp2-wdn-col-five-sixthsbp2-wdn-col-three-seventhsbp2-wdn-col-four-seventhsCentered Layouts
Whitespace is an important part of legibility and design. Sometimes it helps to center your content.
wdn-col-one-half centeredwdn-col-one-third centeredwdn-col-one-fourth centeredShort 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-colwdn-colwdn-grid-set-thirds
wdn-colwdn-colwdn-colwdn-grid-set-fourths
wdn-colwdn-colwdn-colwdn-colwdn-grid-set-fifths
wdn-colwdn-colwdn-colwdn-colwdn-colwdn-grid-set-sixths
wdn-colwdn-colwdn-colwdn-colwdn-colwdn-colwdn-grid-set-sevenths
wdn-colwdn-colwdn-colwdn-colwdn-colwdn-colwdn-colUnlimited 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-halfwdn-col-one-halfwdn-col-one-half
wdn-col-two-thirdswdn-col-one-thirdwdn-col-three-fourths
wdn-col-one-halfwdn-col-one-halfwdn-col-one-fourth
wdn-col-two-thirds centeredVisual 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-islandHere's an example of a background without the crowded content. Wow, this looks nice!
visual-island
visual-island
visual-island
visual-islandExample 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;
}