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.
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. All components in this module are fully accessible, so that's another thing not to worry about.
Quick start
To customize the contextual module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).
Text highlighting
The contextual module's styling of <mark> elements is highly customizable.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $mark-back-color | Color | Background color for <mark> elements | #0277bd |
| $mark-fore-color | Color | Text color for <mark> elements | #fafafa |
| $mark-font-size | Font size | Font size for <mark> elements | 95% |
| $mark-line-height | Line height | Line height for <mark> elements | 1 |
| $mark-border-style | Border | Border style for <mark> elements | 1px solid #0277bd |
| $mark-border-radius | Border radius | Border radius for <mark> elements | 2px |
| $mark-padding | Padding | Padding for <mark> elements | 2px 4px |
| $mark-margin | Margin | Margin for <mark> elements | 2px |
| $mark-box-shadow | Box shadow | Box shadow for <mark> elements | 0 1px 3px rgba(0,0,0, 0.1) |
| $mark-inline-block-name | String | Class name for inline block <mark> elements | 'inline-block' |
Toasts
The contextual module contains custom classes and styles for defining toast messages.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $toast-name | String | Class name for toast components | 'toast' |
| $toast-back-color | Color | Background color for toast components | #424242 |
| $toast-fore-color | Color | Text color for toast components | $fore-color |
| $toast-border-style | Border | Border style for toast components | 1px solid #bdbdbd |
| $toast-border-radius | Border radius | Border radius for toast components | 8px |
| $toast-padding | Padding | Padding for toast components | 12px 16px |
| $toast-box-shadow | Box shadow | Box shadow for toast components | 0 1px 3px rgba(0,0,0, 0.1) |
| $toast-bottom | Position bottom | Position bottom for toast components | 20px |
Tooltips
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-tooltip | Logical | Enables tooltip components1 | true |
| $tooltip-name | String | Class name for tooltip components1 | 'tooltip' |
| $tooltip-back-color | Color | Background color for tooltip components1 | $fore-color |
| $tooltip-fore-color | Color | Text color for tooltip components1 | #fafafa |
| $tooltip-border-radius | Border radius | Border radius for tooltip components1 | 2px |
| $tooltip-padding | Padding | Padding for tooltip components1 | 12px 16px |
| $tooltip-tail-size | Position left | Left position for tooltip components's tail (calculated from value)1 | 6px |
| $tooltip-box-shadow | Box shadow | Box shadow for tooltip components1 | 0 1px 3px rgba(0,0,0, 0.1) |
| $tooltip-bottom-name | String | Class name for animated tooltip components1 | 'bottom' |
Notes:
- The values used in the tooltip components will only be used if
$include-tooltipis set totrue.
Modals
The contextual module contains a flag to enable or disable modals, a custom class 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 |
Notes:
- The values used in the modal components will only be used if
$include-modalis set totrue.
Text highlighting mixins
The contextual module contains a couple of mixins for adding custom styles to <mark> elements (color and style variants).
| Mixin | Description |
|---|---|
| make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color) | Creates a new <mark> color variant using the specified values. |
| make-mark-alt-style ($mark-alt-name, $mark-alt-border-style, $mark-alt-border-radius, $mark-alt-padding, $mark-alt-font-size, $mark-alt-line-height, $mark-alt-box-shadow) | Creates a new <mark> style variant using the specified values. |
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $mark-alt-name | String | Class name for the <mark> color variant | 'secondary' |
| $mark-alt-back-color | Color | Background color for the <mark> color variant | #e53935 |
| $mark-alt-fore-color | Color | (Optional) Text color for the <mark> color variant | #fafafa |
Sample usage
@include make-mark-alt-color ('secondary', #e53935, #fafafa);
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $mark-alt-name | String | Class name for the <mark> style variant | 'tag' |
| $mark-alt-border-style | Border | Border style for the <mark> style variant | 1px solid #0277bd |
| $mark-alt-border-radius | Border radius | Border radius for the <mark> style variant | 200px |
| $mark-alt-padding | Padding | Padding for the <mark> style variant | 4px 8px |
| $mark-alt-font-size | Font size | Font size for the <mark> style variant | 95% |
| $mark-alt-line-height | Line height | Line height for the <mark> style variant | 1 |
| $mark-alt-box-shadow | Margin | Box shadow for the <mark> style variant | 0 1px 3px rgba(0,0,0, 0.1) |
Sample usage
@include make-mark-alt-style ('tag', 1px solid #0277bd, 200px, 4px 8px, 95%, 1, 0 1px 3px rgba(0,0,0, 0.1));
Toast mixins
The contextual module contains a couple of mixins for adding custom styles to toasts (color and style variants).
| Mixin | Description |
|---|---|
| make-toast-alt-color ($toast-alt-name, $toast-alt-back-color, $toast-alt-fore-color) | Creates a new toast color variant using the specified values. |
| make-toast-alt-style ($toast-alt-name, $toast-alt-border-style, $toast-alt-border-radius, $toast-alt-padding, $toast-alt-box-shadow) | Creates a new toast style variant using the specified values. |
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $toast-alt-name | String | Class name for the toast color variant | 'warning' |
| $toast-alt-back-color | Color | Background color for the toast color variant | #ffca28 |
| $toast-alt-fore-color | Color | (Optional) Text color for the toast color variant | #212121 |
Sample usage
@include make-toast-alt-color ('warning', #ffca28, #212121);
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $toast-alt-name | String | Class name for the toast style variant | 'small' |
| $toast-alt-border-style | Border | Border style for the toast style variant | 1px solid #bdbdbd |
| $toast-alt-border-radius | Border radius | Border radius for the toast style variant | 6px |
| $toast-alt-padding | Padding | (Optional) Padding for the toast style variant | 9px 12px |
| $toast-alt-box-shadow | Box shadow | (Optional) Box shadow for the toast style variant | 0 1px 3px rgba(0,0,0, 0.1) |
Sample usage
@include make-toast-alt-style ('small', 1px solid #bdbdbd, 6px, 9px 12px, 0 1px 3px rgba(0,0,0, 0.1));
Tooltip mixins
The contextual module contains a couple of mixins for adding custom styles to tooltips (color and style variants).
| Mixin | Description |
|---|---|
| make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color) | Creates a new tooltip color variant using the specified values. |
| make-tooltip-alt-style ($tooltip-alt-name, $tooltip-alt-tail-size, $tooltip-alt-border-radius, $tooltip-alt-padding, $tooltip-alt-box-shadow) | Creates a new tooltip style variant using the specified values. |
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $tooltip-alt-name | String | Class name for the tooltip color variant | 'primary' |
| $tooltip-alt-back-color | Color | Background color for the tooltip color variant | #0277bd |
| $tooltip-alt-fore-color | Color | (Optional) Text color for the tooltip color variant | #fafafa |
Sample usage
@include make-tooltip-alt-color ('primary', #0277bd, #fafafa);
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $tooltip-alt-name | String | Class name for the tooltip style variant | 'large' |
| $tooltip-alt-tail-size | Position left | Left position for tooltip style variant's tail (calculated from value) | 8px |
| $tooltip-alt-border-radius | Border radius | Border radius for the tooltip style variant | 4px |
| $tooltip-alt-padding | Padding | (Optional) Padding for the tooltip style variant | 15px 20px |
| $tooltip-alt-box-shadow | Box Shadow | (Optional) Box shadow for the tooltip style variant | 0 1px 3px rgba(0,0,0, 0.1) |
Sample usage
@include make-tooltip-alt-style ('large', 8px, 4px, 15px 20px, 0 1px 3px rgba(0,0,0, 0.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.