Typography

Body copy

The default font-size is 1rem (16px-ish) with line-height of 1.5. Additionally all paragraphs have a bottom margin of 30px (the default spacing unit).

  <p>...</p>

Headings

All HTML headings are available—running from h1 to h6.

  <h1>Headline 1</h1>
  <h2>Headline 2</h2>
  <h3>Headline 2</h3>
  <h4>Headline 2</h4>
  <h5>Headline 2</h5>
  <h6>Headline 2</h6>

Headings Usage

Heading 1

h1 is a top-level header that should appear only once per page, usually within header area.

Heading 2

h2 can be alternatively used as a top-level page header, optionally outside of header.

Heading 3

h3 is used to denotate sections on a page.

Heading 4, 5, 6

h4, h5, h6 are used for sub-sections on a page.

Text manipulations

Basic HTML inline text manipulations are supported.

  This text snippet will be <strong>bold</strong>
  This text snippet will be <em>emphasized</em>
  This text snippet will be <u>underlined</u>
  This text snippet will be <s>strikedthrough</s>
  This text snippet will be <small>small</small>
  This text snippet will be <sub>subscripted</sub>
  This text snippet will be <sup>superscripted</sup>
  This text snippet will be <abbr title='abrreviation'>abbreviated</abbr>
  This text snippet will be <mark>highlighted</mark>
  This text snippet will be an <code>inline code sample</code>

Blockquotes

To quote an external source use a blockquote element.

If you give a good idea to a mediocre team, they will screw it up. If you give a mediocre idea to a brilliant team, they will either fix it or throw it away and come up with something better.

  <blockquote>
    <p>You are not your idea, and if you identify too closely with your ideas, you will take offense when they are challenged.</p>
  </blockquote>

To add a source of the quote use the footer element.

Failure isn’t a necessary evil. In fact, it isn’t evil at all. It is a necessary consequence of doing something new.

  <blockquote>
    <p>Failure isn’t a necessary evil. In fact, it isn’t evil at all. It is a necessary consequence of doing something new.</p>
    <footer>Ed Catmull in <cite>Creativity, Inc.</cite></footer>
  </blockquote>

To center a blockquote add blockquote-centered class.

Getting the right people and the right chemistry is more important than getting the right idea.

  <blockquote class='blockquote-centered'>
    <p>Getting the right people and the right chemistry is more important than getting the right idea.</p>
  </blockquote>

Blockquotes come with three different font sizes—base, medium and large. Use no class for base appearance.

“I like too many things and get all confused and hung-up running from one falling star to another till I drop. This is the night, what it does to you. I had nothing to offer anybody except my own confusion.”

“War is peace. Freedom is slavery. Ignorance is strength.”

“A strong leader has the humility to listen, the confidence to challenge, and the wisdom to know when to quit arguing and to get on board.”

  <blockquote class='blockquote-medium'>
    <p>“I like too many things and get all confused and hung-up running from one falling star to another till I drop. This is the night, what it does to you. I had nothing to offer anybody except my own confusion.”</p>
  </blockquote>

  <blockquote class='blockquote-large'>
    <p>“War is peace. Freedom is slavery. Ignorance is strength.”</p>
  </blockquote>

  <blockquote class='blockquote-centered blockquote-large'>
    <p>“A strong leader has the humility to listen, the confidence to challenge, and the wisdom to know when to quit arguing and to get on board.”</p>
  </blockquote>

Lists

Both ordered and unordered lists can be customized with list-unstyled class, that will remove the padding as well as individual list item style and list-inline class, that will change the display of list items to inline-block.

Unordered list

An unordered list represents a collection of items that do not have any particular order.

• List element one
• List element two
  • Nested list element one
    • Nested list element one
    • Nested list element two
  • List element two
