# Quick Reference

If you are familiar with mini.css and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the modules page.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

## Setup & usage

You can download mini.css using npm, yarn or Bower:

    npm install mini.css

    yarn add mini.css

    bower install mini.css

You can import the default flavor of mini.css in your webpage by simply adding one of the following references inside your HTML page's `<head>` tag:

    <link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css">

    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css">

You can also find mini.css on cdnjs, which you can use to include it in your projects.

We strongly suggest you add the following line inside your HTML page's `<head>` to utilize the viewport meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1">

## Core

### Headings View on Codepen

    <h1>Heading 1<small>Subheading</small></h1>
    <h2>Heading 2<small>Subheading</small></h2>
    <h3>Heading 3<small>Subheading</small></h3>
    <h4>Heading 4<small>Subheading</small></h4>
    <h5>Heading 5<small>Subheading</small></h5>
    <h6>Heading 6<small>Subheading</small></h6>

### Typography

- Basic reset and fix rules applied, based on Normalize.css v5.0.0
- A native font stack is used
- The colors are set to `background: #f5f5f5;` and `color: #212121;`
- The `font-size` for the root element is `16px`
- The `line-height` is `1.5`
- All HTML headings are pre-styled
- Styling provided for `<small>` elements inside headings
- Common HTML elements like paragraphs, horizontal rules, lists and code elements are pre-styled
- Images are responsive by default

### Common textual elements View on Codepen

    <p>This is a paragraph with some <strong>bold text</strong> and some <em>italics text</em>.</p>
    <a href="#">This is a link.</a>
    <small>This is some small text.</small>
    <sub>Subscript</sub>
    <sup>Superscript</sup>
    <code>Inline code</code>
    <kbd>Keyboard Input</kbd>
    <hr>
    <pre>This is some preformatted text.</pre>
    <blockquote cite="Quotation source">
      This is some quoted text from another website or person.
    </blockquote>

### Lists & images View on Codepen

    <ul>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
    </ul>

    <ol>
      <li>Wake up</li>
      <li>Eat breakfast</li>
      <li>Go to work</li>
    </ol>

    <figure>
      <img src="...">
      <figcaption>Image caption</figcaption>
    </figure>

## Grid

### Basic layout View on Codepen

    <div class="container">
      <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-11">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-2">
        </div>
        <div class="col-sm-10">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
        </div>
        <div class="col-sm-9">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
        </div>
        <div class="col-sm-8">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-5">
        </div>
        <div class="col-sm-7">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
        </div>
      <div class="row">
        <div class="col-sm">
        </div>
        <div class="col-sm">
        </div>
      </div>
    </div>

### Notes

- Based on the Flexbox Layout Module
- Grid structured as follows:
  1. `.container` serves as the grid system's wrapper
  2. Multiple `.row` elements serve as the grid system's rows
  3. Multiple `.col-SCR_SZ` and/or `.col-SCR_SZ-COL_WD` elements specify serve as the grid system's columns (fluid and preset respectively)
- `SCR_SZ` values:
  - `sm` for screens below `768px` wide
  - `md` for screens between `768px`(inclusive) and `1280px`(exclusive)
  - `lg` for screens wider than `1280px`
- `COL_WD` can be any integer value between `1` and `12` (both inclusive)
- Fluid columns can create irregularly-sized columns in a layout
- You can nest rows inside columns, but not columns inside columns or rows inside rows
- An element can be a row and column at the same time
- You can mix preset and fluid columns
- Always wrap content in columns, never leave content unwrapped inside a row
- Do not mix rows or columns with unwrapped content on the same level

### Screen-specific layouts View on Codepen

    <div class="container">
      <div class="row">
        <div class="col-sm">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 col-md-3 col-lg-2">
        </div>
        <div class="col-sm-12 col-md-5 col-lg-7">
        </div>
        <div class="col-sm-12 col-md-4 col-lg-3">
        </div>
      </div>
      <div class="row">
        <div class="col-sm">
        </div>
      </div>
    </div>

