Zen 7.x-6.x Style Guide

4.1 components.box Box

A simple box style.

A Drupal block is often styled as a box. However, this design component is not applied to any blocks by default; it is used as an example of how to build and document a CSS component.

"box" is the name of our component, so we define a .box class that we can apply to any HTML element that needs the box styling. We also provide a %box placeholder selector so that we can easily extend the basic box component with @extend %box;.

Take a look at the source code for this component for more information about building a good component.

Examples

Default styling

Box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

:hover

The hover/focus styling.

Box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.box--highlight

The "highlight" box variant.

Box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="box [modifier class]">
  <h2 class="box__title">Box title</h2>
  <div class="box__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

Source: components/box/_box.scss, line 1

4.2 components.clearfix Clearfix

Allows the bottom of an element to extend to the bottom of all floated child 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>

Source: components/clearfix/_clearfix.scss, line 1

4.3 components.comments Comment

A single comment in a thread of comments.

Examples

Default styling

Jane A. User replied on Wed, 08/19/2015 - 17:51 Permalink

The comment's title

Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.

.comment--preview

Preview version of comment.

Jane A. User replied on Wed, 08/19/2015 - 17:51 Permalink

The comment's title

Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.

.comment--nested

A nested comment.

Jane A. User replied on Wed, 08/19/2015 - 17:51 Permalink

The comment's title

Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.

<div class="comment__section">
  <article class="comment [modifier class]">
    <header>
      <p><a href="#">Jane A. User</a> replied on <time>Wed, 08/19/2015 - 17:51</time>
        <a href="#" class="comment__permalink">Permalink</a>
      </p>

      <h3 class="comment__title">
        <a href="#">The comment's title</a>
      </h3>
    </header>

    <p>Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.</p>
  </article>
</div>

Source: components/comment/_comment.scss, line 1

4.4 components.divider Divider

Can be used as an <hr>, an empty <div> or as a container.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="divider "></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<div class="divider ">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<hr class="divider ">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Source: components/divider/_divider.scss, line 1

4.5 components.header Branding header

Example

<header class="header " role="banner">
  <a href="/" title="Home" rel="home" class="header__logo">
    <img src="kss-assets/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>

Source: components/header/_header.scss, line 5

4.6 components.hidden Hidden

Hide elements from all users. Compare to the visually-hidden component.

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.

For anything you want to hide on page load when JavaScript is enabled, use the .js-hidden class.

Example

<div class="hidden ">
  This content is hidden.
</div>

Source: components/hidden/_hidden.scss, line 1

4.7 components.highlight-mark Highlight mark

The "new" or "updated" marker. This is a very thin component. A front-end developer may choose to delete this component and just style the <mark> element directly.

Example

New

<mark class="highlight-mark">New</mark>

Source: components/highlight-mark/_highlight-mark.scss, line 1

4.8 components.inline-links Inline links

A list of links that are inline with each other.

Example

<ul class="inline-links ">
  <li class="inline-links__item"><a href="#">Read more</a></li>
  <li class="inline-links__item"><a href="#">Comment</a></li>
</ul>

Source: components/inline-links/_inline-links.scss, line 1

4.9 components.inline-sibling Inline sibling

An element that needs to appear inline with the content that follows.

Example

A Heading

A normal paragraph. 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.

<h4 class="inline-sibling ">A Heading</h4>
<p>A normal paragraph. 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>

Source: components/inline-sibling/_inline-sibling.scss, line 1

4.10 components.messages Messages

System alerts.

Warning messages should use the .messages--warning class. Error messages should use the .messages--error class.

The icon shown is not part of the CSS; it is an SVG image in the HTML.

Example

This is how a single system message appears.

This is how multiple system messages appear.
And this is another system message.
Message received: Unknown input.

This is how a single warning message appears.

This is how a single error message appears: This is highlighted.

<div class="messages ">
  <h2 class="visually-hidden">Status message</h2>

  <div class="messages__icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
      <path d="M54 8l-30 30-14-14-10 10 24 24 40-40z" fill="#000000"></path>
    </svg>
  </div>

  This is how a single system message appears.
</div>

<div class="messages ">
  <h2 class="visually-hidden">Status message</h2>

  <div class="messages__icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
      <path d="M54 8l-30 30-14-14-10 10 24 24 40-40z" fill="#000000"></path>
    </svg>
  </div>

  <ul class="messages__list">
    <li class="messages__item">This is how multiple system messages appear.</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>