• List element three
• List element four

  <ul>
    <li>List element one</li>
    <li>List element two
      <ul>
        <li>Nested list element one
          <ul>
            <li>Nested list element one</li>
            <li>Nested list element two</li>
          </ul>
        </li>
        <li>Nested list element two</li>
      </ul>
    </li>
    <li>List element three</li>
    <li>List element four</li>
  </ul>

Ordered list

An ordered list represents a collection of items that do have order and will be displayed with a preceding number.

1. List element one
2. List element two
   1. Nested list element one
   2. Nested list element two
3. List element three
4. List element four

  <ol>
    <li>List element one</li>
    <li>List element two
      <ol>
        <li>Nested list element one</li>
        <li>Nested list element two</li>
      </ol>
    </li>
    <li>List element three</li>
    <li>List element four</li>
  </ol>

Definition list

A definition list consists of pairs of terms and their descriptions.

Definition term

Definition description

  <dl>
    <dt>Definition term</dt>
    <dd>Definition description</dd>
  </dl>

Colors

Colors are available as variables and downloadable Photoshop swatch.

Blues

• $blue-saturated-darker

  hsl(195, 100%, 5%)

  rgb(0, 19, 26)

  #00131a

• $blue-saturated-dark

  hsl(195, 100%, 10%)

  rgb(0, 38, 51)

  #002633

• $blue-saturated

  hsl(195, 100%, 14%)

  rgb(0, 54, 71)

  #003647

• $blue-saturated-light

  hsl(195,46%, 22%)

  rgb(30, 69, 82)

  #1e4552

• $blue-saturated-lighter

  hsl(195,46%, 42%)

  rgb(58, 132, 156)

  #3a849c

• $blue

  hsl(195, 100%, 46%)

  rgb(0, 176, 235)

  #00b0eb

• $blue-light

  hsl(195, 100%, 70%)

  rgb(102, 217, 255)

  #66d9ff

• $blue-lighter

  hsl(195, 100%, 95%)

  rgb(230, 249, 255)

  #e6f9ff

Monochromatic

• $gray-darker

  hsl(194, 7%, 16%)

  rgb(38, 42, 44)

  #262a2c

• $gray-dark

  hsl(194, 5%, 33%)

  rgb(80, 86, 88)

  #505658

• $gray

  hsl(194, 5%, 54%)

  rgb(132, 141, 144)

  #848d90

• $gray-light

  hsl(194, 9%, 82%)

  rgb(205, 211, 213)

  #cdd3d5

• $gray-lighter

  hsl(194,9%, 92%)

  rgb(233, 236, 236)

  #e9ecec

Pinks

• $pink

  hsl(326, 94%, 48%)

  rgb(237, 7, 138)

  #ed078a

• $pink-light

  hsl(344, 97%, 88%)

  rgb(254, 195, 211)

  #fec3d3

• $pink-lighter

  hsl(326, 94%, 96%)

  rgb(254, 235, 246)

  #feebf6

Reds

• $red

  hsl(342, 100%, 45%)

  rgb(230, 0, 69)

  #e60045

• $red-light

  hsl(342, 100%, 89%)

  rgb(255, 199, 216)

  #ffc7d8

• $red-lighter

  hsl(342, 100%, 95%)

  rgb(255, 230, 237)

  #ffe6ed

Oranges

• $orange

  hsl(34, 98%, 48%)

  rgb(242, 138, 2)

  #f28a02

• $orange-light

  hsl(34, 98%, 74%)

  rgb(254, 197, 124)

  #fec57c

• $orange-lighter

  hsl(34, 98%, 92%)

  rgb(255, 237, 215)

  #ffedd7

Greens

• $green

  hsl(142, 47%, 50%)

  rgb(68, 187, 112)

  #44bb70

• $green-light

  hsl(142, 48%, 85%)

  rgb(198, 235, 212)

  #c6ebd4

• $green-lighter

  hsl(142, 48%, 94%)

  rgb(232, 247, 238)

  #e8f7ee

Grid

