Home
Core Grid Input Control Navigation Table Card Tab Contextual Progress Utility

mini.css

Setup

$ npm install mini.css
$ bower install mini.css

CDN

<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.2.0/dist/mini-default.min.css">

Basic Template

Core

Heading

Heading 1Subheading

Heading 2Subheading

Heading 3Subheading

Heading 4Subheading

Heading 5Subheading
Heading 6Subheading
<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>

Common Paragraph

This is a paragraph with some bold text and some italics text.

This is a link. This is some small text. Subscript Superscript Inline code Keyboard Input 
This is some preformatted text.
This is some quoted text from another website or person. 
<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="www.quotation.source">
This is some quoted text from another website or person.
</blockquote>

List

  • Apple
  • Orange
  • Strawberry
  1. Wake up
  2. Eat breakfast
  3. Go to work
<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>

IMAGE

Image caption

Image elements () are responsive by default

<figure>
    <img src="https://placehold.it/800x600">
    <figcaption>Image caption</figcaption>
</figure>

Grid

Basic layout

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

Screen-specific layouts

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

Predefined layouts

col-sm-6

col-sm-6

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

Column offsets

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

Column reordering

md-Last, lg-Normal
sm-First, md-normal
md-First, lg-Normal
<div class="container sample">
  <div class="row">
    <div class="col-sm col-md-last col-lg-normal">md-Last, lg-Normal</div>
    <div class="col-sm-first col-md-normal">sm-First, md-normal</div>
    <div class="col-sm col-md-first col-lg-normal">md-First, lg-Normal</div>
  </div>
</div>

Media object pattern

image

Media object heading

Media object content...

<div class="row">
    <div class="col-sm-2">
        <img class="section media" src="https://placehold.it/800x600" alt="image">
    </div>
    <div class="col-sm">
        <h2>Media object heading</h2>
        <p>Media object content...</p>
    </div>
</div>

Input Control

Form

Simple form
Responsive form 
<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>
  </fieldset>
</form>

<form>
  <fieldset>
    <legend>Responsive form</legend>
    <div class="row">
      <div class="col-sm-12 col-md-10 col-md-offset-1">
        <label for="username">username</label>
        <input type="email" value="" id="username" placeholder="username">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-10 col-md-offset-1">
        <label for="pwd">password</label>
        <input type="password" value="" id="pwd" placeholder="password">
      </div>
    </div>
  </fieldset>
</form>

Checkboxes & radio buttons

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

Switches


<div class="input-group col-md-6">
    <input type="checkbox" id="switch1">
    <label for="switch1" class="switch">Checkbox switch</label>
</div>
<div class="input-group col-md-6">
    <input type="radio" id="radswitch1" name="radio-group-1" checked="checked">
    <label for="radswitch1" class="switch">Radio sw1</label>
    <br>
    <input type="radio" id="radswitch2" name="radio-group-1">
    <label for="radswitch2" class="switch">Radio sw2</label>
</div>

Button

Link button Link button
Button 
<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 class="primary">Button</button>
  <button>Button</button>
  <a>Button</a>
</div>
<div class="button-group">
  <button>Button</button>
  <input type="reset" class="secondary" value="Secondary button">
  <label class="button inverse">Label button</label>
</div>

File upload buttons

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

Navigation

HEADER

News | Contact 
<header>
  <a href="#" class="logo">Logo</a>
  <button>Home</button>
  <a href="#" class="button">News</a>
  <span>|</span>
  <button>About</button>
  <a href="#" role="button">Contact</a>
</header>

Navigation bar

<nav>
  <a href="#">Home</a>
  <span>News</span>
  <a href="#" class="sublink-1">New Courses</a>
  <a href="#" class="sublink-1">Certifications</a>
  <span class="sublink-1">Events</span>
  <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
  <a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
  <a href="#" class="sublink-1">Policy Update</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Drawer

Top navigation... 
<header class="sticky">
    <label for="drawer-checkbox" class="button drawer-toggle persistent"></label>
    <a href="#" role="button">Home</a>
    <a href="#" role="button">About</a>
    <a href="#" role="button">Contact</a>
</header>

<input type="checkbox" id="drawer-checkbox">
<nav class="drawer persistent">
  <label for="drawer-checkbox" class="close"></label>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</nav>

FOOTER

<footer>
  <p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
</footer>

Table

Table

Medium/Large screen layout

People
Name Surname Alias
Chad Wilberts MrOne
Adam Smith TheSmith
Sophia Canderson Candee

Small screen layout

People
Name Surname Alias
Chad Wilberts MrOne
Adam Smith TheSmith
Sophia Canderson Candee 
<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>

Horizontal tables

People
Name Surname Alias
Chad Wilberts MrOne
Adam Smith TheSmith
Sophia Canderson Candee 
<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>

Table variants & matrices

Star Wars Character Alignment Table
Lawful Neutral Chaotic
Good Yoda Luke Skywalker Chewbacca
Neutral C-3PO Boba Fett Han Solo
Bad Darth Vader Emperor Palpatine Jabba the Hutt
People
aaaaaaaa aaaaaaaa
bbbbbbbbb bbbbbbbbb 
<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>

Card

Card

Card Title

Card content...

Card Title

Card content...

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

Sections & media

Card with image

image

Content

Card with video

Normal section

Double-padded section

Normal section

Dark section

Darker section

<div class="row">
    <div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="https://placehold.it/800x600" alt="image"><div class="section"><p>Content</p></div></div>
    <div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe><div class="section"><h3>Card with video</h3></div></div>
    <div class="card"><div class="section"><h3>Normal section</h3></div><div class="section double-padded"><h3>Double-padded section</h3></div></div>
    <div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div><div class="section darker"><h3>Darker section</h3></div></div>
</div>

Card sizing & fluidity

Small Card

Small cards are 240px wide.

Large Card

Large cards are 480px wide.

Fluid Card

Fluid cards scale their width based on their container. Always wrap them in a column.

<div class="row">
    <div class="card small"><div class="section"><h3>Small Card</h3><p>Small cards are <code>240px</code> wide.</p></div></div>
    <div class="card large"><div class="section"><h3>Large Card</h3><p>Large cards are <code>480px</code> wide.</p></div></div>
    <div class="col-sm-12 col-md-12 col-lg">
      <div class="card fluid" style="margin: 2px 10px 20px;"><div class="section"><h3>Fluid Card</h3><p>Fluid cards scale their width based on their container. Always wrap them in a column.</p></div></div>
    </div>
</div>

Card color variants

Warning

Error

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

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

Tab

Basic syntax

Tab 1

This is the first tab's content.

Tab 2

This is the second tab's content.

Tab 3

This is the third tab's content.

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

Stack Tabs

Section 1

This is the first accordion section's content.

Section 2

This is the second accordion section's content.

This is the first collapse section's content.

This is the second collapse section's content.

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

Contextual

Text highlighting

primary secondary tertiary long highlight text... tag 
<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>

Toasts

This is a normal toast message!
This is a large toast message!
This is a small toast message!
<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>

Tooltips

Hover over this text to see a tooltip! Hover over this text to see a reverse tooltip! 
<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>

Progress

Basic progress bar

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

Progress bar variants

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

Donut spinner

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

Donut spinner variants

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

Utility

Visibility helpers

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

Generic borders & shadow

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

Responsive sizing & spacing classes

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

Responsive visibility helpers

Hidden in medium-sized screens Visually hidden in medium-sized screens 
<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>

Breadcrumbs

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

Close icon

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