4 #components Components

Design components are reusable designs that can be applied using just the CSS class names specified in the component.

4.1 #components.box Box

A Drupal block is often styled as a box.

Example

Box title

Lorem ipsum.
<div class="box ">
  <h2 class="box__title">Box title</h2>
  <div class="box__content">
    Lorem ipsum.
  </div>
</div>

4.2 #components.button Button

Buttons built with the <button> tag are the most flexible for styling purposes. But <a> tags and <input> tags with type set to submit, image, reset, or button are also supported.

Example

Link button

Disabled link button

<p>
  <button class="" type="button">A normal button</button>
  <button class="" type="submit">A submit button</button>
  <button class="" type="reset">A reset button</button>
</p>
<p>
  <input class="" type="button" value="Input button">
  <input class="" type="submit" value="Input submit button">
  <input class="" type="reset" value="Input reset button">
</p>
<p>
  <a class="button " href="#">Link button</a>
</p>
<p>
  <button class="" type="button" disabled>A disabled button</button>
  <button class="" type="submit" disabled>A disabled submit button</button>
  <button class="" type="reset" disabled>A disabled reset button</button>
</p>
<p>
  <input class="" type="button" value="Disabled input button" disabled>
  <input class="" type="submit" value="Disabled input submit button" disabled>
  <input class="" type="reset" value="Disabled input reset button" disabled>
</p>
<p>
  <a class="button " disabled href="#">Disabled link button</a>
</p>

4.3 #components.clearfix Clearfix

Allows the bottom of an element to extend to the bottom of all floated children elements. @see http://nicolasgallagher.com/micro-clearfix-hack/

Example
A floated item.
<div class="clearfix">
  <div style="float: left; height: 50px; width: 50%;">A floated item.</div>
</div>
Examples
Default styling
  • guwatif
  • hichiuasl

 

.is-throbbing
Waiting for search result.
  • guwatif
  • hichiuasl

 

<input type="text" value="" class="autocomplete ">
<div class="autocomplete__list-wrapper">
  <ul class="autocomplete__list">
  <li class="autocomplete__list-item">guwatif</li>
  <li class="autocomplete__list-item is-selected">hichiuasl</li>
  </ul>
</div>
<p>&nbsp;</p>

4.5.3 #components.forms.form-item Form item

  • .form-item--grouped
    Pack groups of checkboxes and radio buttons closer together.
  • .form-item--error
    Highlight the form elements that caused a form submission error.
  • .form-item--inline
    Inline form items.

Wrapper for a form element (or group of form elements) and its label.

4.5.5 #components.forms.grippie Grippie

The "grippie" handle of a resizable textarea.

@TODO

Example
<header class="header" role="banner">
  <a href="/" title="Home" rel="home" class="header__logo">
    <img src="public/sample-inline.png" alt="Home" class="header__logo-image">
  </a>

  <div class="header__name-and-slogan">
    <h1 class="header__site-name">
      <a href="/" title="Home" class="header__site-link" rel="home">Site Name</a>
    </h1>
    <div class="header__site-slogan">Slogan</div>
  </div>

  <nav class="header__secondary-menu" role="navigation">
    <h2 class="visually-hidden">User menu</h2>
    <ul class="links inline clearfix">
      <li class="menu-2 first"><a href="/user">My account</a></li>
      <li class="menu-15 last"><a href="/user/logout">Log out</a></li>
    </ul>
  </nav>

  <div class="header__region">
    [Header region]
  </div>
</header>

4.7 #components.hidden Hidden elements

Hide elements from all users.

Used for elements which should not be immediately displayed to any user. An example would be a collapsible fieldset that will be expanded with a click from a user. The effect of this class can be toggled with the jQuery show() and hide() functions.

@TODO

Example
New
<mark class="highlight-mark">New</mark>
Examples
Default styling

Status message

This is a single system message.
.messages--warning
Warning messages.

Status message

This is a single system message.
.messages--error
Error messages.

Status message

This is a single system message.
<div class="messages ">
  <h2 class="visually-hidden">Status message</h2>

  This is a single system message.
</div>
Examples
Default styling