### Notes

- Apply multiple column classes to the same element, one for each screen size, to define different layouts
- Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified
- Try to make page content vertical for smaller devices, using `.col-sm-12` and transition to two or three columns on larger screen sizes
- Combine with offsets and reordering as shown below
- You can omit the style of a screen size if it is the same one as the one applied in the immediately smaller screen size
- Always start with a `.col-sm` or `.col-sm-COL_WD` style, otherwise smaller devices will not display your content properly

### Predefined layouts View on Codepen

    <div class="row cols-sm-6">
      <div>
        <p>col-sm-6</p>
      </div>
      <div>
        <p>col-sm-6</p>
      </div>
    </div>

### Notes

- Available both as fluid column layouts, using `.cols-SCR_SZ`, replacing `SCR_SZ` with one of the available screen size names and fixed width column layouts, using `.col-SCR_SZ-COL_WD`, replacing `SCR_SZ` with one of the available screen size names and `COL_WD` with a number from `1` to `12` specifying the width of the columns
- Can define screen-specific predefined layouts
- Can be combined with offsets and reordering, but not normal grid layout classes

### Column offsets View on Codepen

    <div class="container">
      <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        </div>
      </div>
      <div class="row">
        <div class="col-sm col-sm-offset-2">
        </div>
      </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
        </div>
    </div>
      <div class="row">
        <div class="col-sm-8 col-sm-offset-4">
        </div>
      <div class="row">
        <div class="col-sm-5 col-sm-offset-1">
        </div>
        <div class="col-sm-5 col-sm-offset-1">
        </div>
      </div>
    </div>

### Notes

- Create offsets using the `.col-SCR_SZ-offset-COL_WD` classes
- `COL_WD` can be any integer from `0` to `11` (both inclusive)
- You can mix offset columns and non-offset columns
- Specify offsets in combination with existing column styling, not instead
- Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified
- You can omit offsets whenever not needed, but you will have to override existing offsets for larger screen sizes, using `.col-SCR_SZ-offset-0`

### Column reordering View on Codepen

    <div class="container">
      <div class="row">
        <div class="col-sm col-md-last col-lg-normal">
        </div>
        <div class="col-sm-first col-md-normal">
        </div>
        <div class="col-sm col-md-first col-lg-normal">
        </div>
      </div>
    </div>

### Notes

- Create reorders using `.col-SCR_SZ-first`, `.col-SCR_SZ-last` and `.col-SCR_SZ-normal` classes for first, last and normal ordering respectively
- Default ordering is based on order of appearance
- Specify reorders in combination with existing column styling, not instead
- Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified
- You can use multiple `.col-SCR_SZ-first` and `.col-SCR_SZ-last` elements to group your elements according to the desired layout
- You can omit reorders whenever not needed, but you will have to override existing reorders for larger screen sizes, using `.col-SCR_SZ-normal`

### Media object pattern View on Codepen

    <div class="row">
      <div class="col-sm-1">
        <img src="...">
      </div>
      <div class="col-sm">
        <h2>Media object heading</h2>
        <p>Media object content...</p>
      </div>
    </div>

### Notes

- Not a new component, rather a popular pattern
- Use two columns, one for the media (i.e. `<img>`) and one for the textual content
- Compatible with most elements
- Can use screen-specific layouts, reordering and offsets
- Media objects can easily be nested inside each other

## Input Control

### Forms & input View on Codepen

    <form>
      <fieldset>
        <legend>Simple form</legend>
        <div class="input-group fluid">
          <label for="username">Username</label>
          <input type="email" value="" id="username" placeholder="username">
        </div>
        <div class="input-group fluid">
          <label for="pwd">Password</label>
          <input type="password" value="" id="pwd" placeholder="password">
        </div>
        <div class="input-group vertical">
          <label for="nmbr">Number</label>
          <input type="number" id="nmbr" value="5">
        </div>
      </fieldset>
    </form>

