Introduction Modules Flavors Customization Github

mini.css

v2.0

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 toolkit 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 and usage

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

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

If you want to download the package using your favorite package manager, you can use either Bower or NPM:

bower install mini.css
npm install mini.css

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 is 16px for the root element
  • 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>

<img src="...">

Grid

Basic layout  View on Codepen


              

              

                
    
                  
  • 
                

              

            

            

              

                
Screen-specific layouts  View on Codepen

                

              

              

                
    
                  
  • 
                

              

            

            

              

                
Column offsets  View on Codepen

                

              

              

                
    
                  
  • 
                

              

            

            

              

                
Column reordering  View on Codepen

                

              

              

                
    
                  
  •