The starting point to maintaining the document flow is by wrapping the content in a container element that defaults to max-width: 960px.

  <div class='container'>
    <h1>My Website</h1>
    <p>My content.</p>
  </div>

The following responsive breakpoints are defined in the variables file:

  $breakpoint-smartphone   ?= 480px
  $breakpoint-mid-mobile   ?= 600px
  $breakpoint-tablet       ?= 768px
  $breakpoint-desktop      ?= 900px
  $breakpoint-desktop-wide ?= 1200px

Grid is built on top of flexbox. Cells (grid-flex-cell) will have the width of 100% below 481px and automatically calculated width (depending on cell count) above that breakpoint. Grid must be placed within div with container class as described above.

There are several different ways to implement the grid:

Regular column widths, automatically-calculated

The default use of grid is to wrap each row in a separate container div. A row consists of a set of .grid-flex-cell divs wrapped in a .grid-flex-container div. For example, if you place 2 .grid-flex-cell divs within a .grid-flex-container div, it will automatically size 2 columns of equal width. This eliminates the need for any helper classes.

  <div class="grid-flex-container">
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
  </div>
  <div class="grid-flex-container">
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
  </div>
  <div class="grid-flex-container">
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
  </div>

Multiple rows within a single container div

If you'd like to place multiple rows within a single .grid-flex-container div, you will need to make use of helper classes which explicitly define the fractional width of each column. These helper classes are .grid-flex-cell-1of2, .grid-flex-cell-1of3, and .grid-flex-cell-1of4.

  <div class="grid-flex-container">
    <div class="grid-flex-cell-1of2">
      <p>1/2</p>
    </div>
    <div class="grid-flex-cell-1of2">
      <p>1/2</p>
    </div>
    <div class="grid-flex-cell-1of3">
      <p>1/3</p>
    </div>
    <div class="grid-flex-cell-1of3">
      <p>1/3</p>
    </div>
    <div class="grid-flex-cell-1of3">
      <p>1/3</p>
    </div>
    <div class="grid-flex-cell-1of4">
      <p>1/4</p>
    </div>
    <div class="grid-flex-cell-1of4">
      <p>1/4</p>
    </div>
    <div class="grid-flex-cell-1of4">
      <p>1/4</p>
    </div>
    <div class="grid-flex-cell-1of4">
      <p>1/4</p>
    </div>
  </div>

Irregular column widths

The automatically-calculated column widths can be used in conjuction with the helper classes (.grid-flex-cell-1of2, .grid-flex-cell-1of3, and .grid-flex-cell-1of4) to enable a layout with irregular column widths.

  <div class="grid-flex-container">
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
    <div class="grid-flex-cell grid-flex-cell-1of4">
      <p>1/4</p>
    </div>
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
  </div>
  <div class="grid-flex-container">
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
    <div class="grid-flex-cell grid-flex-cell-1of2">
      <p>1/2</p>
    </div>
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
  </div>
  <div class="grid-flex-container">
    <div class="grid-flex-cell grid-flex-cell-1of3">
      <p>1/3</p>
    </div>
    <div class="grid-flex-cell">
      <p>auto</p>
    </div>
  </div>

Centering columns

In cases where you are not using the full width of a column and would like to center the element inside of it use the helper class (.grid-flex-cell-centered).

  <div class="grid-flex-container">
    <div class="grid-flex-cell grid-flex-cell-1of3 grid-flex-cell-centered">
      <p>1/3, centered</p>
    </div>
  </div>
  <div class="grid-flex-container">
    <div class="grid-flex-cell grid-flex-cell-1of3 grid-flex-cell-centered">
      <p>1/3, centered</p>
    </div>
    <div class="grid-flex-cell grid-flex-cell-1of3 grid-flex-cell-centered">
      <p>1/3, centered</p>
    </div>
  </div>

For simple, one-column layout use only container element.

  <div class='container'>
    ...
  </div>

