Components

Alerts

Here's something important!
Oh no, an error message!
Just some information.
Yay, success!
<div class="flash-alert">Here's something important!</div>
<div class="flash-error">Oh no, an error message!</div>
<div class="flash-notice">Just some information.</div>
<div class="flash-success">Yay, success!</div>

Article heading links

In <article> elements, we're using Javascript to add a link to that heading, styled as a Font Awesome icon, so the link can easily be copied.

Adding PhpMyAdmin to a Docker Stack

<div class="post">
  <article>
    <h3 id="adding-phpmyadmin-to-a-docker-stack">
      Adding PhpMyAdmin to a Docker Stack
    </h3>
  </article>
</div>

Buttons

A basic link styled as a button. Default is teal. Dark background mixin button-dark($background-color: $teal, $color: $eggshell) available.

<div class="styleguide-wrapper">
  <a href="#" class="button">Get in touch</a>
</div>
<div class="styleguide-wrapper">
  <a href="#" class="button--magenta">Get in touch</a>
</div>
<div class="styleguide-wrapper">
  <a href="#" class="button--orange">Get in touch</a>
</div>
<div class="styleguide-wrapper bg-teal">
  <a href="#" class="button--white-teal">Get in touch</a>
</div>
<div class="styleguide-wrapper bg-magenta">
  <a href="#" class="button--white-magenta">Get in touch</a>
</div>
<div class="styleguide-wrapper bg-orange">
  <a href="#" class="button--white-orange">Get in touch</a>
</div>
<div class="styleguide-wrapper">
  <a href="#" class="button--dark">Get in touch</a>
</div>

Arrow button

The default button--arrow is teal.

<div class="styleguide-wrapper">
  <a href="#" class="button--arrow">Work with us</a>
</div>
<div class="styleguide-wrapper">
  <a href="#" class="button--arrow--magenta">Work with us</a>
</div>
<div class="styleguide-wrapper">
  <a href="#" class="button--arrow--orange">Work with us</a>
</div>
<div class="styleguide-wrapper bg-teal">
  <a href="#" class="button--arrow--white-teal">Work with us</a>
</div>
<div class="styleguide-wrapper bg-magenta">
  <a href="#" class="button--arrow--white-magenta">Work with us</a>
</div>
<div class="styleguide-wrapper bg-orange">
  <a href="#" class="button--arrow--white-orange">Work with us</a>
</div>

Submit button

<input type="submit" value="Post comment" id="submit">

Case study block

<div class="case-study-block">
  <a class="case-study-block__link" href="/results/case-studies/pmp-civil-rights-map/">
    <div class="case-study-block__image" style="background-image: url(/assets/img/work/logos/pmp-logo-eggshell.png);">
      <img src="/assets/img/work/pmp-civil-rights-map/pmp-civil-rights-map-block.jpg" alt="Durham Civil and Human Rights History Map">
    </div>
    <h3 class="heading--underline--orange">Durham Civil and Human Rights History Map</h3>
    <div class="case-study-block__tags">
      <p>Drupal 8 </p><p></p>
      <p>Responsive Design </p><p></p>
      <p>UX </p><p></p>
      <p>Web Mapping </p>
    </div>
  </a>
</div>

Comment

Markup is generated by Javascript by way of our Squabble server.

Chi Chi says:

2017-04-14 18:17:15

This is a test comment.

Chris says:

2017-04-18 16:00:06

Thanks for your insightful comment, Chi Chi!

<div class="comment">
  <p class="comment__name"><span class="c-magenta">Chi Chi</span> says:</p>
  <p class="comment__date">2017-04-14 18:17:15</p>
  <p class="comment__text">This is a test comment.</p>
</div>
<div class="comment savasian">
  <img src="/assets/img/logo.svg" class="comment__logo" alt="Savas Labs logo"><p><span class="c-magenta">Chris</span> says:</p>
  <p class="comment__date">2017-04-18 16:00:06</p>
  <p class="comment__text">Thanks for your insightful comment, Chi Chi!</p>
</div>

Delimited list

