<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#switch"class="sublink-1">Switches</a>
<ahref="input_control#buttons"class="sublink-1">Buttons & button groups</a><ahref="input_control#button-mixins"class="sublink-1">Button mixins</a><ahref="input_control#switch-mixins"class="sublink-1">Switch mixins</a>
<ahref="progress#progress-mixins"class="sublink-1">Progress bar mixins</a><ahref="progress#spinner-mixins"class="sublink-1">Donut spinner mixins</a>
<br/><ahref="utility#utility-title">Utility</a>
<ahref="utility#visibility-legacy"class="sublink-1">Visibility helpers & legacy features</a><ahref="utility#breadcrumbs"class="sublink-1">Breadcrumbs</a>
<pstyle="text-align:justify">The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p><br/>
<pstyle="text-align:justify">Easy page layout is one of the main advantages of using a CSS framework over writing your own styles. The <strong>grid</strong> module utilizes the <ahref="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> to provide you with a modern and responsive layout grid system for all your needs. Rules in the <strong>grid</strong> module help you create basic fluid containers for your grid and allow you to design layouts that work well on all screen sizes using a simple row and column structure. The grid system contains definitions for both fluid columns that resize according to their siblings and columns with preset sizes on different screen sizes, as well as rules that allow you to offset or move certain columns to the first or last place on the grid's row on different devices, helping you present the page in a different layout without duplicating any content. All of the rules in the module are built around accessibility, so screen readers can easily read you pages.</p><br>
<pstyle="text-align:justify">To customize the <strong>grid</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <ahref="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <ahref="https://atom.io/">Atom</a>).</p><br>
<pstyle="text-align:justify">The <strong>grid</strong> module's systems are based on custom-named classes for containers, rows and columns, as well as reordering and ofsetting classes, breakpoints and padding.</p><br/>
<tddata-label="Description">The class prefix for extra small screen columns<sup><ahref="#grid-note-one">1</a></sup></td><tddata-label="Sample value">'xs'</td>
<tddata-label="Description">The grid system's breakpoint for small screens<sup><ahref="#grid-note-one">1</a></sup></td><tddata-label="Sample value">480px</td>
<tddata-label="Description">Enables rows defining the column layout of their children<sup><ahref="#grid-note-two">2</a></sup></td><tddata-label="Sample value">true</td>
<tddata-label="Description">The class prefix for the grid's row parents<sup><ahref="#grid-note-two">2</a></sup></td><tddata-label="Sample value">'cols'</td>
<liid="grid-note-one">The values of <code>$grid-extra-small-prefix</code> and <code>$grid-small-breakpoint</code> will only be used if <code>$use-four-step-grid</code> is set to <codeclass="fore-tertiary">true</code>.</li>
<liid="grid-note-two">The value of <code>$grid-row-parent-layout-prefix</code> will only be used if <code>$include-parent-layout</code> is set to <codeclass="fore-tertiary">true</code>.</li>
<pstyle="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <ahref="../customization">customization page</a> or choose a module from the top menu 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>