Forms

  <form>
    <fieldset>
      <legend>Comment Form</legend>

      <div class='form-element'>
        <label for='username'>Username</label>
        <input type='text' id='username' placeholder='Your username' class='form-input'>
      </div>

      <div class='form-element'>
        <label for='comment'>Write a comment</label>
        <textarea id='comment' class='form-input' placeholder='This is a sample message'></textarea>
      </div>

      <button type='submit' class='button button-primary'>Send</button>

    </fieldset>
  </form>

Use form-inline class for inline form elements (works on desktop resolutions).

If not using labels in an inline form add form-no-labels to form element.

  <form class='form-inline'>
    <fieldset>
      <div class='form-element'>
        <label for='username'>Username</label>
        <input type='text' id='username' placeholder='Your username' class='form-input'>
      </div>

      <div class='form-element'>
        <label for='password'>Password</label>
        <input type='text' id='password' placeholder='Your password' class='form-input'>
      </div>

      <button type='submit' class='button button-primary'>Send</button>
    </fieldset>
  </form>

Required inputs

To denotate that filling an input is mandatory add required attribute to an input, textarea or select.

  <input type='text' class='form-input form-element' placeholder='This input is required' required>

Disabled inputs

You can disable the following elements input, select, textarea and button by adding the disabled attribute.

  <input type='text' class='form-input' placeholder='This input is disabled' disabled>

Input validity

Use input-invalid and input-valid classes for error and success states respectively.

  <input type='text' value='@anyet' class='form-input form-element input-invalid'>
  <input type='text' value='Philip Roberts' class='form-input form-element input-valid'>

Other form elements

Remember about wrapping both checkboxes and radio buttons in labels with input-radio and input-checkbox class.

  <form>
    <fieldset>
      <input type='file' class='form-input form-element'>

      <label for='checkbox' class='disabled input-checkbox form-element'>
        <input type='checkbox' disabled>
        This is a disabled checkbox
      </label>

      <label for='radio' class='input-radio form-element'>
        <input type='radio'>
        This is a radio button
      </label>

      <select class='form-element'>
        <option>Option one</option>
      </select>

    </fieldset>
  </form>

Progress Bars

Currently progress bars are built as div elements due to still incomplete implementation of progress element. Take note that progress meter is a dummy value that should be adjusted.

Large progress bar

  <div class='progress progress-large progress-success'>
    <span class='meter'></span>
  </div>
  <div class='progress progress-large progress-warning'>
    <span class='meter'></span>
  </div>
  <div class='progress progress-large progress-error'>
    <span class='meter'></span>
  </div>
  <div class='progress progress-large'>
    <span class='meter'></span>
  </div>

Small progress bar

For small bars use progress-small class.

  <div class='progress progress-small'>
    <span class='meter'></span>
  </div>

Rounded progress bar

For rounded bars use progress-rounded class.

  <div class='progress progress-small progress-rounded'>
    <span class='meter'></span>
  </div>

Tables

When using tables remember about appropriate content grouping with thead and tbody.

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Surname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Adam</td>
        <td>Brault</td>
        <td>adam@andyet.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Lynn</td>
        <td>Fisher</td>
        <td>lynn@andyet.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Adam</td>
        <td>Baldwin</td>
        <td>baldwin@andyet.com</td>
      </tr>
    </tbody>
  </table>

Outlined tables

Use table-outlined class for additional border around the table. For hover effects on rows add table-with-hover.

Striped table

For odd striped rows add table-striped class.

Table with error states

To add validation states to table rows use table-cell-success, table-cell-alert and table-cell-error respectively.

Messages

There are four types of messages—default (no class), alert (message-alert), error (message-error) and success (message-success).

  <div class='message'>
    <p>This is a message. <a>This is a link.</a></p>
  </div>

  <div class='message message-error'>
    <p>This is an error. <a>This is a link.</a></p>
  </div>

  <div class='message message-alert'>
    <p>This is an alert. <a>This is a link.</a></p>
  </div>

  <div class='message message-success'>
    <p>This is a success message. <a>This is a link.</a></p>
  </div>

