GNWT Base Theme Style Guide

4.1 components.accordion Accordion

Content displayed in a collapsible accordion using jQuery UI Accordion.

Example

Accordion header

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

Accordion header

Markup: components/accordion/accordion.twig

<div class="ui-accordion">
  <h3 class="ui-accordion-header">{{title}}</h3>
  <div class="ui-accordion-content ui-widget-content" style="display:none;">{{content}}</div>
</div>
<div class="ui-accordion">
  <h3 class="ui-accordion-header ui-state-active">{{title}}</h3>
  <div class="ui-accordion-content ui-widget-content">{{content}}</div>
</div>
<div class="ui-accordion">
  <h3 class="ui-accordion-header">{{title}}</h3>
  <div class="ui-accordion-content ui-widget-content" style="display:none;">{{content}}</div>
</div>

Source: sass/components/accordion/_accordion.scss, line 1

4.2 components.banner Banner

Currently, this is a full-width banner to be used on the homepage only. A future version of this component will provide banner functionality throughout the entire website.

The optional Overlay Graphic can be aligned left, center or right on the tablet/desktop version of the site, but will always be centered on mobile.

NOTE: The blue background denotes a background image and does not display properly on this style guide when the browser width is larger than 1700px, as it's expecting the container to run the full width of the browser.

Examples

Default styling

.overlay-align-left

Align the overlay graphic to the left edge of content

.overlay-align-center

Align the overlay graphic in the center

.overlay-align-right

Align the overlay graphic to the right edge of content

Markup: components/banner/banner.twig

<div class="banner">
  <div class="banner--image">
    <svg width="1720" height="320"><rect width="100%" height="100%" fill="#c4daf1"></rect></svg>
  </div>
  <div class="banner--overlay {{modifier_class}}">
    <div class="overlay-inner">
      <svg height="104" width="204"><ellipse cx="102" cy="52" rx="100" ry="50"
      style="fill:#555;stroke:#333;stroke-width:2" /></svg>
    </div>
  </div>
  <div class="banner--content-wrapper">
  <div class="banner--content">
    <h2 class="banner--headline">Here's a Headline</h2>
    <div class="banner--body">
      <p>“Here is one of the few effective keys to the design problem: the ability of the designer to recognize as many of the constraints as possible; his willingness and enthusiasm for working within these constraints.” –Charles Eames</p>
    </div>
    <a href="//localhost:3002/contact-us" class="banner--button">Call to Action</a></div>
  </div>
</div>

Source: sass/components/banner/_banner.scss, line 1

4.3 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: sass/components/box/_box.scss, line 1

4.4 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: sass/components/clearfix/_clearfix.scss, line 1

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

Markup: components/comment/comment.twig

<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: sass/components/comment/_comment.scss, line 1

4.6 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: sass/components/divider/_divider.scss, line 1

4.7 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: sass/components/header/_header.scss, line 5

4.8 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: sass/components/hidden/_hidden.scss, line 1

4.9 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: sass/components/highlight-mark/_highlight-mark.scss, line 1

4.10 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: sass/components/inline-links/_inline-links.scss, line 1

4.11 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: sass/components/inline-sibling/_inline-sibling.scss, line 1

4.12 components.label Label

A Label is used to identify text inline as being a part of a universal language across the site. Labels are commonly used for tags.

Examples

Default styling

Tag Text

.label--primary

Primary label

Tag Text

.label--highlight

Highlight label

Tag Text

Markup: components/label/label.twig

<span class="label {{modifier_class}}">Tag Text</span>

Source: sass/components/label/_label.scss, line 1

4.13 components.list-style List styles

Source: sass/components/list-styles/_list-styles.scss, line 1

4.13.1 components.list-style.menu-item List style menu item

Styles used for menu items in lists, especially in asides.

Used primarily for sidebar navigation, this makes an anchor tag within the styled list item a clickable block and matches %list-style--menu-item--collapsed and %list-style--menu-item--expanded to proper glyphicons.

NOTE: A <div> tag can be added as a wrapper for the anchor tag by some modules, namely facetapi_collapsible. We accommodate for that possibility with the addtional > div code in this component to ensure bullet glyphs are properly rendered.

Example

Markup: components/list-styles/list-styles--menu-item.twig

<ul style="padding:0; margin:0;">
  <li class="list-style--menu-item"><a href="#">Menu Item</a></li>
  <li class="list-style--menu-item list-style--menu-item--collapsed"><a href="#">Menu Item Collapsed</a>
  <ul style="padding:0; margin:0;">
    <li class="list-style--menu-item"><a href="#">Sub-menu Item 1</a></li>
    <li class="list-style--menu-item"><a href="#">Sub-menu Item 2</a></li>
    <li class="list-style--menu-item"><a href="#">Sub-menu Item 3</a></li>
  </ul>
  </li>
  <li class="list-style--menu-item list-style--menu-item--expanded"><a href="#">Menu Item Expanded</a>
  <ul style="padding:0; margin:0;">
    <li class="list-style--menu-item"><a href="#">Sub-menu Item 1</a></li>
    <li class="list-style--menu-item"><a href="#">Sub-menu Item 2</a></li>
    <li class="list-style--menu-item"><a href="#">Sub-menu Item 3</a></li>
  </ul>
  </li>
</ul>

Source: sass/components/list-styles/_list-styles.scss, line 5

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

Markup: components/messages/messages.twig

<div class="messages {{modifier_class}}">
  <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 {{modifier_class}}">
  <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 {{modifier_class}}">
  <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 {{modifier_class}}">
  <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: sass/components/messages/_messages.scss, line 1

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

Markup: components/messages/messages--color.twig

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

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

4.16 components.metric Metric

A Metric is effectively a block used to display some type of data point, such as a progress meter, small chart or value, in a consistent fashion across the property.

Example

Data Point Title

5 of 14 completed

Markup: components/metric/metric.twig

<div class="metric {{modifier_class}}">
  <h2>Data Point Title</h2>
  <div class="metric--lead">
    <p>5 of 14 completed</p>
  </div>
</div>

Source: sass/components/metric/_metric.scss, line 1

4.17 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: sass/components/print-none/_print-none.scss, line 1

4.18 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: sass/components/responsive-video/_responsive-video.scss, line 1

4.19 components.status Status

A Status is an indicator block, typically with a single line of text within it. It can be used to identify the current state of an item, such as completed, success, delayed, failure, etc.

Examples

Default styling

Status Update Text

.status--primary

Primary/completed status

Status Update Text

.status--success

Success/on-track status

Status Update Text

.status--warning

Warning/delayed status

Status Update Text

.status--danger

Danger/not-being-pursued status

Status Update Text

Markup: components/status/status.twig

<span class="status {{modifier_class}}">Status Update Text</span>

Source: sass/components/status/_status.scss, line 1

4.20 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: sass/components/visually-hidden/_visually-hidden.scss, line 1

4.21 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: sass/components/watermark/_watermark.scss, line 1

4.22 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: sass/components/wireframe/_wireframe.scss, line 3