<div class="delimited-list">
  <a href="https://www.drupal.org/sandbox/kostajh/2478765" class="delimited-list__item">Views GeoJSON Drupal 8 (33)</a>
  <a href="https://www.drupal.org/project/views_geojson" class="delimited-list__item">Views GeoJSON (24)</a>
  <a href="https://www.drupal.org/project/token_actions_extras" class="delimited-list__item">Token Actions Extras (9)</a>
  <a href="https://www.drupal.org/project/inuit" class="delimited-list__item">inuit.css (8)</a>
  <a href="https://www.drupal.org/project/security_check" class="delimited-list__item">Security Check (6)</a>
  <a href="https://www.drupal.org/project/translatableregions" class="delimited-list__item">Translatable Regions (5)</a>
  <a href="https://www.drupal.org/sandbox/kostajh/1454452" class="delimited-list__item">Poll Cookies (4)</a>
</div>

Disclaimer

Used to add words of caution to outdated blog posts.

Proceed with caution

This post details the use of the Bourbon mixin library version 4*, but Bourbon is in the process of updating to major version 5. The new version includes significant changes and some of the mixins in this post will no longer exist. See this GitHub thread for more information.

<div class="region--post-header__disclaimer">
  <h2 class="h4">Proceed with caution</h2>
  <p>This post details the use of the Bourbon mixin library version 4*, but Bourbon is in the process of updating to major version 5. The new version includes significant changes and some of the mixins in this post will no longer exist. <a href="https://github.com/thoughtbot/bourbon/issues/702">See this GitHub thread</a> for more information.</p>
</div>

Footer Navigation

<div class="styleguide-wrapper bg-teal">
  <li class="footer-navigation__menu-link">
    <a href="#">Company</a>
  </li>
</div>

Footer menu

<div class="styleguide-wrapper bg-teal">
  <nav role="navigation" class="footer-navigation">
    <ul class="footer-navigation__menu">
      <li class="footer-navigation__menu-link">
        <a href="#">Company</a>
      </li>
      <li class="footer-navigation__menu-link">
        <a href="#">Results</a>
      </li>
      <li class="footer-navigation__menu-link">
        <a href="#">Services</a>
      </li>
      <li class="footer-navigation__menu-link">
        <a href="#">Blog</a>
      </li>
      <li class="footer-navigation__menu-link">
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</div>

Form elements

See the buttons section for the submit button component.

Text input

<label for="name">Name</label>
<input type="text" name="name" id="name" required="">

Text area

<label for="comment">Comment</label>
<textarea name="comment" id="comment" required=""></textarea>

Forms

Comment form

Savas Labs will never sell your email address or spam you.

Plain text format only please.

<form id="form--comment" class="form--comment" _lpchecked="1">
  <div class="form--comment__helptext">
    <p>Savas Labs will never sell your email address or spam you.</p>
    <p>Plain text format only please.</p>
  </div>
  <div class="form--comment__wrapper">
    <div class="form--comment__column--left">
      <div class="form--comment__field form--comment__field--comment">
        <label for="comment" class="sr-only">Comment</label>
        <textarea name="comment" id="comment" class="" rows="4" placeholder="Leave a comment..." required=""></textarea>
      </div>
    </div>
    <div class="form--comment__column--right">
      <div class="form--comment__field form--comment__field--name">
        <label for="name" class="sr-only">Name</label>
        <input type="text" name="name" id="name" class="" value="" placeholder="Name" required="">
      </div>
      <div class="form--comment__field form--comment__field--email">
        <label for="email" class="sr-only">E-mail</label>
        <input type="email" name="email" id="email" class="" value="" placeholder="E-mail" required="">
      </div>
      <label for="url" class="sr-only">If you are a human, do not fill out this field.</label>
      <input type="text" name="url" id="url" class="form--comment__field--url" value="">
      <div class="form--comment__actions">
        <input type="submit" value="POST" id="submit" class="form--comment__actions--submit">
      </div>
    </div>
  </div>
</form>

Header Navigation

A normal menu link plus the bold, magenta Contact link.

<li class="header-navigation__menu-link ">
  <a href="#">Services</a>
</li>
<li class="header-navigation__menu-link ">
  <a href="#">Contact</a>
</li>

Header menu

