7 #Layout Layout

7.1 #Layout.1-container Containers

A Container horizontally constraints its content to a max width.

Examples

Default styling

Bacon ipsum dolor amet t-bone bacon alcatra pig. Meatball ball tip beef bacon, tongue doner pork pork chop ham pastrami beef ribs jowl short loin ground round. Sausage strip steak turkey flank doner ham hock ribeye venison pork belly tri-tip fatback. Salami alcatra meatball swine. Tri-tip sausage frankfurter ham, rump cow burgdoggen porchetta leberkas ham hock capicola beef turducken tail swine. Rump drumstick swine andouille shankle ribeye.

.duk-container--small

Small container

.duk-container--medium

Medium container

.duk-container--large

Large container

.duk-container--x-large

Extra large container

.duk-container--xx-large

Huge large container

Markup

 <div class="[modifier class] duk-island--tertiary">
   Bacon ipsum dolor amet t-bone bacon alcatra pig. Meatball ball tip beef bacon, tongue doner pork pork chop ham
   pastrami beef ribs jowl short loin ground round. Sausage strip steak turkey flank doner ham hock ribeye venison
   pork belly tri-tip fatback. Salami alcatra meatball swine. Tri-tip sausage frankfurter ham, rump cow burgdoggen
   porchetta leberkas ham hock capicola beef turducken tail swine. Rump drumstick swine andouille shankle ribeye.
 </div>

Source: scss/objects/_layout.scss, line 6

7.2 #Layout.2-clearfix Clearfix

Clear child floats.

Example

Bacon ipsum dolor amet t-bone bacon alcatra pig. Meatball ball tip beef bacon, tongue doner pork pork chop ham

Meatball ball tip beef bacon, tongue doner pork pork chop ham

Markup

 <div class="duk-clearfix duk-island duk-island--secondary">
   <div style="float: left">
     Bacon ipsum dolor amet t-bone bacon alcatra pig. Meatball ball tip beef bacon, tongue doner pork pork chop ham
   </div>
   <div style="float: right">
     Meatball ball tip beef bacon, tongue doner pork pork chop ham
   </div>
 </div>

Source: scss/objects/_layout.scss, line 41

7.3 #Layout.3-overflow Overflow

Overflow helper classes.

Parameters:

.duk-overflow--hidden

Hidden overflow
.duk-overflow--auto

Auto overflow (scrollbars)

Source: scss/objects/_layout.scss, line 89

7.4 #Layout.3-position Position

Position helper classes. Also see duk-position()

Parameters:

.duk-position--static

Position static
.duk-position--relative

Position relative
.duk-position--absolute

Position absolute
.duk-position--fixed

Position fixed
.duk-position--sticky

Position sticky (doesn't work in IE)

Source: scss/objects/_layout.scss, line 64

7.5 #Layout.4-margin-bottom Gutter helpers

Gutter helper classes. Multiplier values are 1, 2, 3, 4, 5.

Examples:

  <div class="duk-mb--3">I have a margin bottom of 3rem</div>
  <div class="duk-mr--1">I have a margin right of 1rem</div>
  <div class="duk-pl--2">I have a padding left of 2rem</div>
  <div class="duk-pt--5">I have a padding top of 5rem</div>

Parameters:

.duk-mb--1

margin-bottom (last number is the base gutter multiplier)
.duk-mt--1

margin-top (last number is the base gutter multiplier)
.duk-mr--1

margin-right (last number is the base gutter multiplier)
.duk-ml--1

margin-left (last number is the base gutter multiplier)
.duk-pb--1

padding-bottom (last number is the base gutter multiplier)
.duk-pt--1

padding-top (last number is the base gutter multiplier)
.duk-pr--1

padding-right (last number is the base gutter multiplier)
.duk-pl--1

padding-left (last number is the base gutter multiplier)

Source: scss/objects/_layout.scss, line 107