<p><strong>mini.css</strong> is one of the lightest front-end frameworks on the web: about 5KB gzipped. This helps your websites load faster, while still looking great!</p>
<p><strong>mini.css</strong> is built in such a way that it will look great on most devices and especially phones and tablets. This allows you to easily tailor your websites to different users!</p>
<p><strong>mini.css</strong> gives you the power of customization, using its fully moddable flavors. This will give you control over how your websites look and allow great designs to stand out!</p>
<p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.0 is codenamed <strong>Fermion</strong>? No? Well, now you do! Maybe you want to know what our inline elements look like. For example a <ahref="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! Neat, right? Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. We use <mark>highlights</mark> quite a lot as well. Apart from the primary color, you can also try the <markclass="secondary">secondary</mark> and <markclass="tertiary">tertiary</mark> colors. If you wanna be fancy, maybe use a <markclass="tag">tag</mark> or a <markclass="bubble">bubble</mark>. All of these work well inside headings and the like. To finish our typography tour, check out the preformatted code block below.</p><br>
<p><strong>mini.css</strong> uses the Flexible Layout Module (commonly known as <code>flexbox</code>) to create a grid system for easy page layout. The grid system is not the most feature-rich one, but it contains all the essential components. The <code>container</code> of the grid is fluid by default, meaning it will adjust to fill its parent container. Rows are easily created using the <code>row</code> class and columns can be created using the usual <code>col-SZ-XX</code> syntax where <code>SZ</code> and <code>XX</code> are replaced by a screen size and a number of vertical columns respectively. Columns can also scale themselves automatically if you omit the number of vertical columns in the class name. Similarly, you can use offsets with the <code>col-SZ-offset-XX</code> syntax. The <strong>default</strong> grid is separated into 12 vertical columns. You can see some examples below.</p><br>
<p>The <code><progress></code> element is used for progress bars. There are three color variants (default, <code>secondary</code> and <code>tertiary</code>), as well as an <code>inline</code> class that displays the progress bar as an inline block, along with a <code>nano</code> variant for tiny progress bars. Below are some examples:</p>
<p>Tables are responsive and use the <code>data-label</code> attribute to specify the header name for each cell, so that they can be displayed as cards on mobile devices. Here's an example (resize to see mobile display if you are on desktop):</p>