Dismissable messages

Messages that can be dismissed should have message-dismissable class and a link with close class.

  <div class='message message-error message-dismissable'>
    <p>This is an error that can be dismissed.</p>
    <a class='close' title='close'>×</a>
  </div>

  <div class='message message-alert message-dismissable'>
    <p>This is an alert that can be dismissed.</p>
    <a class='close' title='close'>×</a>
  </div>

  <div class='message message-success message-dismissable'>
    <p>This is a success message that can be dismissed.</p>
    <a class='close' title='close'>×</a>
  </div>

Full width messages

Add message-full-width class for message with centered text.

  <div class='message message-success message-dismissable message-full-width'>
    <p>This is a full width success message that can be dismissed.</p>
    <a class='close' title='close'>×</a>
  </div>

Message positioning

Messages can be easily positioned using following classes: message-below and message-above—where these classes denotate position of the message relatively to the element.

  <div class='message message-below'>
    <p>This is a message appearing below an element.</p>
  </div>

  <div class='message message-success message-above'>
    <p>This is a message appearing above an element.</p>
  </div>

Navigation

Top bars

For navigation bars use top-nav class with desired color variation (top-nav-light or top-nav-dark).

  <nav class='top-nav top-nav-light cf' role='navigation'>
    <input id='menu-toggle' class='menu-toggle' type='checkbox'>
    <label for='menu-toggle'>Menu</label>

    <ul class='list-unstyled list-inline cf'>
      <li><a>Link One</a></li>
      <li><a>Link Two</a></li>
      <li><a>Link Three</a></li>
      <li class='has-dropdown'>
        <a class='active'>Link Four</a>
        <div class='icon-arrow-down'></div>
        <ul class='list-unstyled dropdown cf'>
          <li><a>Sublink One</a></li>
          <li><a>Sublink Two</a></li>
          <li><a>Sublink Three</a></li>
          <li><a>Sublink Four</a></li>
          <li><a>Sublink Five</a></li>
          <li><a>Sublink Six</a></li>
        </ul>
      </li>
      <li><a>Link Five</a></li>
    </ul>
  </nav>

Breadcrumbs

For indicating users location in complex sites or applications use breadcrumbs.

  <nav role='navigation'>
    <ul class='list-unstyled list-inline breadcrumbs'>
      <li><a>Page One</a>›</li>
      <li><a>Page Two</a>›</li>
      <li><a class='unavailable-item'>Unavailable Page</a>›</li>
      <li><a class='current-item'>Current Page</a>›</li>
    </ul>
  </nav>

Pagination

To indicate content spanning over multiple pages use pagination element.

  <nav role='navigation'>
    <ul class='list-unstyled list-inline pagination'>
      <li><a><em class='icon-arrow-left'></em></a></li>
      <li><a class='unavailable-item'>1</a></li>
      <li><a class='current-item'>2</a></li>
      <li><a>3</a></li>
      <li><a>4</a></li>
      <li><a>5</a></li>
      <li><a><em class='icon-arrow-right'></em></a></li>
    </ul>
  </nav>

Tabs

For tabbed content make sure to style the content as well.

  <nav role='navigation'>
    <ul class='list-unstyled list-inline tabs'>
      <li><a>Tab One</a></li>
      <li><a class='current-item'>Tab Two</a></li>
      <li><a>Tab Three</a></li>
    </ul>
  </nav>

Side Navigation

For simple navigation on the side use side-nav class.

  <nav role='navigation'>
    <ul class='list-unstyled side-nav'>
      <li><a>Option One</a></li>
      <li><a class='current-item'>Option Two</a></li>
      <li><a>Option Three</a></li>
    <ul>
  </nav>

