Hugo Zen 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.

Markup: components/box/box.twig

<div class="box {{modifier_class}}">
  <h2 class="box__title">{{title}}</h2>
  <div class="box__content">
    {{content}}
  </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.

Markup: components/clearfix/clearfix.twig

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

Markup: components/divider/divider.twig

<div class="divider {{modifier_class}}"></div>

<p>{{content}}</p>

<div class="divider {{modifier_class}}">
  <p>{{content}}</p>
</div>

<hr class="divider {{modifier_class}}">

<p>{{content}}</p>

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

4.4 components.header Branding header

Example

Markup: components/header/header.twig

<header class="header {{modifier_class}}" 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.5 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

Markup: components/hidden/hidden.twig

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

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

4.6 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

Markup: components/highlight-mark/highlight-mark.twig

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

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

4.7 components.inline-links Inline links

A list of links that are inline with each other.

Example

Markup: components/inline-links/inline-links.twig

<ul class="inline-links {{modifier_class}}">
  <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.8 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.

Markup: components/inline-sibling/inline-sibling.twig

<h4 class="inline-sibling {{modifier_class}}">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.9 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.

Markup: components/print-none/print-none.twig

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

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

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

Markup: components/responsive-video/responsive-video.twig

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

Markup: components/visually-hidden/visually-hidden.twig

<div class="visually-hidden {{modifier_class}}">
  {{content}}
</div>

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

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

Markup: components/watermark/watermark.twig

<div>
  <mark class="watermark {{modifier_class}}">{{content}}</mark>

  {% if sibling %}
    <div>{{ sibling }}</div>
  {% endif %}
</div>

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

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

Markup: components/wireframe/wireframe.twig

<div class="wireframe">
  {{content}}
</div>

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