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.
+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, tooltips and modals 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.
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.
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 along with an implementation for .modal dialogs. All components in this module are fully accessible, so that's another thing not to worry about.
This is a modal window!
+ +Modal dialogs are pretty ease to make. Simply create an <input type="checkbox"> element, immediately followed by a <div> element with the .modal class. Inside this element, you can add a .card element with your modal dialog's contents. Remember to add a <label> element linked to your modal dialog's <input type="checkbox"> to let users close the dialog. You can also apply the .close class to a <label> element to display a close icon at the top right of the modal dialog.
<label for="modal-toggle">Show modal</label> + +<input id="modal-toggle" type="checkbox"/> +<div class="modal"> + <div class="card"> + <label for="modal-toggle" class="close"></label> + <h3 class="section">Modal</h3> + <p class="section">This is a modal window!</p> + </div> +</div>+
<label> linked to your modal dialog's <input type="checkbox"> or use Javascript to alter its state, otherwise users will not be able to close the dialog.<input id="modal-toggle" type="checkbox"/> +<label for="modal-toggle">Show modal</label> +<div class="modal"> + <div class="card"> + <label for="modal-toggle" class="close"></label> + <h3 class="section">Bad Modal</h3> + </div> +</div>+
Don't: The syntax and structure of the modal dialog's container is very strict. Try to follow it exactly as described in this section.
+If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.
diff --git a/docs/core.html b/docs/core.html index cbe871c..edc8a35 100644 --- a/docs/core.html +++ b/docs/core.html @@ -63,7 +63,7 @@ Basic syntax Stacked tabsThe 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.
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, tooltips and modals 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.
The contextual module's contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.
The contextual module contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $include-modal | Logical | +Enables modal components1 | true | +
| $modal-name | String | +Class name for modal components1 | 'modal' | +
| $modal-back-color | Color | +Background color for modal components1 | black | +
| $modal-back-opacity | Opacity | +Background opacity for modal components1 | 0.4 | +
| $modal-close-name | String | +Class name of the close button of the modal component1 | 'close' | +
| $modal-close-top | Position top | +Top position of the close button of the modal component1 | 12px | +
| $modal-close-right | Position right | +Right position of the close button of the modal component1 | 4px | +
$include-modal is set to true.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. More specifically, the contextual module contains:
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, tooltips and modals 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. More specifically, the contextual module contains:
<label for="modal-toggle">Show modal</label> + +<input id="modal-toggle" type="checkbox"/> +<div class="modal"> + <div class="card"> + <label for="modal-toggle" class="close"></label> + <h3 class="section">Modal</h3> + <p class="section">This is a modal window!</p> + </div> +</div>+
<input type="checkbox"> element, immediately followed by a <div> element with the .modal class.card inside the .modal to display contents<label> or some Javascript to allow users to close the dialog