<div class="messages messages--warning ">
  <h2 class="visually-hidden">Warning message</h2>

  <div class="messages__icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
      <path d="M26,64l12,0c1.105,0 2,-0.895 2,-2l0,-9c0,-1.105 -0.895,-2 -2,-2l-12,0c-1.105,0 -2,0.895 -2,2l0,9c0,1.105 0.895,2 2,2Z" fill="#000000"></path>
      <path d="M26,46l12,0c1.105,0 2,-0.895 2,-2l0,-42c0,-1.105 -0.895,-2 -2,-2l-12,0c-1.105,0 -2,0.895 -2,2l0,42c0,1.105 0.895,2 2,2Z" fill="#000000"></path>
    </svg>
  </div>

  This is how a single warning message appears.
</div>

<div class="messages messages--error ">
  <h2 class="visually-hidden">Error message</h2>

  <div class="messages__icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
      <path d="M63.416 51.416c-0-0-0.001-0.001-0.001-0.001l-19.415-19.416 19.415-19.416c0-0 0.001-0 0.001-0.001 0.209-0.209 0.36-0.453 0.457-0.713 0.265-0.711 0.114-1.543-0.458-2.114l-9.172-9.172c-0.572-0.572-1.403-0.723-2.114-0.458-0.26 0.097-0.504 0.248-0.714 0.457 0 0-0 0-0.001 0.001l-19.416 19.416-19.416-19.416c-0-0-0-0-0.001-0.001-0.209-0.209-0.453-0.36-0.713-0.457-0.711-0.266-1.543-0.114-2.114 0.457l-9.172 9.172c-0.572 0.572-0.723 1.403-0.458 2.114 0.097 0.26 0.248 0.505 0.457 0.713 0 0 0 0 0.001 0.001l19.416 19.416-19.416 19.416c-0 0-0 0-0 0.001-0.209 0.209-0.36 0.453-0.457 0.713-0.266 0.711-0.114 1.543 0.458 2.114l9.172 9.172c0.572 0.572 1.403 0.723 2.114 0.458 0.26-0.097 0.504-0.248 0.713-0.457 0-0 0-0 0.001-0.001l19.416-19.416 19.416 19.416c0 0 0.001 0 0.001 0.001 0.209 0.209 0.453 0.36 0.713 0.457 0.711 0.265 1.543 0.114 2.114-0.458l9.172-9.172c0.572-0.572 0.723-1.403 0.458-2.114-0.097-0.26-0.248-0.504-0.457-0.713z" fill="#000000"></path>
    </svg>
  </div>

  This is how a single error message appears: <span class="messages__highlight">This is highlighted.</span>
</div>

Source: components/messages/_messages.scss, line 1

4.11 components.messages--color Message colors

Drupal system status reports use just the message colors and no other styling.

Examples

Default styling

This is a system status report message.

.messages--ok-color

"Ok" status.

This is a system status report message.

.messages--warning-color

Warning status.

This is a system status report message.

.messages--error-color

Error status.

This is a system status report message.

<div class="[modifier class]">
  This is a system status report message.
</div>

Source: components/messages/_messages.scss, line 14

4.12 components.print-none Do not print

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

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

Example

This item will not be printed.

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

Source: components/print-none/_print-none.scss, line 1

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

Examples

Default styling

.responsive-video--4-3

A video with a 4:3 aspect ratio instead of the default 16:9 one.

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

Source: components/responsive-video/_responsive-video.scss, line 1

4.14 components.visually-hidden Visually hidden

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

Examples

Default styling

.visually-hidden--off

Turns off the visually-hidden effect.

.visually-hidden--focusable

Makes an element visually hidden by default, but visible when receiving focus.

.visually-hidden--focusable:focus

A focused, and visible, element.

<div class="visually-hidden [modifier class]">
  This text will be read by screen readers, but will be visually hidden.
</div>

Source: components/visually-hidden/_visually-hidden.scss, line 1

4.15 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>

      <div>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>
  </div>

Source: components/watermark/_watermark.scss, line 1

4.16 components.wireframe Wireframe

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">
  An item inside a wireframe.
</div>

Source: components/wireframe/_wireframe.scss, line 3