Github

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.3/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-groups responsive by adding the .fluid class
  • Vertically align .input-groups 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
    3. 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