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
- Log in to post comments