<ahref="input_control.html#forms-input"class="sublink-1">Forms & input</a><ahref="input_control.html#checkbox-radio"class="sublink-1">Checkboxes & radio buttons</a>
<ahref="input_control.html#buttons"class="sublink-1">Buttons & button groups</a><ahref="input_control.html#button-mixins"class="sublink-1">Button mixins</a>
<ahref="progress.html#progress-mixins"class="sublink-1">Progress bar mixins</a><ahref="progress.html#spinner-mixins"class="sublink-1">Donut spinner mixins</a>
<ahref="utility.html#visibility-legacy"class="sublink-1">Visibility helpers & legacy features</a><ahref="utility.html#breadcrumbs"class="sublink-1">Breadcrumbs</a>
<p><strong>mini.css</strong> is built in such a way that customization is really simple. You could try out one of the <ahref="../flavors.html">pre-defined flavors</a>, if you want, in order to get used to the framework and build something quickly and easily. However, many projects require custom styles and color palettes, which is when you need to get your hands dirty and start creating your own flavor by customizing an existing one and using mixins and variables to create your own, unique style for your brand or product. This page, along with the rest of the <strong>Customization</strong> section is aimed at developers who want to tweak the code provided with <strong>mini.css</strong> to create their own flavors for their projects, as well as active maintainers of the framework and people who just want to understand the inner workings of the codebase.</p>
<p>Use the <spanclass="hidden-sm">sidebar </span>menu <spanclass="hidden-md hidden-lg">below </span>to quickly jump to the documentation of any module that you want to check out. We strongly recommend, however, that you read the general information provided in this page before you start exploring the modules' code, especially if you are not familiar with the way <strong>mini.css</strong> is structured.</p><br>
<p><strong>mini.css</strong> is written using <ahref="http://sass-lang.com/">Sass</a>, a very popular CSS preprocessor. We use Sass to do four things:</p>
<ul>
<li>Make the code modular</li>
<li>Create variables that can be changed on the fly</li>
<p>At the heart of <strong>mini.css</strong> are modules - groups of classes and styles that aim to solve one set of needs. There are 10 modules in <strong>mini.css</strong>, which have been already written for you. All of the modules are built using partial files, named <code>_module_name.scss</code> and placed in the <code>src/mini</code> folder. You can edit any of the modules' code and/or add your own modules, following the same structure. The only thing you need to remember to do, in order to add your module to your flavor, is to add an <code>@import</code> statement after all the required variable declarations towards the bottom of your flavor file and it will be compiled along with the rest of <strong>mini.css</strong>. Similarly, to disable a module, just comment out its <code>@import</code> statement from the flavor file.</p><br/>
<p>Everything in <strong>mini.css</strong> is based on Sass variables. We try to make our variable names as descriptive as possible, usually using names like <code>$block-element-property-name</code>, but some things might vary a little bit. Changing the values of variables should be reasonably easy, simply navigate to the <code>src/flavors/flavor-name.scss</code> file for a pre-defined flavor and you will see a list of variables that you can tweak. Change the values as you see fit and your finalized stylesheet will reflect the changes you have made. We did our best to make everything as customizable as possible, so that different people can build entirely different flavors using the same building blocks.</p><br/>
<p>Building <strong>mini.css</strong> was no small task. Making it lightweight and customizable made things even harder, because these two things don't go well together most of the time. What we did was put more of the load on the preprocessor, instead of the final file. In order to accomplish this, we optimized as much of the code as possible, using conditions, flags and other tricks, so that compiling a flavor file might take one second longer, but loading won't. If you add any code to a flavor yourself, remember not only to make it customizable, but also to optimize it as best as possible.</p><br/>
<p>A lot of elements and components can be styled in many ways and most of the time we want a few styles to be available, without having to rewrite everything. We utilized the <code>@mixin</code> directive of Sass wherever we could to make it possible for you to easily create styles for pre-existing components and elements without having to tweak the base code for said elements or components. Each module's mixins can be found in the corresponding <code>_module_name_mixins.scss</code> file in the <code>src/mini</code> folder. To use a mixin, simply <code>@import</code> its file and then <code>@include</code> the mixin itself, passing values to at least its mandatory parameters. We recommend you write mixins wherever possible, if you create any new modules for <strong>mini.css</strong>.</p><br/>
<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>
