Github

Contextual

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.


Quick overview

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.


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">

Text highlighting

This is some text with a highlight.

Apart from the primary highlight style, there are also secondary and tertiary styles for highlighting.


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.


Finally, you can create contextual tags like this or 7.


To add simple highlights in your text, you can use the <mark> 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 .secondary or .tertiary class to a <mark> element. For longer pieces of text that need highlighting, consider adding the .inline-block class to make them stand out even more. Finally, you can create contextual tags, using the .tag class.

Sample code

<mark>primary</mark>
<mark class="secondary">secondary</mark>
<mark class="tertiary">tertiary</mark>
<mark class="inline-block">long highlight text...</mark>
<mark class="tag">tag</mark>

Notes

  • Try to use elements with the .inline-block 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.
  • <mark> elements, along with their supporting classes (except for .inline-block) can be easily used in paragraphs, headings and other elements, as they scale according to their parent element.
<mark class="tag tertiary">green tag</mark>
<!-- or -->
<mark class="inline-block secondary">red chunk</mark>

Do: You can combine any of the contextual color classes (.secondary or .tertiary) with the .tag or .inline-block class.

<mark class="secondary tertiary">no, no</mark>
<!-- or -->
<mark class="inline-block tag">oh, no</mark>

Don't: Avoid combining two contextual color classes or a .tag and an .inline-block, as these combinations might result in unexpected behavior.

<mark class="inline-block">some
  <mark class="secondary">text</mark>
</mark>

Do: You can only nest a <mark> inside another if the outer one is of the .inline-block class. You can color the inner <mark> using any of the contextual color classes or even make it a .tag. Be careful, however, to not make the inner <mark> an .inline-block as well.

<mark>some
  <mark class="secondary">text</mark>
</mark>

Don't: Avoid using nested <mark> elements, unless the outer <mark> element is an .inline-block.

Toasts

I'm a toast message!
I'm a small toast message!
I'm a large toast message!

Toasts aim to help bridge the gap between web and native applications on mobile devices, by displaying native-looking toast messages. To create a toast, wrap some text inside a <span> element with the .toast class. Toasts appear at the bottom of the screen on top of everything else. If you want to create smaller or larger toast messasges, you can add the .small or .large classes respectively.

Sample code

<span class="toast">This is a normal toast message!</span>
<span class="toast small">This is a large toast message!</span>
<span class="toast large">This is a small toast message!</span>

Notes

  • Toast 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.
  • If you want to create your own color or size variants for toast messages, check out the customization page.
<span class="toast small large">Not a good toast</span>

Don't: Avoid combining two toast size variants, as this might cause unexpected behavior.

Tooltips


Hover over this text to see a tooltip!


Hover over this text to see a reverse tooltip!


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 .tooltip class (our choice is usually a <span> element, but your needs may differ) and add an aria-label 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 .bottom class to them.

Sample code

<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>

Notes

  • Tooltips are built to be accessible and should display properly on screenreaders.
  • If you are not satisfied with the default tooltip colors, please check out the customization page for instuctions on how to create your own tooltip variants.
  • Remember to always add the aria-label attribute, otherwise your tooltip will not have any text to show.

Modals




Modal

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.

Sample code

<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>

Notes

  • You can use any styles you want from the card module to create different dialogs based on context (e.g. alerts, warnings etc.).
  • Remember to add a <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.
  • You can place your modal dialog anywhere on your page, as long as the structure is not altered. You can also toggle it from anywhere on a page.
<input id="modal-toggle" type="checkbox"/>
<label for="modal-toggle">Show modal</label>
<div class="modal" role="dialog" aria-labelledby="dialogTitle">
  <div class="card">
    <label for="modal-toggle" class="close"></label>
    <h3 class="section" id="dialogTitle">Bad Modal</h3>
  </div>
</div>

Do: You can use the role="dialog" to add accessibility to your modal dialogs. Remember to properly label it and manage keyboard focus, as required.

<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.