<ahref="core.html#lists"class="sublink-1">Lists</a><ahref="core.html#images-captions"class="sublink-1">Image responsiveness & captions</a>
<br/><ahref="grid.html#grid-title">Grid</a>
<ahref="grid.html#basic-layout"class="sublink-1">Basic layout</a><ahref="grid.html#screen-specific-layout"class="sublink-1">Screen specific layouts</a>
<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#file-upload"class="sublink-1">File upload buttons</a>
<br/><ahref="table.html#table-title">Table</a>
<ahref="table.html#syntax-responsiveness"class="sublink-1">Basic syntax & responsiveness</a>
<ahref="table.html#horizontal-tables"class="sublink-1">Horizontal tables</a><ahref="table.html#variants-matrices"class="sublink-1">Table variants & matrices</a>
<br/><ahref="card.html#card-title">Card</a>
<ahref="card.html#basic-syntax"class="sublink-1">Basic syntax</a><ahref="card.html#sections-media"class="sublink-1">Sections & media</a>
<ahref="card.html#sizing-fluidity"class="sublink-1">Card sizing & fluidity</a>
<ahref="progress.html#basic-progress-bar"class="sublink-1">Basic progress bar</a><ahref="progress.html#progress-variants"class="sublink-1">Progress bar variants</a>
<ahref="utility.html#visibility-helpers"class="sublink-1">Visibility helpers</a><ahref="utility.html#borders-shadows"class="sublink-1">Generic borders & shadows</a>
<ahref="utility.html#responsive-sizing"class="sublink-1">Responsive sizing & spacing classes</a>
<p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</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/>
<p>Almost every piece of content present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code><mark></code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.alert</code> container, that you can use to show alerts on your websites and web apps. Alerts replace the traditional design paradigms of modals, messages and alerts by defining a simple, usable container that is also mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
</div>
<divclass="section">
<h2>Quick start</h2>
<p>To use the <strong>contextual</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>This is some text with a <mark>highlight</mark>.</p>
<p>Apart from the primary highlight style, there are also <markclass="secondary">secondary</mark> and <markclass="tertiary">tertiary</mark> styles for highlighting.</p><br>
<p><markclass="inline-block">If you want to highlight a longer piece of text, without line breaks, you can turn the highlight into an inline-block like you see this piece of text being displayed.</mark></p><br>
<p>Finally, you can create contextual tags like <markclass="tag">this</mark> or <markclass="tag">7</mark>.</p><br>
<p>To add simple highlights in your text, you can use the <code><mark></code> HTML element. These highlights come pre-styled to use the default primary color, but if you would rather use another color for your highlight you can easily add the <code>.secondary</code> or <code>.tertiary</code> class to a <code><mark></code> element. For longer pieces of text that need highlighting, consider adding the <code>.inline-block</code> class to make them stand out even more. Finally, you can create contextual tags, using the <code>.tag</code> class.</p>
<li>Try to use elements with the <code>.inline-block</code> class only when absolutely necessary, as they break the normal text flow of the document. Avoid using this class on shorter pieces of text that span a few words and contain no line breaks.</li>
<li><code><mark></code> elements, along with their supporting classes (except for <code>.inline-block</code>) can be easily used in paragraphs, headings and other elements, as they scale according to their parent element.</li>
<pclass="do"><markclass="tertiary">Do:</mark> You can combine any of the contextual color classes (<code>.secondary</code> or <code>.tertiary</code>) with the <code>.tag</code> or <code>.inline-block</code> class.</p>
<pclass="dont"><markclass="secondary">Don't:</mark> Avoid combining two contextual color classes or a <code>.tag</code> and an <code>.inline-block</code>, as these combinations might result in unexpected behavior.</p>
<pclass="do"><markclass="tertiary">Do:</mark> You can only nest a <code><mark></code> inside another if the outer one is of the <code>.inline-block</code> class. You can color the inner <code><mark></code> using any of the contextual color classes or even make it a <code>.tag</code>. Be careful, however, to not make the inner <code><mark></code> an <code>.inline-block</code> as well.</p>
<pclass="dont"><markclass="secondary">Don't:</mark> Avoid using nested <code><mark></code> elements, unless the outer <code><mark></code> element is an <code>.inline-block</code>.</p>
<divclass="alert"style="margin-top: 8px; margin-bottom: 8px;"><h3>This is an alert</h3><p>Make sure you read this!</p></div>
<divclass="alert urgent"style="margin-bottom: 8px;"><h3>This is an urgent alert</h3><p>Make absolutely sure you read this!</p></div>
<divclass="alert critical"style="margin-bottom: 8px;"><h3>This is a critical alert</h3><p>Make certain you read and actually understand this!</p></div>
<p>Alerts replace modal dialogs, along with messages, notifications and traditional alerts with a simpler, easier design paradigm. To create an alert, use a <code><div></code> element, which will contain one or more elements (for example a <code><h3></code> and a <code><p></code>) and add the <code>.alert</code> class to it. For more urgent alerts, use the <code>.urgent</code> class and for critical alerts, use the <code>.critical</code> class.</p>
<h3>Sample code</h3>
<pre><div class="alert">
<h3>This is an alert</h3>
<p>Make sure you read this!</p>
</div>
<div class="alert urgent">
<h3>This is an urgent alert</h3>
<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>
</div>
<divclass="section">
<h3>Notes</h3>
<ul>
<li>Alert elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li>
<li>If you want to make your alerts more accessible, we suggest you add 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, depending on the behavior you are planning to implement for your alerts.</li>
</ul><hr>
<divclass="row">
<divclass="col-sm-12 col-md-6">
<pre><p class="alert">Short and to the point</p>
<spanclass="fore-tertiary"><!-- or --></span>
<h2 class="alert urgent">Large and to the point</h2></pre>
<pclass="do"><markclass="tertiary">Do:</mark> Instead of using a <code><div></code> element, you can also apply the <code>.alert</code> class to common textual elements, such as paragraphs or headings.</p>
<pre><button class="alert">Not a good alert</button></pre>
<pclass="dont"><markclass="secondary">Don't:</mark> Avoid applying the <code>.alert</code> class to non-textual HTML elements, such as buttons or images. Doing so might result in unexpected behavior.</p>
<divclass="animated alert"style="margin-top: 8px; margin-bottom: 8px;"><h3>This is an alert</h3><p>Make sure you read this!</p></div>
<divclass="animated alert urgent"style="margin-bottom: 8px;"><h3>This is an urgent alert</h3><p>Make absolutely sure you read this!</p></div>
<divclass="animated alert critical"style="margin-bottom: 8px;"><h3>This is a critical alert</h3><p>Make certain you read and actually understand this!</p></div>
<p>Alerts can be animated, so that they pop out a little more to make sure your users can see them. To animate an alert box, use the <code>.animated</code> class on an existing <code>.alert</code> and it shall periodically scale up a little bit to make users notice it.</p>
<li>Animated alerts may not display properly on older browsers, especially legacy versions of Internet Explorer.</li>
<li>It has been reported that some Webkit-based browsers, such as Chrome, display animated alerts in a very blurry fashion. Despite our best attempts at solving these problems, they seem to be quite persistent and we do not yet know how to fix them. Thus, you might want to hold off on using animated alerts if you think this might be an issue or try to control them using Javascript code to make the animation stop after a short amount of time (i.e. removing the <code>.animated</code> class).</li>
<p>Tooltips can be used to convey context-sensitive information when the user hovers over some text. To create a tooltip, simply wrap the text you want users to hover over in an element with the <code>.tooltip</code> class (our choice is usually a <code><span></code> element, but your needs may differ) and add an <code><spanclass="fore-secondary">aria-label</span></code> in that element, setting its value to the content of your tooltip. Tooltips display at the top of the hovered text by default, so if you want to show them below the text, add the <code>.bottom</code> class to them.</p>
<h3>Sample code</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>
</div>
<divclass="section">
<h3>Notes</h3>
<ul>
<li>Tooltips are built to be accessible and should display properly on screenreaders.</li>
<li>If you are not satisfied with the default tooltip colors, please check out the <ahref="customization.html">customization page</a> for instuctions on how to create your own tooltip variants.</li>
<li>Rembmer to always add the <code><spanclass="fore-secondary">aria-label</span></code> attribute, otherwise your tooltip will not have any text to show.</li>
<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>
<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>