### Notes

- Link `<label>` elements to their respective `<input>` elements for ease-of-use
- Use of the `<fieldset>` and `<legend>` elements is highly recommended
- Forms are inline by default, use `.input-group` to align elements inside them
- Non-standard input types are not stylized like the rest
- Checkboxes and radio buttons are stylized differently, as shown below
- You can use the grid module's column classes to align form elements or make them responsive
- Avoid using `.input-group` in aligned forms
- Make `.input-group`s responsive by adding the `.fluid` class
- Vertically align `.input-group`s using the `.vertical` class

### Checkboxes & radio buttons View on Codepen

    <div class="input-group">
      <input type="checkbox" id="check1" tabindex="0">
      <label for="check1">Checkbox</label>
    </div>

    <div class="input-group">
      <input type="radio" id="rad1" tabindex="0" name="radio-group-1">
      <label for="rad1">Radio</label>
    </div>

### Notes

- Pre-styled using the checkbox hack, fully accessible
- Create a `<div class="input-group">` containing the checkbox or radio button along with its linked label
- Add `tabindex="0"` to the `<input>` element to make full accessible
- Add multiple radio buttons in the same group inside the same `.input-group` wrapper
- Always use `.input-group` and follow the code structure provided in the examples
- Remember to use `<label>` elements for every single one of your checkbox or radio buttons

### Switches View on Codepen

    <div class="input-group">
      <input type="checkbox" id="switch1" tabindex="0">
      <label for="switch1" class="switch">Checkbox switch</label>
    </div>

    <div class="input-group">
      <input type="radio" id="radswitch1" tabindex="0" name="radio-group-1">
      <label for="radswitch1" class="switch">Radio switch</label>
    </div>

### Notes

- Use the same structure as checkboxes and radios, add `.switch` to the `<label>` element
- Add `tabindex="0"` to the `<input>` element for accessibility
- You can add two `<label>` elements inside the `.input-group`, the first one containing the text and the second one the `.switch` component to reverse the switch's layout

### Buttons & button groups View on Codepen

    <button>Default button</button>
    <input type="button" class="primary" value="Primary button">
    <input type="reset" class="secondary" value="Secondary button">
    <input type="submit" class="tertiary" value="Tertiary button">
    <button class="inverse">Inverse button</button>
    <button class="small">Small button</button>
    <button class="large">Large button</button>
    <button disabled>Disabled button</button>
    <a href="#" class="button">Link button</a>
    <a href="#" role="button">Link button</a>
    <label class="button">Label button</label>
    <label role="button">Label button</label>

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

### Notes

- All button types have been stylized
- Button styles are available for other elements, using the `.button` class or the `role="button"` attribute
- `.primary`, `.secondary`, `.tertiary` and `.inverse` color variants
- `.small` and `.large` size variants
- Create responsive button groups by wrapping multiple button elements inside a `.button-group` wrapper
- Button groups are responsive, but might be displayed incorrectly in older browsers
- Mix size and color variants, don't mix two variants of the same type
- Avoid using different size variants inside a `.button-group`

### File upload buttons View on Codepen

    <input type="file" id="file-input">
    <label for="file-input" class="button">Upload file...</label>

### Notes

- Link an `<input type="file">` element to a `<label>`
- The file button will not change text when uploading a file, Javascript may be required
- Compatible with `.input-group`

## Table

### Basic syntax & responsiveness View on Codepen

    <table>
      <caption>People</caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Surname</th>
          <th>Alias</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Name">Chad</td>
          <td data-label="Surname">Wilberts</td>
          <td data-label="Alias">MrOne</td>
        </tr>
        <tr>
          <td data-label="Name">Adam</td>
          <td data-label="Surname">Smith</td>
          <td data-label="Alias">TheSmith</td>
        </tr>
        <tr>
          <td data-label="Name">Sophia</td>
          <td data-label="Surname">Canderson</td>
          <td data-label="Alias">Candee</td>
        </tr>
      </tbody>
    </table>

