<p><strong>mini.css</strong> is one of the lightest front-end frameworks on the web: about 5KB gzipped. This helps your websites load faster, while still looking great!</p>
<p><strong>mini.css</strong> is built in such a way that it will look great on most devices and especially phones and tablets. This allows you to easily tailor your websites to different users!</p>
<p><strong>mini.css</strong> gives you the power of customization, using its fully moddable flavors. This will give you control over how your websites look and allow great designs to stand out!</p>
<p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.0 is codenamed <strong>Fermion</strong>? No? Well, now you do! Maybe you want to know what our inline elements look like. For example a <ahref="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! Neat, right? Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. We use <mark>highlights</mark> quite a lot as well. Apart from the primary color, you can also try the <markclass="secondary">secondary</mark> and <markclass="tertiary">tertiary</mark> colors. If you wanna be fancy, maybe use a <markclass="tag">tag</mark> or a <markclass="bubble">bubble</mark>. All of these work well inside headings and the like. To finish our typography tour, check out the preformatted code block below.</p><br>
<p><strong>mini.css</strong> uses the Flexible Layout Module (commonly known as <code>flexbox</code>) to create a grid system for easy page layout. The grid system is not the most feature-rich one, but it contains all the essential components. The <code>container</code> of the grid is fluid by default, meaning it will adjust to fill its parent container. Rows are easily created using the <code>row</code> class and columns can be created using the usual <code>col-SZ-XX</code> syntax where <code>SZ</code> and <code>XX</code> are replaced by a screen size and a number of vertical columns respectively. Columns can also scale themselves automatically if you omit the number of vertical columns in the class name. Similarly, you can use offsets with the <code>col-SZ-offset-XX</code> syntax. The <strong>default</strong> grid is separated into 12 vertical columns. You can see some examples below.</p><br>
<p><strong>mini.css</strong> adds modern styles for many of the HTML elements.</p><br>
<h3>Tables</h3>
<p>Tables are responsive and use the <code>data-label</code> attribute to specify the header name for each cell, so that they can be displayed as cards on mobile devices. Here's an example (resize to see mobile display if you are on desktop):</p>
<p>Forms are inline by default and textual <code><input></code>, <code><textarea></code> and <code><select></code> elements have been pre-styled. To make inputs take up more space than their default, simply add something like <code>width="100%"</code>. You can also utilize the grid system to align forms to your liking. Below are some examples:</p>
<p>Use the <code><header></code>, <code><nav></code> and <code><footer></code> elements to add navigational elements to your page. The <code><header></code> element displays as a non-fixed horizontal bar and can contain a logo along with a set of links or buttons. Style any links using the <code>.button</code> class to give them the proper style. it is suggested that you place the <code><header></code> element outside of your grid system's <code>.container</code> to avoid styling problems. You can see an example below:</p>
<p><code><nav></code> implements the traditional navigation sidebar, using simple styling. The sidebar is not fixed by default and it has no specific width set, so you can use the grid system or some Javascript code to show or hide it and decide its size. Use simple links and <code><span></code> elements to add links and categories. The <code>.sublink-1</code> and <code>.sublink-2</code> classes can be added to create links in categories and subcategories. Below you can see an example (sidebar is displayed next to text on medium-large displays, but fills the whole display on phones and smaller screens):</p>
<divclass="container">
<divclass="row">
<divclass="col-sm-12 col-md-9">
<p>This is some sample content that will show next to the navigation menu. Which means that we'll have to present some more fun facts about <strong>mini.css</strong> to occupy this space. Well, here's a couple:</p>
<ul>
<li><strong>mini.css</strong> was inspired by Bootstrap and Pure.css. Its original goal was to build a framework with the stylistic fluff of Bootstrap, but nearly the size of Pure.css. The first version, codenamed <strong>Neutrino</strong> was well-received and was mostly a tech demo of what <strong>Fermion</strong> now offers.</li>
<li><strong>mini.css</strong> v2.0 has been designed with modern browser compatibility and recent web standards in mind. Part of its aim is to reduce the footprint of websites by providing a customizable base to work with, while cutting down a lot of the fat that comes with premade stylesheets.</li>
<p>Finally, use the <code><footer></code> element to create your footer. Add links, images, credits. This element is not meant for main navigation, but many pages use it for some kind of navigation or other. Try to place the <code><footer></code> outside of the grid system for best results. Below is an example:</p>
<p>Buttons are already pre-styled in <strong>mini.css</strong> to allow for consistent presentation. However, there is a lot you can do to customize them, as the pre-applied styles are mostly overrides for the default presentation styles. Pre-styled buttons and other button-like inputs can be seen below:</p>
<spanstyle="margin:3px;"></span>
<button>Normal button</button>
<inputtype="button"value="Input button">
<inputtype="submit"value="Submit button">
<inputtype="reset"value="Reset button">
<ahref="#"class="button">Link button</a>
<buttondisabled>Disabled button</button><br>
<p>File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. <strong>mini.css</strong> deals with the problem, using a workaround involving labels that use the <code>button</code> class, which applies the exact same style to those labels. Just link it to the <code><input type="file"></code> element of your choice and you're good to go. For example:</p>
<p>There are also different kinds of buttons, specifically <code>primary</code>, <code>secondary</code> and <code>tertiary</code>, as well as <code>small</code> and <code>large</code> buttons. All of these types can be specified as classes. For example:</p>
<spanstyle="margin:3px;"></span>
<buttonclass="primary">Primary normal button</button>
<labeldisabledclass="button small primary">Small primary disabled label button</label>
<br><br>
<h3>Checkboxes and Radio buttons</h3>
<p>Checkboxes and radio buttons are styled using the <ahref="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, while keeping things simple and adding just the needed consistency for those input types. Place an <code><input></code> (checkbox or radio button) and a linked <code><label></code> inside an <code>.input-group</code> and the controls will style themselves. To allow accessibility for those controls, you can use <code>tabindex="0"</code> on the <code><input></code> elements only. You can see some examples below:</p>
<p>The <code><progress></code> element is used for progress bars. There are three color variants (default, <code>secondary</code> and <code>tertiary</code>), as well as an <code>inline</code> class that displays the progress bar as an inline block, along with a <code>nano</code> variant for tiny progress bars. Below are some examples:</p>
<p>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Some of them are showcased below:</p>
<p>You can also use the <code>.hidden</code> class to hide any element you want or the <code>.visually-hidden</code> class for elements that need to be invisible to users but exist in the accessibility tree, set <code>float</code>s to left or right using the <code>.float-left</code> and <code>.float-right</code> classes or clear <code>float</code>s using the <code>.clearfix</code> class, which implements 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><br>
<p>Cards are some of the most modern and stylish content containers and are widely used in many website types. <strong>mini.css</strong> provides you with the <code>.card</code> class, along with a handful of pre-built styles to help you create beatiful cards for your pages. Note that this module is heavily dependent on the grid system module. To use the cards, simply replace the grid's columns with your cards and you're ready to go. Note that in the examples below, we try to showcase as many features as possible, but there might be something we missed. Also, the <code>.row</code> which acts as the contaienr for the cards has the <code>.cards</code> class applied to it, which helps align the cards horizontally, by automatically shrinking or expanding the spaces between them.</p>
<pclass="section">This cat is pretty amazing, right? Just look at it!</p>
</div>
<divclass="card">
<pclass="section">Cards are pretty awesome, as you can see.</p>
<pclass="section">This is a card with three text sections.</p>
<pclass="section">By the way, here's a link to the <strong>mini.css</strong><ahref="https://github.com/Chalarangelo/mini.css">project repository on Github</a>, just in case.</p>
<p>Cards resize automatically to fit any and all content, allowing you to do anything you want with them. They also align the content automatically, so your sections will always look pretty. Nothing to worry about anymore! By the way, this is a <code>.primary</code> card.</p>
<pclass="section">Yes, <code>.fluid</code> cards are also available! You might want to use these in combination with the grid system's columns to achieve a better effect. There's an example below, after the other size variants for the cards. Have a look.</p>
These cards work quite well together, no matter the size. Well, except the <code>.fluid</code> ones which should be used together, without the other cards. Unless you want a fluid card to act as a separator of sorts, which might be desirable. Just use them in columns, like we show you below, it's the best way. By the way, this was a <code>.double-padded</code> section.
</p>
</div>
</div>
<divclass="row">
<divclass="col-sm-12 col-md-3">
<divclass="card fluid">
<h1class="section double-padded">Card 1</h1>
<p>This is the first card. It is placed inside a column.</p>
</div>
</div>
<divclass="col-sm-12 col-md">
<divclass="card fluid">
<h1class="section double-padded">Card 2</h1>
<p>This is the second card. It is placed inside a larger column. On smaller displays these will display like a list of cards.</p>
</div>
</div>
<divclass="col-sm-12 col-md-3">
<divclass="card fluid">
<h1class="section double-padded">Card 3</h1>
<p>This is the third card. It is placed inside a column.</p>
<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>
