Core

The core module contains basic reset and fix rules, based on Normalize.css v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

Quick overview

Before applying any typography and styling rules, some resets need to be applied to make sure that different elements display consistently on all browsers. The core module utilizes the ruleset of Normalize.css v5.0.0 to apply those much needed resets and fixes. However, to keep the framework small, we removed some rules that only help with legacy browser support and also tweaked a lot of the rules around to use customizable variables so no duplicate rules are applied, taking up unnecessary space. The typography rules in core deal with a page's basics, like fonts and styling of headings and paragraphs, horizontal rules, colors, margins, padding etc.

Quick start

To use the core module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to 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">

Headings

Heading 1Subheading

Heading 2Subheading

Heading 3Subheading

Heading 4Subheading

Heading 5Subheading

Heading 6Subheading

All six of the HTML headings (<h1> - <h6>) are styled with simple rules, providing a clean base for your pages' headings. Apart from the headings themselves, complementary rules are provided for <small> elements inside headings, allowing you to define subheadings or explanatory text for those headings. These subheadings are stylized to display below the headings in smaller, lighter type.

Sample code

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

This is a paragraph with some sample text. Did you know mini.css v2.0 is codenamed Fermion? No? Well, now you do! Oh, by the way, that was some Bold text and here is some text in Italics. Maybe you want to know what our inline elements look like. For example a link to the Github repository of mini.css looks like that! Neat, right? Maybe you want to see some inline code or some sample input. Oh, also small text is cool, along with its siblings: the subscript_hi! and the superscript^hello!. Finally, check out the preformatted code block below.

function sum(num1, num2) {
    var num3 = num1 + num2;
    console.log('Result: ' + num3);
}

The most common HTML5 elements must be things like <p>aragraphs, bold (<strong>) & italics (<em>) text, links (<a>) and <small> text. These, along with a few others, are styled by default using clean, modern design to make your pages look cool and stand out from the rest of the internet.

Sample code

<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>
<pre>This is some preformatted text.</pre>

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.