<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>
</div>
</div>
</div>
</div>
</div>
<divclass="row">
<divclass="col-sm col-lg-10 col-lg-offset-1">
<h2>Setup & usage</h2>
<pstyle="text-align:justify"><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>After downloading <strong>mini.css</strong>, pick a <ahref="flavors">Flavor</a> and use it for your project.</p>
<br/>
<pstyle="text-align:justify">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>
<pstyle="text-align:justify">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; text-align: justify"><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 designed, 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 such as Internet Explorer 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>
</div>
</div>
<divclass="row">
<divclass="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Quick overview</h2>
<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
<br/>
<h3>Why should I use mini.css?</h3>
<pstyle="text-align: justify;"><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>
<p>Not convinced yet? Maybe you should read these <ahref="https://hackernoon.com/5-reasons-to-try-out-mini-css-62ddb47b9370">5 reasons</a> to try out <strong>mini.css</strong>.</p>
<br/>
<h3>What exactly does mini.css provide?</h3>
<pstyle="text-align: justify;">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">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">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">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
<li><ahref="navigation">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
<li><ahref="input_control">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
<li><ahref="table">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
<li><ahref="card">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
<li><ahref="tab">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
<li><ahref="contextual">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
<li><ahref="progress">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
<li><ahref="utility">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
</ul>
<pstyle="text-align: justify;">While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries <ahref="https://chalarangelo.github.io/react-mini.css/">here</a>!</p>
<br/>
<h3>How do I customize mini.css?</h3>
<pstyle="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <ahref="flavors">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">customization</a> section.</p><br/>
<pclass="section double-padded"style="text-align: center;">If you like <strong>mini.css</strong>, remember that you can show your support by starring it on Github.<br/> It means a lot to us and it only takes a couple of seconds!</p>
<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 want to take a look at the available <ahref="modules">modules</a> list and the tutorials provided for each one!</li>
<li>To get you started even faster, we have created a handful of <ahref="templates">templates</a> that might fit your needs!</li>
<li>If you want a step-by-step guide on how to utilize the most commonly used modules, be sure to check out these articles on Medium:
<ol>
<li><ahref="https://hackernoon.com/designing-a-simple-web-page-with-mini-css-f455e9f6403b">Designing a simple web page with <strong>mini.css</strong></a></li>
<li><ahref="https://hackernoon.com/using-the-mini-css-card-module-and-media-object-3c5b5829d19c">Using the <strong>mini.css</strong> card module and media object</a></li>
<li><ahref="https://hackernoon.com/creating-a-mobile-friendly-navigation-using-mini-css-8cea580c51ed">Creating a mobile-friendly navigation using <strong>mini.css</strong></a></li>
</ol>
</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">quick reference</a> page!</li>
<li>If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our <ahref="https://github.com/Chalarangelo/react-mini.css">React & Preact Libraries</a>, which will help you get started creating all kinds of custom components based on <strong>mini.css</strong>.
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <ahref="flavors">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">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>
</ul>
</div>
</div>
</div></main>
<!-- End of page content-->
<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>.<br/>
<small>Icons made by <ahref="http://www.freepik.com"title="Freepik"><small>Freepik</small></a> from <ahref="http://www.flaticon.com"title="Flaticon"><small>www.flaticon.com</small></a> is licensed by <ahref="http://creativecommons.org/licenses/by/3.0/"title="Creative Commons BY 3.0"target="_blank"><small>CC 3.0 BY</small></a></small></footer>
