Classes and Selectors Layout

Skill Level: 
Intermediate
.wdn-band
A full-width portion of content

code preview

.wdn-band .wdn-inner-wrapper
A wrapper for full-width content providing proper padding

code preview

wdn-band .wdn-inner-wrapper.wdn-inner-padding-sm
A wrapper with smaller than normal top/bottom padding

code preview

.wdn-band .wdn-inner-wrapper.wdn-inner-padding-lg
A wrapper with larger than normal top/bottom padding

code preview

.wdn-band .wdn-inner-wrapper.wdn-inner-padding-no-top
A wrapper with no top padding

code preview

.wdn-band .wdn-inner-wrapper.wdn-inner-padding-no-bottom
A wrapper with no bottom padding

code preview

.wdn-band .wdn-inner-wrapper.wdn-inner-padding-none
A wrapper with not top/bottom padding

code preview

.wdn-band .wdn-stretch
Stretches a inline element to full width

code preview

.wdn-band .wdn-center
Uses center alignment for text in a band

code preview

.wdn-band .wdn-text-band
A band specifically design to only contain text (less wide at desktop sizes)

code preview

.wdn-two-flow-columns
Uses the CSS3 Multi-column module to provide 2 columns of content with a light rule between

code preview

.wdn-three-flow-columns
Uses the CSS3 Multi-column module to provide 3 columns of content with a light rule between

code preview

.wdn-grid-set
A wrapper for starting a grid layout, provides proper side margins for gutters

code preview

.wdn-grid-set-full, .wdn-grid-set-halves, .wdn-grid-set-thirds, .wdn-grid-set-fourths, .wdn-grid-set-fifths, .wdn-grid-set-sixths, .wdn-grid-set-sevenths
A wrapper for starting a grid layout of equally sized columns (each .wdn-col child will be the same width). These classes can be prefixed with `bp1-`, `bp2-`, `bp3-, or `bp4-` to provide the browser width at which the grid set _starts_ to provide column widths

code preview

.wdn-col, .wdn-col-full, .wdn-col-one-half, .wdn-col-one-third, .wdn-col-two-thirds, .wdn-col-one-fourth, .wdn-col-two-fourths, .wdn-col-three-fourths, .wdn-col-one-fifth, .wdn-col-two-fifths, .wdn-col-three-fifths, .wdn-col-four-fifths, .wdn-col-one-sixth, .wdn-col-two-sixths, .wdn-col-three-sixths, .wdn-col-four-sixths, .wdn-col-five-sixths, .wdn-col-one-seventh, .wdn-col-two-sevenths, .wdn-col-three-sevenths, .wdn-col-four-sevenths, .wdn-col-five-sevenths, .wdn-col-six-sevenths
A wrapper for a grid layout column, provides padding for gutters. These classes can be prefixed with `bp1-`, `bp2-`, `bp3-, or `bp4-` to provide the browser width at which column width _starts_

code preview

.wdn-col .visual-island
Provides padding inside a grid layout column to allow for borders and backgrounds that don't interfere with the grid gutters

code preview

.wdn-grid-set-halves.wdn-grid-clear, .wdn-grid-set-thirds.wdn-grid-clear, .wdn-grid-set-fourths.wdn-grid-clear, .wdn-grid-set-fifths.wdn-grid-clear, .wdn-grid-set-sixths.wdn-grid-clear, .wdn-grid-set-sevenths.wdn-grid-clear
Clears the left float plane for the start of a consistent grid layout row automatically (this does not work when multiple breakpoint grid sets are used)

code preview

Contributed By: 
IIM