Typography

Body copy

The default font-size is 16px with line-height of 1.5. Additionally all paragraphs get 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 is 42px / 38px</h1>
  <h2>Headline 2 is 36px / 32px</h2>
  <h3>Headline 2 is 30px / 32px</h3>
  <h4>Headline 2 is 24px / 20px</h4>
  <h5>Headline 2 is 18px / 16px</h5>
  <h6>Headline 2 is 16px / 14px, uppercased</h6>

Headings Usage

Heading 1

h1 is a top-level header that should appear only once per page, usually within header area. It can be used as a container for logotypes.

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.

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

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

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

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>

Grid

The starting point to maintaining the document flow is by wrapping the content in a container element that adjusts its width according to resolution:

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

The following container widths and breakpoints are defined in the variables file:

  $grid-width-full    ?= 100%
  $grid-width-desktop ?= 70%
  $grid-width-tablet  ?= 85%
  $grid-width-mobile  ?= 90%

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

Instead of relying on calculation of widths depending on number of cells you can use helper fraction classes: grid-flex-cell-1of4, grid-flex-cell-1of3, grid-flex-cell-1of2. The width of other cells will be calculated automatically by the browser.

  <div class='grid-flex-container'>
    <div class='grid-flex-cell'>
      <p>1/2</p>
    </div>
    <div class='grid-flex-cell'>
      <p>1/2</p>
    </div>
  </div>

  <div class='grid-flex-container'>
    <div class='grid-flex-cell'>
      <p>1/3</p>
    </div>
    <div class='grid-flex-cell'>
      <p>1/3</p>
    </div>
    <div class='grid-flex-cell'>
      <p>1/3</p>
    </div>
  </div>

  <div class='grid-flex-container'>
    <div class='grid-flex-cell'>
      <p>1/4</p>
    </div>
    <div class='grid-flex-cell'>
      <p>1/4</p>
    </div>
    <div class='grid-flex-cell'>
      <p>1/4</p>
    </div>
    <div class='grid-flex-cell'>
      <p>1/4</p>
    </div>
  </div>

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

  <div class='grid-flex-container'>
    <div class='grid-flex-cell'>
      <p>auto</p>
    </div>
    <div class='grid-flex-cell grid-flex-cell-1of2'>
      <p>1/2</p>
    </div>
  </div>

  <div class='grid-flex-container'>
    <div class='grid-flex-cell'>
      <p>auto</p>
    </div>
    <div class='grid-flex-cell grid-flex-cell-1of3'>
      <p>1/3</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.net</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Henrik</td>
        <td>Joreteg</td>
        <td>henrik@andyet.net</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Adam</td>
        <td>Baldwin</td>
        <td>baldwin@andyet.net</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, message-above, message-left and message-right—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>

  <div class='message message-error message-left'>
    <p>This is a message appearing on the left hand side of the element.</p>
  </div>

  <div class='message message-alert message-right'>
    <p>This is a message appearing on the right hand side of the 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).

Rounded avatars

For rounded avatars use avatar-rounded class.

  <img src='https://avatars0.githubusercontent.com/u/11524977?v=3&s=300' class='avatar avatar-large avatar-rounded' />
  <img src='https://avatars0.githubusercontent.com/u/11524977?v=3&s=300' class='avatar avatar-medium avatar-rounded' />
  <img src='https://avatars0.githubusercontent.com/u/11524977?v=3&s=300' class='avatar avatar-small avatar-rounded' />

Avatars with radius

For avatars with border radius use avatar-radius class.

  <img src='https://avatars0.githubusercontent.com/u/11524977?v=3&s=300' class='avatar avatar-large avatar-radius' />
  <img src='https://avatars0.githubusercontent.com/u/11524977?v=3&s=300' class='avatar avatar-medium avatar-radius' />
  <img src='https://avatars0.githubusercontent.com/u/11524977?v=3&s=300' 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.

Colors

Colors are available as variables and downloadable Photoshop swatch.

Monochromatic

• $gray-darker
• $gray-dark
• $gray
• $gray-light
• $gray-lighter

Blues

• $blue
• $blue-light
• $blue-lighter

Purple

• $purple
• $purple-light
• $purple-lighter

Pinks

• $pink
• $pink-light
• $pink-lighter

Reds

• $red
• $red-light
• $red-lighter

Oranges

• $orange
• $orange-light
• $orange-lighter

Yellow

• $yellow
• $yellow-light
• $yellow-lighter

Greens

• $green
• $green-light
• $green-lighter

Logotypes

For maximum flexibility and responsiveness usage of vector-based logos is advised. All logos are available here in SVG format, color 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-circle
    background-image: $logo-circle

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