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>
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>
h1
is a top-level header that should appear only once per page, usually within header
area.h2
can be alternatively used as a top-level page header, optionally outside of header
.h3
is used to denotate sections on a page.h4
, h5
, h6
are used for sub-sections on a page.Basic HTML inline text manipulations are supported.
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>
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>
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
.
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>
An ordered list represents a collection of items that do have order and will be displayed with a preceding number.
<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>
A definition list consists of pairs of terms and their descriptions.
<dl>
<dt>Definition term</dt>
<dd>Definition description</dd>
</dl>
Colors are available as variables and downloadable Photoshop swatch.
$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
$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
$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
$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
$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
$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
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:
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>
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>
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>
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>
<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>
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>
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>
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'>
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>
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.
<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>
For small bars use progress-small
class.
<div class='progress progress-small'>
<span class='meter'></span>
</div>
For rounded bars use progress-rounded
class.
<div class='progress progress-small progress-rounded'>
<span class='meter'></span>
</div>
When using tables remember about appropriate content grouping with thead
and tbody
.
# | Name | Surname | |
---|---|---|---|
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>
Use table-outlined
class for additional border around the table
. For hover effects on rows add table-with-hover
.
# | Name | Surname | |
---|---|---|---|
1 | Adam | Brault | adam@andyet.com |
2 | Lynn | Fisher | lynn@andyet.com |
3 | Adam | Baldwin | baldwin@andyet.com |
For odd striped rows add table-striped
class.
# | Name | Surname | |
---|---|---|---|
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 |
To add validation states to table rows use table-cell-success
, table-cell-alert
and table-cell-error
respectively.
# | Name | Surname | |
---|---|---|---|
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 |
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>
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>
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>
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>
Create a basic modal by using modal
class and trigger it in JavaScript. All modal types are responsive (not demonstrated in this demo).
This is its body.
<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>
For plain modal with no sectioning use modal-no-sections
class and simplified markup.
This is a simple modal.
<div class='modal modal-no-sections'>
<p>This is a simple modal.</p>
<button class='button'>Okay</button>
</div>
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 come in three sizes—large (100×100
) , medium (50×50
) and small (25×25
). Placeholders thanks to Placehold.it.
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' />
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 elements, such as pictures, videos or iframes have a maximum width of 100%
so they never overflow the parent container.
For images with a caption use figure
and figcaption
element.
<figure>
<img src='http://placehold.it/700x300?text=350x300' />
<figcaption>Image description</figcaption>
</figure>
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 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>
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.
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.
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