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.
+The contextual module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. 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.
+
Almost every website 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 .toast container, that you can use to display toast messages on your websites and web apps. Toasts mimic the native application notifications of certain devices, making them 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:
+
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">