### Notes

- Table structure is as follows:
  1. `<table>` element is the table's root element
  2. `<caption>` (optional) serves as the table's title and must be the first element inside the table
  3. `<thead>` serves as the table's header row, populated with `<th>`
  4. `<tfoot>` (optional) serves as the table's footer and must be immediately after `<thead>`
  5. `<tbody>` is the table's body, populated with `<td>` elements
- Tables are responsive and collapse into cards on mobile devices
- Always specify a `data-label` for each `<td>` element corresponding to the column's header to properly display table on mobile devices
- Avoid having multiline `<thead>` elements, however if you need to, you can use this fix
- For horizontal tables or matrices, check the examples below

### Scrollable tables View on Codepen

    <table class="scrollable">
      <caption>People</caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Surname</th>
          <th>Alias</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Name">Chad</td>
          <td data-label="Surname">Wilberts</td>
          <td data-label="Alias">MrOne</td>
        </tr>
        <tr>
          <td data-label="Name">Adam</td>
          <td data-label="Surname">Smith</td>
          <td data-label="Alias">TheSmith</td>
        </tr>
        <tr>
          <td data-label="Name">Sophia</td>
          <td data-label="Surname">Canderson</td>
          <td data-label="Alias">Candee</td>
        </tr>
      </tbody>
    </table>

### Notes

- Use the `.scrollable` class to make a `<table>` scrollable
- Does not support the `<tfoot>` element
- Scrollable tables might not be fully compatible with older browsers

### Horizontal tables View on Codepen

    <table class="horizontal">
      <caption>People</caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Surname</th>
          <th>Alias</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Name">Chad</td>
          <td data-label="Surname">Wilberts</td>
          <td data-label="Alias">MrOne</td>
        </tr>
        <tr>
          <td data-label="Name">Adam</td>
          <td data-label="Surname">Smith</td>
          <td data-label="Alias">TheSmith</td>
        </tr>
        <tr>
          <td data-label="Name">Sophia</td>
          <td data-label="Surname">Canderson</td>
          <td data-label="Alias">Candee</td>
        </tr>
      </tbody>
    </table>

### Notes

- Use the `.horizontal` class to make a `<table>` horizontal
- Does not support the `<tfoot>` element
- Horizontal tables might not be fully compatible with older browsers

### Table variants & matrices View on Codepen

    <table class="preset">
      <caption>Star Wars Character Alignment Table</caption>
      <tbody>
        <tr>
          <th></th>
          <th>Lawful</td>
          <th>Neutral</td>
          <th>Chaotic</td>
        </tr>
        <tr>
          <th>Good</th>
          <td>Yoda</td>
          <td>Luke Skywalker</td>
          <td>Chewbacca</td>
        </tr>
        <tr>
          <th>Neutral</th>
          <td>C-3PO</td>
          <td>Boba Fett</td>
          <td>Han Solo</td>
        </tr>
        <tr>
          <th>Bad</th>
          <td>Darth Vader</td>
          <td>Emperor Palpatine</td>
          <td>Jabba the Hutt</td>
        </tr>
      </tbody>
    </table>

    <table class="striped">
      <caption>People</caption>
      <thead>
        <!-- ... -->
      </thead>
      <tbody>
        <!-- ... -->
      </tbody>
    </table>

### Notes

- Use the `.striped` class to make a `<table>` striped
- Use the `.preset` class to make a `<table>` to create matrices or otherwise preset tables
- Preset matrix tables might require some CSS tweaks to deal with border styling errors
- You can combine `.striped`, `.preset` and `.horizontal`, respecting the rules of the combined structures

## Card

