Contextual
The contextual 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.
All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.
Quick overview
Almost every piece of content present on the web has some sort of content that needs highlighting in one way or another. The contextual module provides you with simple semantic text highlighting that utilises the <mark> HTML element. Apart from that, this module contains styles and definitions for a simple .alert 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 .tooltip implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.
Quick start
To use the contextual 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 <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.