<p>If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <ahref="modules.html">modules</a> page.</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><br>
</div>
</div>
<divclass="row">
<divclass="col-sm col-lg-10 col-lg-offset-1">
<divclass="card fluid">
<divclass="section"><h2>Setup & usage</h2></div>
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references inside your HTML page's <code><head></code> tag:</p>
<p>You can also 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/>
<h3>Common textual elements <ahref="https://codepen.io/chalarangelo/pen/RoEWwK"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<pre><p>This is a paragraph with some <strong>bold text</strong> and some <em>italics text</em>.</p>
<a href="#">This is a link.</a>
<small>This is some small text.</small>
<sub>Subscript</sub>
<sup>Superscript</sup>
<code>Inline code</code>
<kbd>Keyboard Input</kbd>
<hr>
<pre>This is some preformatted text.</pre>
This is some quoted text from another website or person.
</blockquote></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Lists & images<ahref="https://codepen.io/chalarangelo/pen/woRKay"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<h3>Basic layout <ahref="https://codepen.io/chalarangelo/pen/pNqNJw"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<pre><div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
</div>
</div>
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-9">
</div>
</div>
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-8">
</div>
</div>
<div class="row">
<div class="col-sm-5">
</div>
<div class="col-sm-7">
</div>
</div>
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
<div class="row">
<div class="col-sm-12">
</div>
<div class="row">
<div class="col-sm">
</div>
<div class="col-sm">
</div>
</div>
</div></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Based on the <ahref="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout Module</a></li>
<li>Grid structured as follows:
<ol>
<li><code>.container</code> serves as the grid system's wrapper</li>
<li>Multiple <code>.row</code> elements serve as the grid system's rows</li>
<li>Multiple <code>.col-<spanclass="fore-primary">SCR_SZ</span></code> and/or <code>.col-<spanclass="fore-primary">SCR_SZ</span>-<spanclass="fore-secondary">COL_WD</span></code> elements specify serve as the grid system's columns (fluid and preset respectively)</li>
<li>Apply multiple column classes to the same element, one for each screen size, to define different layouts</li>
<li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
<li>Try to make page content vertical for smaller devices, using <code>.col-sm-12</code> and transition to two or three columns on larger screen sizes</li>
<li>Combine with offsets and reordering as shown below</li>
<li>You can omit the style of a screen size if it is the same one as the one applied in the immediately smaller screen size</li>
<li>Always start with a <code>.col-sm</code> or <code>.col-sm-<spanclass="fore-secondary">COL_WD</span></code> style, otherwise smaller devices will not display your content properly</li>
<h3>Predefined layouts <ahref="https://codepen.io/chalarangelo/pen/ygGqQg"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<pre><div class="row cols-sm-6">
<div>
<p>col-sm-6</p>
</div>
<div>
<p>col-sm-6</p>
</div>
</div></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Available both as fluid column layouts, using <code>.cols-<spanclass="fore-primary">SCR_SZ</span></code>, replacing <code><spanclass="fore-primary">SCR_SZ</span></code> with one of the available screen size names and fixed width column layouts, using <code>.col-<spanclass="fore-primary">SCR_SZ</span>-<spanclass="fore-secondary">COL_WD</span></code>, replacing <code><spanclass="fore-primary">SCR_SZ</span></code> with one of the available screen size names and <code><spanclass="fore-secondary">COL_WD</span></code> with a number from <code>1</code> to <code>12</code> specifying the width of the columns</li>
<li>Create offsets using the <code>.col-<spanclass="fore-primary">SCR_SZ</span>-offset-<spanclass="fore-secondary">COL_WD</span></code> classes</li>
<li><code><spanclass="fore-secondary">COL_WD</span></code> can be any integer from <code>0</code> to <code>11</code> (both inclusive)</li>
<li>You can mix offset columns and non-offset columns</li>
<li>Specify offsets in combination with existing column styling, not instead</li>
<li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
<li>You can omit offsets whenever not needed, but you will have to override existing offsets for larger screen sizes, using <code>.col-<spanclass="fore-primary">SCR_SZ</span>-offset-0</code></li>
<li>Create reorders using <code>.col-<spanclass="fore-primary">SCR_SZ</span>-first</code>, <code>.col-<spanclass="fore-primary">SCR_SZ</span>-last</code> and <code>.col-<spanclass="fore-primary">SCR_SZ</span>-normal</code> classes for first, last and normal ordering respectively</li>
<li>Default ordering is based on order of appearance</li>
<li>Specify reorders in combination with existing column styling, not instead</li>
<li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
<li>You can use multiple <code>.col-<spanclass="fore-primary">SCR_SZ</span>-first</code> and <code>.col-<spanclass="fore-primary">SCR_SZ</span>-last</code> elements to group your elements according to the desired layout</li>
<li>You can omit reorders whenever not needed, but you will have to override existing reorders for larger screen sizes, using <code>.col-<spanclass="fore-primary">SCR_SZ</span>-normal</code></li>
<h3>Media object pattern<ahref="https://codepen.io/chalarangelo/pen/oBdvPX"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<pre><div class="row">
<div class="col-sm-1">
<img src="...">
</div>
<div class="col-sm">
<h2>Media object heading</h2>
<p>Media object content...</p>
</div>
</div></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Not a new component, rather a <ahref="https://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">popular pattern</a></li>
<li>Use two columns, one for the media (i.e. <code><img></code>) and one for the textual content</li>
<li>Compatible with most elements</li>
<li>Can use screen-specific layouts, reordering and offsets</li>
<li>Media objects can easily be nested inside each other</li>
<li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
<li>The rest of the elements inside the <code><header></code> must be button elements (i.e. <code><button></code>, <code><input <spanclass="fore-secondary">type</span>=<spanclass="fore-primary">"button"</span>></code>, <code><spanclass="fore-secondary">role</span>=<spanclass="fore-primary">"<ahref="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> or <code>.button</code>)</li>
<li>Use <code><span></code> elements as separators</li>
<li>You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons</li>
<li>The logo element should not be a <code><button></code> element or of the <code>.button</code> class</li>
<li>Header is not displayed as fixed by default</li>
<h3>Navigation bar <ahref="https://codepen.io/chalarangelo/pen/ENGbwa"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<h3>Sticky headers and footers <ahref="https://codepen.io/chalarangelo/pen/ZLVMzX"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<h3>Forms & input <ahref="https://codepen.io/chalarangelo/pen/qqgVKb"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<h3>Checkboxes & radio buttons <ahref="https://codepen.io/chalarangelo/pen/yVZPEZ"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<li>Pre-styled using the <ahref="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, fully accessible</li>
<li>Create a <code><div <spanclass="fore-secondary">class</span>=<spanclass="fore-primary">"input-group"</span>></code> containing the checkbox or radio button along with its linked label</li>
<li>Add <code><spanclass="fore-secondary">tabindex</span>=<spanclass="fore-primary">"0"</span></code> to the <code><input></code> element to make full accessible</li>
<li>Add multiple radio buttons in the same group inside the same <code>.input-group</code> wrapper</li>
<li>Always use <code>.input-group</code> and follow the code structure provided in the examples</li>
<li>Remember to use <code><label></code> elements for every single one of your checkbox or radio buttons</li>
<h3>Buttons & button groups <ahref="https://codepen.io/chalarangelo/pen/xRMPJG"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<li>Button styles are available for other elements, using the <code>.button</code> class or the <code><spanclass="fore-secondary">role</span>=<spanclass="fore-primary">"<ahref="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> attribute</li>
<li><code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code> and <code>.inverse</code> color variants</li>
<li><code>.small</code> and <code>.large</code> size variants</li>
<li>Create responsive button groups by wrapping multiple button elements inside a <code>.button-group</code> wrapper</li>
<li>Button groups are responsive, but might be displayed incorrectly in older browsers</li>
<li>Mix size and color variants, don't mix two variants of the same type</li>
<li>Avoid using different size variants inside a <code>.button-group</code></li>
<li>Link an <code><input <spanclass="fore-secondary">type</span>=<spanclass="fore-primary">"file"</span>></code> element to a <code><label></code></li>
<li>The file button will not change text when uploading a file, Javascript may be required</li>
<li>Compatible with <code>.input-group</code></li>
<h3>Basic syntax & responsiveness <ahref="https://codepen.io/chalarangelo/pen/XNOzBv"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<li><code><table></code> element is the table's root element</li>
<li><code><caption></code> (optional) serves as the table's title and must be the first element inside the table</li>
<li><code><thead></code> serves as the table's header row, populated with <code><th></code></li>
<li><code><tfoot></code> (optional) serves as the table's footer and must be immediately after <code><thead></code></li>
<li><code><tbody></code> is the table's body, populated with <code><td></code> elements</li>
</ol>
</li>
<li>Tables are responsive and collapse into cards on mobile devices</li>
<li>Always specify a <code>data-label</code> for each <code><td></code> element corresponding to the column's header to properly display table on mobile devices</li>
<li>Avoid having multiline <code><thead></code> elements, however if you need to, you can use <ahref="https://codepen.io/chalarangelo/pen/VPqWQE">this fix</a></li>
<li>For horizontal tables or matrices, check the examples below</li>
<h3>Table variants & matrices <ahref="https://codepen.io/chalarangelo/pen/qqgVQZ"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<pre><table class="preset">
<caption>Star Wars Character Alignment Table</caption>
<h3>Sections & media <ahref="https://codepen.io/chalarangelo/pen/gWvJEw"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<h3>Card sizing & fluidity <ahref="https://codepen.io/chalarangelo/pen/mOvqaM"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<pre><div class="card small">
<div class="section">
<p>Content</p>
</div>
</div>
<div class="card large">
<div class="section">
<p>Content</p>
</div>
</div>
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<p>Content</p>
</div>
</div>
</div></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Card size variants available using the <code>.large</code> and <code>.small</code> classes</li>
<li>Fluid cards available using the <code>.fluid</code> class, require the use of grid columns</li>
<li>Fluid cards might not display properly in older browsers and will sometimes slightly disrespect margins on certain layouts</li>
<li>Always wrap <code>.fluid</code> cards in columns, don't mix with non-fluid cards</li>
<h3>Card color variants <ahref="https://codepen.io/chalarangelo/pen/BRYeeW"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<pre><div class="card warning">
<div class="section">
<p>Warning</p>
</div>
</div>
<div class="card error">
<div class="section">
<p>Error</p>
</div>
</div></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Create yellow warning cards, using the <code>.warning</code> class</li>
<li>Create red error cards, using <code>.error</code> class</li>
<li>Avoid combining two or more card color variants</li>
<p>This is the third tab's content.</p>
</div>
</div></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Tabs structure as follows:
<ol>
<li><code>.tabs</code> element is the outermost wrapper of the tabbed layout</li>
<li>Multiple <code><input <spanclass="fore-secondary">type</span>=<spanclass="fore-primary">"radio"</span>></code> elements followed by their linked <code><label></code> elements are the titles of tabs<li>
<li>Multiple <code><div></code> elements, each one after the <code><label></code> of the tab it corresponds to, as the content of each tab</li>
</ol>
</li>
<li>Tabs are responsive, might be incompatible with some older browsers</li>
<li>Make a radio button <code><spanclass="fore-secondary">checked</span></code> to select the tab open by default</li>
<li>Use <code><spanclass="fore-secondary">aria-hidden</span>=<spanclass="fore-primary">"true"</span></code> to input elements to add accessibility</li>
<li>Use the syntax exactly as presented in the examples, do not substitute with checkboxes</li>
<p>This is the second collapse section's content.</p>
</div>
</div></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use the <code>.stacked</code> class to create stacked tabs</li>
<li>Use <code><spanclass="fore-secondary">aria-hidden</span>=<spanclass="fore-primary">"true"</span></code> to input elements in order to add accessibility</li>
<li>Use either checkboxes or radio buttons as the <code><input></code> elements of stacked tabs</li>
<li>Use single checkbox in a <code>.stacked</code> tabs container, but not a single radio button</li>
<li>Use the <code><mark></code> element for highlighting text</li>
<li><code>.secondary</code> and <code>.tertiary</code> classes offer color variants</li>
<li>Highlighted text is inline by default, use the <code>.inline-block</code> class for longer text highlights</li>
<li>Use the <code>.tag</code> class for highlighted tags</li>
<li>Combine color variants with the <code>.inline-block</code> or <code>.tag</code> class, do not combine color variants or <code>.tag</code> and <code>.inline-block</code> with each other</li>
<li>Do not nest <code><mark></code> elements, unless the outer element is an <code>.inline-block</code></li>
<p>Make absolutely sure you read this!</p>
</div>
<div class="alert critical">
<h3>This is a critical alert</h3>
<p>Make certain you read and actually understand this!</p>
</div></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use the <code>.alert</code> class to create alerts</li>
<li>Color variants available using the <code>.urgent</code> and <code>.critical</code> classes</li>
<li>Alerts have no pre-defined behavior, use Javascript</li>
<li>The <code>.alert</code> class can be applied to <code><div></code> elements and textual elements alike</li>
<li>Avoid applying the <code>.alert</code> class to non-textual elements, such as images</li>
<li>Use either the <code><spanclass="fore-secondary">role</span>=<spanclass="fore-primary">"<ahref="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert</a>"</span></code> attribute or the <code><spanclass="fore-secondary">role</span>=<spanclass="fore-primary">"<ahref="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a>"</span></code> attribute for accessible alerts</li>
<h3>Tooltips <ahref="https://codepen.io/chalarangelo/pen/MJZPrM"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<pre><span class="tooltip" aria-label="This is a tooltip">Hover over this text to see a tooltip!</span>
<span class="tooltip bottom" aria-label="This is a tooltip">Hover over this text to see a reverse tooltip!</span></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Create using the <code>.tooltip</code> class</li>
<li>Put tooltip text in the <code><spanclass="fore-secondary">aria-label</span></code> attribute's value</li>
<li>Use the <code>.bottom</code> class to make a tooltip display at the bottom of its context</li>
<h3>Basic progress bar <ahref="https://codepen.io/chalarangelo/pen/BQMMyX"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<li>Use the <code><progress></code> element to create progress bars</li>
<li>Set <code><spanclass="fore-secondary">max</span>=<spanclass="fore-primary">"1000"</span></code> and a <code>value</code> between <code>0</code> and <code>1000</code></li>
<li>Do not use floating point values for the progress bar</li>
<h3>Progress bar variants <ahref="https://codepen.io/chalarangelo/pen/OmQePm"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<li>Use the <code>.spinner-donut</code> class to create donut spinners</li>
<li>Apply class to a <code><div></code> or <code><span></code> element</li>
<li>Do not insert text inside the <code>.spinner-donut</code> element</li>
<li>Donut spinners can be displayed inline</li>
<li>Use the <code><spanclass="fore-secondary">role</span>=<spanclass="fore-primary">"<ahref="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a>"</span></code> attribute to make donut spinner accessible</li>
<h3>Generic borders & shadows <ahref="https://codepen.io/chalarangelo/pen/bWLPdo"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<h3>Responsive sizing & spacing classes <ahref="https://codepen.io/chalarangelo/pen/VmggvE"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<li>Use the <code>.responsive-padding</code> and <code>.responsive-margin</code> classes to apply responsive padding or margin respectively to any element</li>
<li>The two classes can be combined</li>
<li>Both classes use <code><spanclass="fore-secondary">!important</span></code> declarations</li>
<h3>Responsive visibility helpers <ahref="https://codepen.io/chalarangelo/pen/EmVvWz"target="_blank"class="button small"><iclass="fa fa-codepen"aria-hidden="true"></i> View on Codepen</a></h3>
<pre><span class="hidden-sm">Hidden in smaller screens</span>
<span class="hidden-md">Hidden in medium-sized screens</span>
<span class="hidden-lg">Hidden in larger screens</span>
<span class="visually-hidden-sm">Visually hidden in smaller screens</span>
<span class="visually-hidden-md">Visually hidden in medium-sized screens</span>
<span class="visually-hidden-lg">Visually hidden in larger screens</span></pre>
</div>
<divclass="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use the <code>.hidden-<spanclass="fore-primary">SCR_SZ</span></code> or <code>.visually-hidden-<spanclass="fore-primary">SCR_SZ</span></code> syntax, replacing <code><spanclass="fore-primary">SCR_SZ</span></code> with one of the available screen size names</li>
<li>To create breadcrumbs, create a <code><ul></code> element implementing the <code>.breadcrumbs</code> class</li>
<li>Do not use <code><ol></code> for breadcrumbs</li>
<li>Do not nest lists inside the <code>.breadcrumbs</code></li>
<li>Use the <code><spanclass="fore-secondary">role</span>=<spanclass="fore-primary">"<ahref="https://www.w3.org/TR/wai-aria/roles#navigation">navigation</a>"</span></code> attribute to make breadcrumbs accessible</li>
<li>Use the <code>.close</code> class to create a close icon</li>
<li>Use a <code><span></code> or <code><div></code> element to create a close icon</li>
<li>Use a button element implementing the <code>.close</code> class to stylize the close icon as a button</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<divclass="row box-centered">
<divclass="col-sm-12 col-lg-10 col-lg-offset-1">
</div>
</div>
</div></main>
<!-- End of page content-->
<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>