### Basic syntax View on Codepen

    <div class="row">
      <div class="card">
        <div class="section">
          <h3>Card Title</h3>
          <p>Card content...</p>
        </div>
      </div>
      <div class="card">
        <div class="section">
          <h3>Card Title</h3>
          <p>Card content...</p>
        </div>
      </div>
    </div>

### Notes

- Requires familiarity with the grid module
- Card structure as follows:
  1. `.row` element is the outermost wrapper of the cards layout
  2. `<div class="card">` elements are the cards
  3. `.section` elements inside the `.card` serve as the card's sections
- Cards are responsive, might be incompatible with older browsers
- A card can have as many sections as needed, sections can be almost any element
- Wrap all card content in `.section` classes
- Add multiple `.card` elements in the same `.row`
- Cards cannot be rows or columns at the same time, sections can be rows

### Sections & media View on Codepen

    <div class="card">
      <img src="..." class="section media">
      <div class="section double-padded"><p>Content</p></div>
      <div class="section dark"><p>Content</p></div>
      <div class="section darker"><p>Content</p></div>
    </div>

### Notes

- Create media sections for images or video, using the `.media` class
- Color variants for sections are available using the `.dark` and `.darker` classes
- Extra padding section variant available using the `.double-padded` class
- `.media` sections might not be fully supported in older browsers
- `.media` sections have a preset height of `200px`

### Card sizing & fluidity View on Codepen

    <div class="card small">
      <div class="section">
        <p>Content</p>
      </div>
    </div>

    <div class="card large">
      <div class="section">
        <p>Content</p>
      </div>
    </div>

    <div class="col-sm-12">
      <div class="card fluid">
        <div class="section">
          <p>Content</p>
        </div>
      </div>
    </div>

### Notes

- Card size variants available using the `.large` and `.small` classes
- Fluid cards available using the `.fluid` class, require the use of grid columns
- Fluid cards might not display properly in older browsers and will sometimes slightly disrespect margins on certain layouts
- Always wrap `.fluid` cards in columns, don't mix with non-fluid cards

### Card color variants View on Codepen

    <div class="card warning">
      <div class="section">
        <p>Warning</p>
      </div>
    </div>

    <div class="card error">
      <div class="section">
        <p>Error</p>
      </div>
    </div>

### Notes

- Create yellow warning cards, using the `.warning` class
- Create red error cards, using `.error` class
- Avoid combining two or more card color variants

## Tab

### Basic syntax View on Codepen

    <div class="tabs">
      <input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
      <label for="tab1" aria-hidden="true">Tab 1</label>
      <div>
        <h3>Tab 1</h3>
        <p>This is the first tab's content.</p>
      </div>
      <input type="radio" name="tab-group" id="tab2" aria-hidden="true">
      <label for="tab2" aria-hidden="true">Tab 2</label>
      <div>
        <h3>Tab 2</h3>
        <p>This is the second tab's content.</p>
      </div>
      <input type="radio" name="tab-group" id="tab3" aria-hidden="true">
      <label for="tab3" aria-hidden="true">Tab 3</label>
      <div>
        <h3>Tab 3</h3>
        <p>This is the third tab's content.</p>
      </div>
    </div>

### Notes

- Tabs structure as follows:
  1. `.tabs` element is the outermost wrapper of the tabbed layout
  2. Multiple `<input type="radio">` elements followed by their linked `<label>` elements are the titles of tabs
  4. Multiple `<div>` elements, each one after the `<label>` of the tab it corresponds to, as the content of each tab
- Tabs are responsive, might be incompatible with some older browsers
- Make a radio button `checked` to select the tab open by default
- Use `aria-hidden="true"` to input elements to add accessibility
- Use the syntax exactly as presented in the examples, do not substitute with checkboxes

