Mini CSS Framework


Headings

Heading Example
<h1></h1>

Heading h1

<h2></h2>

Heading h2

<h3></h3>

Heading h3

<h4></h4>

Heading h4

<h5></h5>

Heading h5

<h6></h6>

Heading h6

<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>

<!-- or -->

<p class="h1">Heading h1</p>
<p class="h2">Heading h2</p>
<p class="h3">Heading h3</p>
<p class="h4">Heading h4</p>
<p class="h5">Heading h5</p>
<p class="h6">Heading h6</p>

Paragraphs

Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nunc eget.

Lorem ipsum dolor sit amet, consectetur Nunc eget.

Lorem ipsum dolor sit amet, consectetur Nunc eget.

Lorem ipsum dolor sit amet, consectetur Nunc eget.

Lorem ipsum dolor sit amet, consectetur Nunc eget.

Lorem ipsum dolor sit amet, consectetur Nunc eget.

Lorem ipsum dolor sit amet, consectetur Nunc eget.

Lorem ipsum dolor sit amet, consectetur Nunc eget.

<p>Lorem ipsum dolor sit amet, consectetur <mark>adipiscing elit.</mark> Nunc eget.</p>
<p><del>Lorem ipsum dolor sit amet, consectetur Nunc eget.</del></p>
<p><s>Lorem ipsum dolor sit amet, consectetur Nunc eget.</s></p>
<p><ins>Lorem ipsum dolor sit amet, consectetur Nunc eget.</ins></p>
<p><u>Lorem ipsum dolor sit amet, consectetur Nunc eget.</u></p>
<p><small>Lorem ipsum dolor sit amet, consectetur Nunc eget.</small></p>
<p><strong>Lorem ipsum dolor sit amet, consectetur Nunc eget.</strong></p>
<p><em>Lorem ipsum dolor sit amet, consectetur Nunc eget.</em></p>

Lists

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Nullam tempus enim ac eleifend sollicitudin.
  3. Aenean sed ex non quam tincidunt ullamcorper quis et metus.
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nullam tempus enim ac eleifend sollicitudin.</li>
<li>Aenean sed ex non quam tincidunt ullamcorper quis et metus.</li>
</ul>

<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nullam tempus enim ac eleifend sollicitudin.</li>
<li>Aenean sed ex non quam tincidunt ullamcorper quis et metus.</li>
</ol>

Forms

Code

// Console message
console.log('Hello!')

<pre>
<code>
// Console message
console.log('Hello!')
</code>
</pre>

Media

placeholder image

Table

Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam tempus enim ac eleifend sollicitudin.
Aenean sed ex non quam tincidunt ullamcorper quis et metus.