Classes and Selectors Layout

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level:

Intermediate

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

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

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

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

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

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

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

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

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

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

.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

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

.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

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

Contributed By:

IIM