### Stacked tabs View on Codepen

    <div class="tabs stacked">
      <input type="radio" name="accordion" id="a1" checked aria-hidden="true">
      <label for="a1" aria-hidden="true">Accordion section 1</label>
      <div>
        <h3>Section 1</h3>
        <p>This is the first accordion section's content.</p>
      </div>
      <input type="radio" name="accordion" id="a2"aria-hidden="true">
      <label for="a2" aria-hidden="true">Accordion section 2</label>
      <div>
        <h3>Section 2</h3>
        <p>This is the second accordion section's content.</p>
      </div>
    </div>

    <div class="tabs stacked">
      <input type="checkbox" id="c1" aria-hidden="true">
      <label for="c1" aria-hidden="true">Collapse section 1</label>
      <div>
        <p>This is the first collapse section's content.</p>
      </div>
      <input type="checkbox" id="c2" aria-hidden="true">
      <label for="c2" aria-hidden="true">Collapse section 2</label>
      <div>
        <p>This is the second collapse section's content.</p>
      </div>
    </div>

### Notes

- Use the `.stacked` class to create stacked tabs
- Use `aria-hidden="true"` to input elements in order to add accessibility
- Use either checkboxes or radio buttons as the `<input>` elements of stacked tabs
- Use single checkbox in a `.stacked` tabs container, but not a single radio button

## Contextual

### Text highlighting View on Codepen

    <mark>primary</mark>
    <mark class="secondary">secondary</mark>
    <mark class="tertiary">tertiary</mark>
    <mark class="inline-block">long highlight text...</mark>
    <mark class="tag">tag</mark>

### Notes

- Use the `<mark>` element for highlighting text
- `.secondary` and `.tertiary` classes offer color variants
- Highlighted text is inline by default, use the `.inline-block` class for longer text highlights
- Use the `.tag` class for highlighted tags
- Combine color variants with the `.inline-block` or `.tag` class, do not combine color variants or `.tag` and `.inline-block` with each other
- Do not nest `<mark>` elements, unless the outer element is an `.inline-block`

### Toasts View on Codepen

    <span class="toast">This is a normal toast message!</span>
    <span class="toast small">This is a large toast message!</span>
    <span class="toast large">This is a small toast message!</span>

### Notes

- Use the `.toast` class on `<span>` elements to create toast messages
- Size variants available using the `.small` and `.large` classes
- Toasts have no pre-defined behavior, use Javascript
- Toasts display at the bottom of the screen on top of everything else

### Tooltips View on Codepen

    <span class="tooltip" aria-label="This is a tooltip">Hover over this text to see a tooltip!</span>
    <span class="tooltip bottom" aria-label="This is a tooltip">Hover over this text to see a reverse tooltip!</span>

### Notes

- Create using the `.tooltip` class
- Put tooltip text in the `aria-label` attribute's value
- Use the `.bottom` class to make a tooltip display at the bottom of its context

### Modals View on Codepen

    <label for="modal-toggle">Show modal</label>

    <input id="modal-toggle" type="checkbox"/>
    <div class="modal">
      <div class="card">
        <label for="modal-toggle" class="close"></label>
        <h3 class="section">Modal</h3>
        <p class="section">This is a modal window!</p>
      </div>
    </div>

### Notes

- Create an `<input type="checkbox">` element, immediately followed by a `<div>` element with the `.modal` class
- Use a `.card` inside the `.modal` to display contents
- Remember to use a `<label>` or some Javascript to allow users to close the dialog
- Modal dialogs can be placed and toggled from anywhere, although the structure must be kept intact
- Use `role="dialog"` to add accessibility to modal dialogs

## Progress

### Basic progress bar View on Codepen

    <progress value="0" max="1000"></progress>
    <progress value="450" max="1000"></progress>
    <progress value="1000" max="1000"></progress>

### Notes

- Use the `<progress>` element to create progress bars
- Set `max="1000"` and a `value` between `0` and `1000`
- Do not use floating point values for the progress bar