<a href="#" id="js-mobile-menu" class="header-navigation__mobile-menu-link">MENU</a>

  <nav role="navigation" class="header-navigation">
    <ul id="js-navigation-menu" class="header-navigation__menu">
      <li class="header-navigation__menu-link ">
        <a href="#">Company</a>
      </li>
      <li class="header-navigation__menu-link ">
        <a href="#">Results</a>
      </li>
      <li class="header-navigation__menu-link ">
        <a href="#">Services</a>
      </li>
      <li class="header-navigation__menu-link ">
        <a href="#">Blog</a>
      </li>
      <li class="header-navigation__menu-link ">
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>

Icons

Service icons

<div class="icon--service">
  <a href="/services/design-ux/" class="icon--service__link">
    <div class="icon--service__image">
      <img src="/assets/img/icons-and-logos/design-ux-icon.svg" alt="Design / UX">
    </div>
    <p class="icon--service__title">Design / UX</p>
  </a>
</div>

Grayscale image

Images with class image--grayscale are filtered to grayscale in normal state and unfiltered to show full color on hover or focus.

Pauli Murray Project
<img alt="Pauli Murray Project" src="/assets/img/work/logos/pauli-murray-logo.png" class="image--grayscale">

Key-value list item

Be Inclusive

We embrace diversity in every sense of the word, not only for the benefits it brings to the company by providing a more holistic perspective on problem solving, but as it pertains to the empowerment of traditionally and presently underrepresented groups. We strive to craft an intentionally inclusive work environment in which everyone feels comfortable in their own skin.

<div class="key-value-list__item">
  <div class="key-value-list__item__key">
    <h3 class="c-orange heading--bold">Be Inclusive</h3>
  </div>
  <div class="key-value-list__item__value">
    <p>
      We embrace diversity in every sense of the word, not only for the benefits it brings to the company by providing a more holistic perspective on problem solving, but as it pertains to the empowerment of traditionally and presently underrepresented groups. We strive to craft an intentionally inclusive work environment in which everyone feels comfortable in their own skin.
    </p>
  </div>
</div>

Logos

Main logo and light logo.

<div class="styleguide-wrapper">
  <img src="/assets/img/logo.svg" alt="Savas Labs" class="savas-logo savas-logo--main">
</div>
<div class="styleguide-wrapper bg-teal">
  <img src="/assets/img/logo-light.svg" alt="Savas Labs" class="savas-logo savas-logo--light">
</div>

Tables

Use the class table--minimal to produce the following:

<table class="table--minimal">
  <tbody>
    <tr>
      <td class="label"><i class="fa fa-calendar"></i>&nbsp;&nbsp;Client since</td>
      <td>2016 - present</td>
    </tr>
    <tr>
      <td class="label"><i class="fa fa-wrench"></i>&nbsp;&nbsp;Services provided</td>
      <td>
        <ul>
          <li><a href="/services/development">Standard Audit</a></li>
          <li><a href="/services/development">Drupal 6 to 7 migration</a></li>
          <li><a href="/blog/tag/theming">Drupal theming and site-building</a></li>
          <li><a href="/services/development">Drupal custom module development</a></li>
          <li><a href="/services/development">Performance improvements</a></li>
        </ul>
      </td>
    </tr>
    <tr>
      <td class="label"><i class="fa fa-code"></i>&nbsp;&nbsp;Technologies used</td>
      <td>
        <ul>
          <li><a href="/blog/tag/drupal">Drupal 7</a></li>
          <li><a href="/blog/tag/migration">Migrate module</a></li>
          <li><a href="/blog/tag/docker">Docker</a></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Team member bio

Note that the component template uses the Jekyll Picture Tag plugin to create a <picture> element for the team member photo.

<div class="team-member-bio">
  <a class="team-member-bio__link" href="/company/chris-russo/">
    <div class="team-member-bio__image">
      <img src="/assets/img/team/chris/chris-square-green.jpg" class="image--team-square-small" itemprop="image" alt="Chris Russo">
    </div>
    <h3 class="team-member-bio__name heading--bold heading--sans-serif h5 c-dark-teal">Chris Russo</h3>
    <p class="team-member-bio__title">Principal Director</p>
    <p class="team-member-bio__description">Chris does his best to ensure that his team is learning and growing and that our clients feel like partners.</p>
  </a>
