yeti.css

&yet's lightweight, modular pattern library written in Stylus.

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.

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6
  <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 bold
  • This text snippet will be emphasized
  • This text snippet will be underlined
  • This text snippet will be strikedthrough
  • This text snippet will be small
  • This text snippet will be subscripted
  • This text snippet will be superscripted
  • This text snippet will be abbreviated
  • This text snippet will be highlighted
  • This text snippet will be an inline code sample
  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.

Ed Catmull in Creativity, Inc.
  <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.

  <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

Monochromatic

Pinks

Reds

Oranges

Greens

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.

auto

auto

auto

auto

auto

auto

auto

auto

auto

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

1/2

1/2

1/3

1/3

1/3

1/4

1/4

1/4

1/4

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

auto

1/4

auto

auto

auto

1/2

auto

1/3

auto

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

1/3, centered

1/3, centered

1/3, 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>

Buttons

Use button class for default button appearance with optional button-primary and button-secondary classes for customized color variants. These classes can be applied to either button or a tags.

Button (text link)
  <button class='button'>Button</button>
  <a href="#" class="button">Button (text link)</a>
  <button class='button button-approve'>Approval Button</button>
  <button class='button button-warn'>Warning Button</button>
  <button class='button button-neutral'>Neutral Button</button>
  <button class='button button-outlined-neutral'>Neutral Outlined Button</button>
  <button class='button button-outlined-warn'>Warning Outlined Button</button>
  <button class='button button-outlined-approval'>Approval Outlined Button</button>
  <button class='button button-outlined'>Outlined Button</button>
  <button class='button button-caution'>Caution Button</button>
  <button class='button button-unstyled'>Unstyled Button</button>

Button sizes

Buttons come in three different sizes—large, regular and small. Use button-large, no class and button-small classes respectively.

  <button class='button button-large'>Large Button</button>
  <button class='button'>Regular Button</button>
  <button class='button button-small'>Small Button</button>

Disabled buttons

For disabled (unclickable) apperance use disabled attribute for button elements and button-disabled class for links.

Warning Button (text link)
  <button class='button' disabled>Button</button>
  <button class='button button-approve' disabled>Approval Button</button>
  <a href='#' class='button button-warn button-disabled'>Warning Button (text link)</a>
  <button class='button button-neutral' disabled>Neutral Button</button>
  <button class='button button-outlined' disabled>Outlined Button</button>
  <button class='button button-outlined-neutral' disabled>Neutral Outlined Button</button>
  <button class='button button-outlined-warn' disabled>Warning Outlined Button</button>
  <button class='button button-outlined-approve' disabled>Approval Outlined Button</button>

Button groups

To create a button group place any number of button elements in button-group container.

  <div class="button-group">
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
  </div>

  <div class="button-group">
    <button class="button button-neutral">Button</button>
    <button class="button button-neutral">Button</button>
    <button class="button button-neutral">Button</button>
  </div>

  <div class="button-group">
    <button class="button button-outlined">Button</button>
    <button class="button button-outlined">Button</button>
    <button class="button button-outlined">Button</button>
  </div>

Forms

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

# Name Surname Email
1 Adam Brault adam@andyet.com
2 Lynn Fisher lynn@andyet.com
3 Adam Baldwin baldwin@andyet.com
  <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.

# Name Surname Email
1 Adam Brault adam@andyet.com
2 Lynn Fisher lynn@andyet.com
3 Adam Baldwin baldwin@andyet.com

Striped table

For odd striped rows add table-striped class.

# Name Surname Email
1 Adam Brault adam@andyet.com
2 Lynn Fisher lynn@andyet.com
3 Adam Baldwin baldwin@andyet.com
4 Amy Lynn Taylor amy@andyet.com

Table with error states

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

# Name Surname Email
1 Adam Brault adam@andyet.com
2 Lynn Fisher lynn@andyet.com
3 Adam Baldwin baldwin@andyet.com
4 Amy Lynn Taylor amy@andyet.com

Messages

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

This is a message. This is a link.

This is an error. This is a link.

This is an alert. This is a link.

This is a success message. This is a link.

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

This is an error that can be dismissed.

×

This is an alert that can be dismissed.

×

This is a success message that can be dismissed.

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

This is a full width success message that can be dismissed.

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

This is a message appearing below an element.

This is a message appearing above an 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>

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

Media

Media elements, such as pictures, videos or iframes have a maximum width of 100% so they never overflow the parent container.

Images with captions

For images with a caption use figure and figcaption element.

Image description
  <figure>
    <img src='http://placehold.it/700x300?text=350x300' />
    <figcaption>Image description</figcaption>
  </figure>

Media with an outline

Having an outline around any type of media can be added by using media-outlined class.

  <figure class='media-outlined'>
    <img src='http://placehold.it/700x300?text=350x300' />
  </figure>

Multiple images

Multiple images should be placed in one figure element.

  <figure>
    <img src='http://placehold.it/400x400?text=200x200'/>
    <img src='http://placehold.it/400x400?text=200x200' />
    <img src='http://placehold.it/400x400?text=200x200' />
  </figure>

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