Extras

You can use dropdowns and arrow elements separately from navigation items too.

  <div class='dropdown-standalone dropdown-outlined'>
    <a class='button-unstyled'>Dropdown</a>
    <span class='icon-arrow-down'></span>
    <ul class='list-unstyled dropdown'>
      <li>Item One</li>
      <li>Item Two</li>
    </ul>
  </div>

  <div class='dropdown-standalone button dropdown-outlined'>
    <a class='button-unstyled'>Button Dropdown</a>
    <span class='icon-arrow-down'></span>
    <ul class='list-unstyled dropdown'>
      <li>Item One</li>
      <li>Item Two</li>
    </ul>
  </div>

  <div class='dropdown-standalone dropdown-coloured'>
    <a class='button-unstyled'>Button Dropdown</a>
    <span class='icon-arrow-down'></span>
    <ul class='list-unstyled dropdown'>
      <li>Item One</li>
      <li>Item Two</li>
    </ul>
  </div>

  <span class='icon-arrow-down'></span>
  <span class='icon-arrow-up'></span>
  <span class='icon-arrow-left'></span>
  <span class='icon-arrow-right'></span>

Modals

Create a basic modal by using modal class and trigger it in JavaScript. All modal types are responsive (not demonstrated in this demo).

  <div class='modal'>
    <div class='modal-head cf'>
      <h3 class='modal-title'>This is a modal</h3>
      <a href='' class='modal-close'>×</a>
    </div>
    <div class='modal-body'>
      <p>This is its body</p>
    </div>
    <div class='modal-footer'>
      <button class='button'>Okay</button>
    </div>
  </div>

Modals with no sectioning

For plain modal with no sectioning use modal-no-sections class and simplified markup.

  <div class='modal modal-no-sections'>
    <p>This is a simple modal.</p>
    <button class='button'>Okay</button>
  </div>

Overlay

For semi-transparent overlay add has-modal class to the body element or a div with overlay class. Overlay appearance is pictured in modal examples above.

Avatars

Avatars come in three sizes—large (100×100) , medium (50×50) and small (25×25). Placeholders thanks to Placehold.it.

Rounded avatars

For rounded avatars use avatar-rounded class.

  <img src='http://placehold.it/200x200?text=100x100' class='avatar avatar-large avatar-rounded' />
  <img src='http://placehold.it/100x100?text=50x50' class='avatar avatar-medium avatar-rounded' />
  <img src='http://placehold.it/50x50?text=25x25' class='avatar avatar-small avatar-rounded' />

Avatars with radius

For avatars with border radius use avatar-radius class.

  <img src='http://placehold.it/200x200?text=100x100' class='avatar avatar-large avatar-radius' />
  <img src='http://placehold.it/100x100?text=50x50' class='avatar avatar-medium avatar-radius' />
  <img src='http://placehold.it/50x50?text=25x25' class='avatar avatar-small avatar-radius' />

Code

Yeti.css includes basic styles for including code snippets in both inline and block manner.

This is an light inline code example. This an dark inline code example.

  <p>This is an <code class='code-light'>light inline code</code> example. This an <code class='code-dark'>dark inline code</code> example.

  <pre>
    <code>
      ...
    </code>
  </pre>

For light and dark themes for syntax coloring refer to &light repository.

Logotypes

For maximum flexibility and responsiveness usage of vector-based logos is advised. All logos are available here in PNG and SVG format, colour and black and white versions.

Base64

To avoid unnecessary HTTP requests use SVGs coverted to Data URI's. There are several ways of embedding:

As a background image:

  .logo-ampersand
    background-image: $logo-ampersand

As an image:

  img(src='data:image/svg+xml;base64,[data]')

As an object:

  object(type='image/svg+xml' data='data:image/svg+xml;base64,[data]')
    fallback

Base64 encoded data can be found in globals/_logos.styl