</div>

Text block list item

<div class="text-block-list-item">
  <a href="https://www.drupal.org/project/rebuild" class="text-block-list-item__link">
    <div class="text-block-list-item__content">
      <h3 class="text-block-list-item__heading heading--bold heading--sans-serif h4">Drush Rebuild</h3>
      <p class="text-block-list-item__text">Drush Rebuild is a utility for rebuilding your local development environments.</p>
      <p class="link--arrow">Learn More</p>
    </div>
  </a>
</div>

Tiles

Blog tile

<div style="max-width: 400px;">
  <div class="tile--blog tile">
    <a href="/2017/03/06/five-drupal-8-tips-to-empower-content-authors.html" class="tile--blog__link">
      <div class="tile--blog__content tile__content bg-light-teal">
        <div class="tile--blog__image" style="background-image: url(/assets/img/blog/content-authoring-d8.jpg);"></div>
        <div class="tile--blog__post-title">
          <p>Five Drupal 8 Tips to Empower Content Authors</p>
        </div>
      </div>
      <div class="tile--blog__hover tile__hover bg-orange">
        <p>Five Drupal 8 tips to make the content authoring experience more enjoyable and productive!</p>
        <p class="link--cta link--cta--inverse">Read more</p>
      </div>
    </a>
  </div>
</div>

Detailed blog tile

<div style="max-width: 400px;">
  <div class="tile--blog tile--blog--detailed tile">
    <a href="/2017/02/20/drupal-docker-pattern-lab.html" class="tile--blog__link">
      <div class="tile--blog__content tile__content bg-light-teal"><div class="tile--blog__image" style="background-image: url(/assets/img/blog/docker-drupal-pattern-lab.jpg);">
        <p class="tile--blog--detailed__primary-tag">Drupal</p>
      </div>
        <div class="tile--blog__post-title">
          <p>Docker and the Drupal Pattern Lab Starter Theme</p>
          <div class="tile--blog--detailed__author">
            <img src="/assets/img/team/dan/dan-square-outside.jpg" class="image--team-blog-tile" itemprop="image" alt="Dan Murphy">
          </div>
          <div class="tile--blog--detailed__author-bg"></div>
        </div>
      </div>
      <div class="tile--blog__hover tile__hover bg-orange">
        <p>This post demonstrates how to build a Docker image that can be used in local Drupal development with the Pattern Lab Starter theme and/or with other common front-end applications such as npm, Gulp, and Bower.</p>
        <p class="link--cta link--cta--inverse">Read more</p>
      </div>
    </a>
  </div>
</div>

Latest blog tile

<div style="max-width: 400px;">
  <div class="tile--blog--latest bg-light-teal" style="background-image: url(/assets/img/blog/on-web-typography-featured.jpg);">
    <a href="/2017/02/27/on-web-typography-review.html" class="tile--blog--latest__link" style="height: 300px;">
      <div class="tile--blog--latest__text">
        <h2 class="tile--blog--latest__text__title heading--sans-serif heading--bold h4">On Web Typography - a Book Review</h2>
        <p class="tile--blog--latest__text__author">By Anne Tomasevich</p>
        <p class="tile--blog--latest__text__date">Feb 27, 2017</p>
      </div>
    </a>
  </div>
</div>

Case study tile

<div style="max-width: 400px;">
  <div class="tile--case-study tile">
    <a href="/results/case-studies/duke-today/" class="tile--case-study__link">
      <div class="tile--case-study__content tile__content bg-dark-teal" style="background-image: url(/assets/img/work/duke-today/duke-today-tile.jpg);">
        <h3 class="heading--bold c-eggshell h4">Duke Today Redesign</h3>
      </div>
      <div class="tile--case-study__hover tile__hover bg-orange">
        <p>After multiple organizational transitions left Duke’s flagship news outlet’s redesign incomplete, partner Cuberis entrusted Savas Labs to audit the work, implement new functionality, and execute a complex content migration in just 4 months.</p>
        <p class="link--cta link--cta--inverse">Learn more</p>
      </div>
    </a>
  </div>
</div>