Status message

  • This is a system message.
  • And this is another system message.
  • Message received: Unknown input.
.messages--warning
Warning messages.

Status message

  • This is a system message.
  • And this is another system message.
  • Message received: Unknown input.
.messages--error
Error messages.

Status message

  • This is a system message.
  • And this is another system message.
  • Message received: Unknown input.
<div class="messages ">
  <h2 class="visually-hidden">Status message</h2>

  <ul class="messages__list">
    <li class="messages__item">This is a system message.</li>
    <li class="messages__item">And this is another system message.</li>
    <li class="messages__item">Message received: <span class="messages__highlighted-text">Unknown input</span>.</li>
  </ul>
</div>

4.10.3 #components.messages.status Status report

Drupal system status reports use a simple styling.

Examples
Default styling
This is a system status report message.
.status--ok
"Ok" status.
This is a system status report message.
.status--warning
Warning status.
This is a system status report message.
.status--error
Error status.
This is a system status report message.
<div class="status ">
  This is a system status report message.
</div>

4.11.1 #components.navigation.breadcrumb Breadcrumb navigation

The path to the current page in the form of a list of links.

Example
<nav class="breadcrumb" role="navigation">
  <h2 class="breadcrumb__title">You are here</h2>

  <ol class="breadcrumb__list">
    <li class="breadcrumb__item"><a href="#">Home</a> › </li>
    <li class="breadcrumb__item"><a href="#">Level 1</a> › </li>
    <li class="breadcrumb__item"><a href="#">Level 2</a> › </li>
    <li class="breadcrumb__item">Current item</li>
  </ol>
</nav>
<ul class="tabs">
  <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
</ul>
<ul class="tabs--secondary">
  <li class="tabs--secondary__tab is-active"><a href="#" class="tabs--secondary__tab-link is-active">Content <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Display</a></li>
  <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Settings</a></li>
</ul>
<ul class="tabs">
  <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
</ul>
<ul class="tabs--secondary">
  <li class="tabs--secondary__tab is-active"><a href="#" class="tabs--secondary__tab-link is-active">Content <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Display</a></li>
  <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Settings</a></li>
</ul>

4.12 #components.no-wrap No wrap

Prevent text wrapping.

@TODO

4.13 #components.page Page backgrounds

It's sometimes useful to add background images to body, .page, .main, and/or .main-content divs.

@TODO

4.14 #components.pager Pager

A list of page numbers when more than 1 page of content is available.

@TODO

4.15 #components.print-none Do not print

Removes an element from the print version of the web site.

By importing this CSS file as media "all", we allow this print file to be aggregated with other stylesheets, for improved front-end performance.

Example
<p class="print-none">
  This item will not be printed.
</p>

4.17 #components.responsive-video Responsive video

Using a wrapper div, embedded videos can be made responsive so that their intrinsic aspect ratio is preserved at any screen width. The responsive-video__embed class is optional if the embed is an iframe.

Example
<div class="responsive-video">
  <iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
</div>

4.18 #components.visually-hidden Visually hidden

Make an element visually hidden, but accessible to screen readers, etc.

Examples
Default styling
This text will be read by screen readers, but will be visually hidden.
.visually-hidden--off
Turns off the visually-hidden effect.
This text will be read by screen readers, but will be visually hidden.
.visually-hidden--focusable
Makes an element visually hidden by default, but visible when receiving focus.
This text will be read by screen readers, but will be visually hidden.
.visually-hidden--focusable:focus
A focused, and visible, element.
This text will be read by screen readers, but will be visually hidden.
<div class="visually-hidden ">
  This text will be read by screen readers, but will be visually hidden.
</div>

4.19 #components.watermark Watermark

Make the element appear beneath sibling elements, like a watermark.

Example
Unpublished

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div>
  <mark class="watermark">Unpublished</mark>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

4.20 #components.wireframe Wireframes

Add wireframes around main layout elements. Wireframes are useful when prototyping a website.

This design is not applied to the site unless you set the following Sass variable: $with-wireframes: true;

Example

An item inside a wireframe.

<div class="wireframe"><p>An item inside a wireframe.</p></div>