<p><strong>mini.css</strong> aims to provide as much functionality as possible in less than 7KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p><br>
<p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br>
<p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p><br>
<p><strong>mini.css</strong> is published in <strong>npm</strong>, <strong>yarn</strong> and <strong>bower</strong>, so you can easily download it, using your preferred package manager:</p>
<p>Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code><head></code> tag:</p>
<p>Finally, you can find <strong>mini.css</strong> on <ahref="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
<pstyle="padding-top: 1rem; padding-bottom: 1rem;"><markclass="secondary"style="padding: 3px 6px;"><iclass="fa fa-lg fa-exclamation"aria-hidden="true"></i></mark> Due to the way <strong>mini.css</strong> is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. On a side note, remember that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p><hr>
<p><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
<br/>
<h3>What exactly does mini.css provide?</h3>
<p>Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <ahref="modules.html">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
<ul>
<li><ahref="core.html">Core</a> - Basic reset and fix rules, based on <ahref="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, typography and common textual element styling</li>
<li><ahref="grid.html">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
<li><ahref="navigation.html">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
<li><ahref="input_control.html">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
<li><ahref="table.html">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
<li><ahref="card.html">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
<li><ahref="tab.html">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
<li><ahref="contextual.html">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
<li><ahref="progress.html">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
<li><ahref="utility.html">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
</ul><br/>
<h3>How do I customize mini.css?</h3>
<p><strong>mini.css</strong> allows you to easily customize your designs, using <ahref="flavors.html">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <ahref="customization/index.html">customization</a> section.</p><br/><hr/>
<p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>
<ul>
<li>For a quick guide on getting started, you might wanna take a look at the available <ahref="modules.html">modules</a> list and the tutorials provided for each one!</li>
<li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <ahref="quick_reference.html">quick reference</a> page!</li>
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <ahref="flavors.html">flavors</a>. See which one of them better suits your needs!</li>
<li>If you are more experienced or demanding, you can always take a look at the <ahref="customization.html">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
<li>Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the <ahref="https://github.com/Chalarangelo/mini.css">Github repository</a> to find out more.</li>
<footer><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>
