<p>The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.</p>
<p><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>
<p>Every website or app has different needs and no UI toolkit can predict them all. The <strong>utility</strong> module addresses this issue by providing you with a handful of utility and helper classes to make common, repetitive declarations easier. These classes include, but are not limited to, generic border styling and shadows, floats, centering and clearfix classes, some responsive sizing and spacing utilities and a few other things, like a close icon, breadcrumbs styling and visiblity helpers for screen readers.</p><br>
</div>
<divclass="section">
<h2>Quick start</h2>
<p>To use the <strong>utility</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><br>
<p>You can hide content for all your users, using the default <code><spanclass="fore-secondary">hidden</span></code> attribute. However, we provide you with the <code>.hidden</code> class for the same purpose, as well as the <code>.visually-hidden</code> class which will make your content hidden, except for screen readers.</p>
<pre><span class="hidden visually-hidden">Not a good idea</span></pre>
<pclass="dont"><markclass="secondary">Don't:</mark> Avoid using both classes at the same time. Instead, use <code>.hidden</code> to hide content for all users, <code>.visually-hidden</code> to hide it for non-screen-reader users or <code><spanclass="fore-secondary">aria-hidden</span>=<spanclass="fore-primary">"true"</span></code> to hide it for screen-reader-only users.</p>
<p>You can easily make content float left or right, using the <code>.float-left</code> and <code>.float-right</code> classes. Clear all floats, using the <code>.clearfix</code> class, based on the <ahref="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> by Nicolas Gallagher. Finally, use the <code>.center-block</code> class to make an element center and display as a block.</p>
<pclass="dont"><markclass="secondary">Don't:</mark> Avoid combining any two of the above classes (except if you use <code>.clearfix</code> to temporarily clear a float or something similar), as they might overwrite each other and cause unexpected behavior.</p>
<p>Use the <code>.bordered</code> class to apply a generic black border with 25% opacity to any element. Apart from that you can use the <code>.rounded</code> and <code>.circular</code> classes to create generic border radiuses. Finally, you can use the <code>.shadow-small</code>, <code>.shadow-medium</code> and <code>.shadow-large</code> to add a generic <code><spanclass="fore-secondary">box-shadow</span></code> to any element, as well as the <code>.shadow-none</code> class to remove it entirely.</p>
<li>All of these classes utilize <code><spanclass="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
<li>The <code>.bordered</code> class was originally created with elements such as buttons in mind, to allow users highlighting certain elements in their designs, without having to change any default styles.</li>
<li>All of the above classes can be used with most modern HTML elements.</li>
<pclass="dont"><markclass="secondary">Don't:</mark> Avoid combining two classes of the same type (i.e. two radii or two shadow styles), as they might overwrite each other and cause unexpected behavior.</p>
<p>Helper classes for the <code>padding</code> and <code>margin</code> attributes are provided in the form of <code>.responsive-margin</code> and <code>.responsive-padding</code> classes. Both of these classes are responsive, allowing you to collapse the spacing and size of elements on different displays to make better use of the device's viewport.</p>
<pre><div class="responsive-padding responsive-margin">Responsive padding and margin</div></pre>
<pclass="do"><markclass="tertiary">Do:</mark> You can use both of these classes to make certain element adapt to changes. This could be especially useful for certain grid layouts.</p>
<p>Breadcrumbs are usually used to show the navigational hierarchy of pages or folders. To use them, simply create a <code><ul></code> element that implements the <code>.breadcrumbs</code> class. Inside this unordered list, add as many <code><li></code> elements as needed to show your hierarchy. You can add links to the list elements, as necessary.</p>
<li>The separators between breadcrumbs are added using some tricky CSS rules. Due to that, there might be a few browser versions or devices where you can see part of the seams between the element separators.</li>
<li>Breadcrumbs show a hierarchy, an ordered list. However, we do not use the <code><ol></code> element, as it might conflict with some custom styles we've seen people use.</li>
<pclass="dont"><markclass="secondary">Don't:</mark> The structure of the breadcrumb component prohibits the use of <code><ol></code> in place of the <code><ul></code> element.</p>
<pclass="dont"><markclass="secondary">Don't:</mark> Avoid nesting lists, breadcrumbs or a combination of the two inside the <code>.breadcrumbs</code> list, as this might cause unexpected behavior.</p>
<pclass="do"><markclass="tertiary">Do:</mark> You can use a handful of other HTML elements instead of the <code><span></code> element showcased in the example above, most commonly <code><div></code> elements.</p>
<pclass="do"><markclass="tertiary">Do:</mark> If you want your close icon to behave like a button (i.e. register as a button on screen readers and have the required logic attached to it), you can apply the <code>.close</code> class to a <code><button></code> element instead. You can even apply any of the button color variant classes.</p>
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <ahref="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built 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>