### Progress bar variants View on Codepen

    <progress class="secondary" value="600" max="1000"></progress>
    <progress class="tertiary" value="300" max="1000"></progress>
    <progress class="inline" value="150" max="1000"></progress>

### Notes

- Color variants available using the `.secondary` and `.tertiary` classes
- Inline variant available using the `.inline` class
- Mix color and size variants, but not multiple of the same type

### Donut spinner View on Codepen

    <div class="spinner-donut"></div>

### Notes

- Use the `.spinner-donut` class to create donut spinners
- Apply class to a `<div>` or `<span>` element
- Do not insert text inside the `.spinner-donut` element
- Donut spinners can be displayed inline
- Use the `role="progressbar"` attribute to make donut spinner accessible

### Donut spinner variants View on Codepen

    <div class="spinner-donut secondary"></div>
    <div class="spinner-donut tertiary"></div>
    <div class="spinner-donut large"></div>

### Notes

- Color variants available using the `.secondary` and `.tertiary` classes
- Alternate size available using the `.large` class
- You can mix color variants with the `.large` class, but not with each other

## Utility

### Visibility helpers View on Codepen

    <span class="hidden">Hidden text</span>
    <span class="visually-hidden">Screen-reader-only text</span>

### Notes

- Use `.hidden` to hide elements
- Use `.visually-hidden` to show elements only in screen readers
- Both classes use `!important` declarations
- Do not use both classes together

### Generic borders & shadows View on Codepen

    <span class="bordered">Bordered</span>
    <span class="rounded">Rounded</span>
    <span class="circular">Circular</span>
    <span class="shadowed">Casts shadow</span>

### Notes

- Create generic borders using `.bordered`
- Rounded and circular border radii available using `.rounded` and `.circular` classes
- Generic shadows available using the `.shadowed` class
- Combine generic borders, border radii and generic shadows with each other but not with themselves
- All classes use `!important` declarations
- Generic borders work well with buttons

### Responsive sizing & spacing classes View on Codepen

    <div class="responsive-padding">Responsive padding</div>
    <div class="responsive-margin">Responsive margin</div>

### Notes

- Use the `.responsive-padding` and `.responsive-margin` classes to apply responsive padding or margin respectively to any element
- The two classes can be combined
- Both classes use `!important` declarations

### Responsive visibility helpers View on Codepen

    <span class="hidden-sm">Hidden in smaller screens</span>
    <span class="hidden-md">Hidden in medium-sized screens</span>
    <span class="hidden-lg">Hidden in larger screens</span>

    <span class="visually-hidden-sm">Visually hidden in smaller screens</span>
    <span class="visually-hidden-md">Visually hidden in medium-sized screens</span>
    <span class="visually-hidden-lg">Visually hidden in larger screens</span>

### Notes

- Use the `.hidden-SCR_SZ` or `.visually-hidden-SCR_SZ` syntax, replacing `SCR_SZ` with one of the available screen size names
- `SCR_SZ` values:
  - `sm` for screens below `768px` wide
  - `md` for screens between `768px`(inclusive) and `1280px`(exclusive)
  - `lg` for screens wider than `1280px`
- Responsive visibility helper classes can be combined for different screen sizes, avoid using both for the same size
- Responsive visibility helper classes use `!important` declarations

### Breadcrumbs View on Codepen

    <ul class="breadcrumbs">
      <li><a href="#">Root</a></li>
      <li><a href="#">Folder</a></li>
      <li>File</li>
    </ul>

### Notes

- To create breadcrumbs, create a `<ul>` element implementing the `.breadcrumbs` class
- Do not use `<ol>` for breadcrumbs
- Do not nest lists inside the `.breadcrumbs`
- Use the `role="navigation"` attribute to make breadcrumbs accessible

### Close icon View on Codepen

    <span class="close"></span>

### Notes

- Use the `.close` class to create a close icon
- Use a `<span>` or `<div>` element to create a close icon
- Use a button element implementing the `.close` class to stylize the close icon as a button