MicroCSS

Typography

Header H1

Header H2

Header H3

Header H4

Header H5
Header H6

Lists

  1. Lorem ipsum
  2. Lorem ipsum
  3. Sublist:
    1. Lorem ipsum
    2. Lorem ipsum
    3. Lorem ipsum
  4. Lorem ipsum

Buttons:

Link 

<button>Button</button>
<a class="button">Primary</a>
<button class="primary">Primary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
<button class="warning">Warning</button>
<button class="info">Info</button>

Alerts:

Primary
Success
Danger
Warning
Info

<div class="alert primary">Primary </div>
<div class="alert success">Success</div>
<div class="alert danger">Danger</div>
<div class="alert warning">Warning</div>
<div class="alert info">Info</div>

Form

Checkbox
Radio Radio 2
Input inside of a row

Grid

The grid uses the flexbox system to make a responsive layout based on 12 columns.
It is very simple. Just add class row to the parent div and col-<size> for the desired grid size 

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
</div>

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-2
col-2
col-2
col-3
col-3
col-3
col-3
col-4
col-4
col-4
col-5
col-5
col-2
col-6
col-6
col-7
col-3
col-2
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1
col-12

Tables:

Normal table
Singer Group
Freddie Mercury Queen
Kurk Cobain Nirvana
John Lennon Beatles
Jon Bon Jovi Bon Jovi
Striped table

Just add class strip to the table

Singer Group
Freddie Mercury Queen
Kurk Cobain Nirvana
John Lennon Beatles
Jon Bon Jovi Bon Jovi

Table Bordered

Just add class bordered to the table

Singer Group
Freddie Mercury Queen
Kurk Cobain Nirvana
John Lennon Beatles
Jon Bon Jovi Bon Jovi

Responsive Tables

You can make your tables responsive. First, add the class responsive and in all <td>, add the properties data-title with data title. Example:

<table class="responsive">
  <thead>
    <tr>
      <th>Singer</th>
      <th>Group</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="Singer">Freddie Mercury</td>
      <td data-title="Group">Queen</td>
    </tr>
    <tr>
     <td data-title="Singer">Kurk Cobain</td>
     <td data-title="Group">Nirvana</td>
    </tr>
    <tr>
      <td data-title="Singer">John Lennon</td>
      <td data-title="Group">Beatles</td>
      </tr>
    <tr>
      <td data-title="Singer">Jon Bon Jovi</td>
      <td data-title="Group">Bon Jovi</td>
    </tr>
  </tbody>
</table>

Reduce the size of the window to view the result

Singer Group
Freddie Mercury Queen
Kurk Cobain Nirvana
John Lennon Beatles
Jon Bon Jovi Bon Jovi

Icons

You can use your favorite font icon. I tested with Google Material Icons, Font Awesome and custom font made with Fontello

Material Icons

<button><i class="material-icons">check</i>check</button>
Text <i class="material-icons">code</i> other text

Text code other text

Font Awesome

<button><i class="fas fa-check"></i>check</button>
Text <i class="fas fa-code"></i> other text

Text other text

Fontello

<button><i class="icon-ok"></i>check</button>
Text <i class="icon-code"></i> other text

Text other text

Responsive Elements

MicroCSS includes rules to make images, videos and audio elements responsive, and one utility to turn iframes responsive, for example, iframes for YouTube video, Google Maps, etc.

Image


YouTube
<div class="resp-iframe">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/UQ3bqYKnyhM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Responsive Google Map
My blog
Video

Navigation

MicroCSS includes some classes to make navigation bars.

Horizontal nav
<div class="navbar">
  <nav>
    <span class="navbar-title">MicroCSS</span>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </nav>
</div>
Vertical Navigation Bar
<div class="navbar">
  <nav>
    <span class="navbar-title navbar-vert">MicroCSS</span>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </nav>
</div>
Fixed
<div class="navbar">
  <nav>
    <span class="navbar-title fixed">MicroCSS</span>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </nav>
</div>

The main menu of these page is an example.

Blockquote

<blockquote>
  This is a blockquote.
</blockquote>
This is a blockquote.

Code

<pre><code>body
{
  font-size: 16px;
  color: #212121;
}</code></pre>

Cards

Card Title

This is a card. 

<div class="card">
  <div class="card-title">Card Title</div>
    <div class="card-body">
      <p>
        This is a card.
      </p>
    </div>
    <div class="card-footer">
      <button>GO</button>
  </div>
</div>

Utilities

MicroCSS includes some functional classes: