Doghouse UiKit

11.1 #Objects.breadcrumb Breadcrumb

Defines styles for breadcrumb navigation. See duk-breadcrumb()

Examples

Default styling

.breadcrumb--path

Display as "path" style.

Markup

<nav class="breadcrumb [modifier class]">
  <ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ol>
 </nav>

Source: scss/objects/_breadcrumb.scss, line 4

11.2 #Objects.duk-responsive-square Responsive square

A square that retains its aspect ratio as it is resized. Uses duk-responsive-aspect-ratio().

Example

I am a responsive square

Markup

 <div class="duk-responsive-square" style="max-width: 400px">
   <div class="duk-island--primary">I am a responsive square</div>
 </div>

Source: scss/objects/_responsive-aspect-ratio.scss, line 6

11.3 #Objects.duk-responsive-video Responsive video

Maintains the aspect ratio of an iframe video while being responsive. Uses duk-responsive-aspect-ratio().

Example

Markup

 <div class="duk-responsive-video" style="max-width: 540px">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/Imeq3GeRttw" frameborder="0" allowfullscreen></iframe>
 </div>

Source: scss/objects/_responsive-aspect-ratio.scss, line 20

11.4 #Objects.flyout Flyout

Flyouts are pieces of content that fly out of a parent when said parent is hovered.

Examples

Default styling

.duk-flyout--left

Fylout leff

.duk-flyout--right

Flyout right

Markup

<div style="max-width: 500px">
  <div class="duk-flyout [modifier class]">
    Hover over me to see content below
    <div class="duk-flyout__content duk-island--primary">
      <p>Flying Hello World</p>
    </div>
  </div>
</div>

Source: scss/objects/_flyout.scss, line 4

11.5 #Objects.island Island

A container with a consistent gutter and margin bottom. See duk-island().

Examples

Default styling

Island heading

Island text

.duk-island--primary

Primary color

Island heading

Island text

.duk-island--secondary

Secondary color

Island heading

Island text

.duk-island--tertiary

Tertiary color

Island heading

Island text

Markup

  <div class="duk-island [modifier class]">
    <h3>Island heading</h3>
    <p>Island text</p>
  </div>

Source: scss/objects/_island.scss, line 4

11.6 #Objects.messages Messages

Messages and callouts. See duk-message-base() & duk-message-color().

Examples

Default styling

I am a message with a link

.messages--success

Success message

I am a message with a link

.messages--warning

Waring message

I am a message with a link

.messages--error

Error message

I am a message with a link

Markup

  <div class="messages [modifier class]">I am a message with a <a href="#">link</a></div>

Source: scss/objects/_messages.scss, line 4

11.7 #Objects.overlay Overlay

Overlays present new content on hover.

Example

Hello World

Markup

<a href="#" class="duk-overlay">
  <img src="http://placekitten.com/g/300/200" alt="" />
  <div class="duk-overlay__area">
    <div class="duk-overlay__area-content">Hello World</div>
  </div>
</a>

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

11.8 #Objects.progress-bar Progress Bar

A progress bar.

Example

Markup

  <div class="duk-progress-bar"><div style="width: 60%"></div></div><br />
  <div class="duk-progress-bar duk-text--primary"><div style="width: 30%" class=""></div></div><br />
  <div class="duk-progress-bar duk-text--secondary"><div style="width: 70%"></div></div><br />
  <div class="duk-progress-bar duk-text--tertiary"><div style="width: 40%"></div></div>

Source: scss/objects/_progress.scss, line 4