<ahref="input_control#forms-input"class="sublink-1">Forms & input</a><ahref="input_control#checkbox-radio"class="sublink-1">Checkboxes & radio buttons</a><ahref="input_control#switches"class="sublink-1">Switches</a>
<ahref="input_control#buttons"class="sublink-1">Buttons & button groups</a><ahref="input_control#file-upload"class="sublink-1">File upload buttons</a>
<ahref="navigation#footer"class="sublink-1">Footer</a><ahref="navigation#sticky"class="sublink-1">Sticky headers & footers</a>
<br/><ahref="table#table-title">Table</a>
<ahref="table#syntax-responsiveness"class="sublink-1">Basic syntax & responsiveness</a><ahref="table#scrollable-tables"class="sublink-1">Scrollable tables</a>
<ahref="table#horizontal-tables"class="sublink-1">Horizontal tables</a><ahref="table#variants-matrices"class="sublink-1">Table variants & matrices</a>
<br/><ahref="card#card-title">Card</a>
<ahref="card#basic-syntax"class="sublink-1">Basic syntax</a><ahref="card#sections-media"class="sublink-1">Sections & media</a>
<ahref="card#sizing-fluidity"class="sublink-1">Card sizing & fluidity</a><ahref="card#color-variants"class="sublink-1">Card color variants</a>
<ahref="progress#basic-progress-bar"class="sublink-1">Basic progress bar</a><ahref="progress#progress-variants"class="sublink-1">Progress bar variants</a>
<ahref="utility#visibility-helpers"class="sublink-1">Visibility helpers</a><ahref="utility#borders-shadows"class="sublink-1">Generic borders & shadows</a>
<ahref="utility#responsive-sizing"class="sublink-1">Responsive sizing & spacing classes</a>
<pstyle="text-align: justify;">The <strong>core</strong> module contains basic reset and fix rules, based on <ahref="http://necolas.github.io/normalize.css/">Normalize.css</a> 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.</p>
<pstyle="text-align: justify;"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
<pstyle="text-align: justify;">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 <strong>core</strong> module utilizes the ruleset of <ahref="http://necolas.github.io/normalize.css/">Normalize.css</a> 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 <strong>core</strong> deal with a page's basics, like fonts and styling of headings and paragraphs, horizontal rules, colors, margins, padding etc.</p><br>
<pstyle="text-align: justify;">To use the <strong>core</strong> 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 <code><head></code> to utilize the viewport meta tag:</p>
<li>We use a <ahref="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> to figure out the best font for your device.</li>
<li>Fluid typography is also included, but not enabled by default. If you want to try it out, check out the out the <ahref="customization">customization</a> page.</li>
<pstyle="text-align: justify;">All six of the HTML headings (<code><h1></code> - <code><h6></code>) are styled with simple rules, providing a clean base for your pages' headings. Apart from the headings themselves, complementary rules are provided for <code><small></code> 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.</p>
<div><p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2 is codenamed <strong>Fermion</strong>? No? Well, now you do! Oh, by the way, that was some Bold text and here is some <em>text in Italics</em>. 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>. Finally, check out the horizontal rule, preformatted code block and quotation below.</p><hr>
<pstyle="text-align: justify;">The most common HTML5 elements must be things like <code><p></code>aragraphs, bold (<code><strong></code>) & italics (<code><em></code>) text, links (<code><a></code>), horizontal rules (<code><hr></code>) and <code><small></code> 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.</p>
<pstyle="text-align: justify;">Lists are also very commonly used in websites and apps. We tweaked a few margins and paddings to save some space and make them align properly with the rest of the common HTML elements that we use, but both unordered lists (<code><ul></code>) and ordered lists (<code><ol></code>) are minimally pre-styled to make things a little bit easier for you.</p>
<pstyle="text-align: justify;">Image elements (<code><img></code>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.</p><p>On a side note, if you want to add captions to images, you can use a <code><figcaption></code> element, while wrapping both the image and it inside a <code><figure></code>.</p>
<pstyle="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <ahref="modules">modules page</a> and choose another module to see its documentation.</p>
<footerstyle="text-align: justify;"><strong>mini.css</strong> was designed and built with <iclass="fa fa-heart-o"aria-hidden="true"></i> by <ahref="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <ahref="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <ahref="https://github.com/Chalarangelo/mini.css">GitHub</a>.</footer>
