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.


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.


Variables
VariableTypeDescriptionSample value
$mark-back-colorColor Background color for <mark> elements#0277bd
$mark-fore-colorColor Text color for <mark> elements#fafafa
$mark-font-sizeFont size Font size for <mark> elements95%
$mark-line-heightLine height Line height for <mark> elements1
$mark-border-styleBorder Border style for <mark> elements1px solid #0277bd
$mark-border-radiusBorder radius Border radius for <mark> elements2px
$mark-paddingPadding Padding for <mark> elements2px 4px
$mark-marginMargin Margin for <mark> elements2px
$mark-box-shadowBox shadow Box shadow for <mark> elements0 1px 3px rgba(0,0,0, 0.1)
$mark-inline-block-nameString Class name for inline block <mark> elements'inline-block'

Toasts

The contextual module contains custom classes and styles for defining toast messages.


Variables
VariableTypeDescriptionSample value
$toast-nameString Class name for toast components'toast'
$toast-back-colorColor Background color for toast components#424242
$toast-fore-colorColor Text color for toast components$fore-color
$toast-border-styleBorder Border style for toast components1px solid #bdbdbd
$toast-border-radiusBorder radius Border radius for toast components8px
$toast-paddingPadding Padding for toast components12px 16px
$toast-box-shadowBox shadow Box shadow for toast components0 1px 3px rgba(0,0,0, 0.1)
$toast-bottomPosition bottom Position bottom for toast components20px

Tooltips

The contextual module contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.


Variables
VariableTypeDescriptionSample value
$include-tooltipLogical Enables tooltip components1true
$tooltip-nameString Class name for tooltip components1'tooltip'
$tooltip-back-colorColor Background color for tooltip components1$fore-color
$tooltip-fore-colorColor Text color for tooltip components1#fafafa
$tooltip-border-radiusBorder radius Border radius for tooltip components12px
$tooltip-paddingPadding Padding for tooltip components112px 16px
$tooltip-tail-sizePosition left Left position for tooltip components's tail (calculated from value)16px
$tooltip-box-shadowBox shadow Box shadow for tooltip components10 1px 3px rgba(0,0,0, 0.1)
$tooltip-bottom-nameString Class name for animated tooltip components1'bottom'

Notes:

  1. The values used in the tooltip components will only be used if $include-tooltip is set to true.

Modals

The contextual module contains a flag to enable or disable modals, a custom class for creating them and other variables for style customization.


Variables
VariableTypeDescriptionSample value
$include-modalLogical Enables modal components1true
$modal-nameString Class name for modal components1'modal'
$modal-back-colorColor Background color for modal components1black
$modal-back-opacityOpacity Background opacity for modal components10.4
$modal-close-nameString Class name of the close button of the modal component1'close'
$modal-close-topPosition top Top position of the close button of the modal component112px
$modal-close-rightPosition right Right position of the close button of the modal component14px

Notes:

Text highlighting mixins

The contextual module contains a couple of mixins for adding custom styles to <mark> elements (color and style variants).


Mixin definitions
MixinDescription
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.

make-mark-alt-color
ParameterTypeDescriptionSample value
$mark-alt-nameString Class name for the <mark> color variant'secondary'
$mark-alt-back-colorColor Background color for the <mark> color variant#e53935
$mark-alt-fore-colorColor (Optional) Text color for the <mark> color variant#fafafa

Sample usage

@include make-mark-alt-color ('secondary', #e53935, #fafafa);

make-mark-alt-style
ParameterTypeDescriptionSample value
$mark-alt-nameString Class name for the <mark> style variant'tag'
$mark-alt-border-styleBorder Border style for the <mark> style variant1px solid #0277bd
$mark-alt-border-radiusBorder radius Border radius for the <mark> style variant200px
$mark-alt-paddingPadding Padding for the <mark> style variant4px 8px
$mark-alt-font-sizeFont size Font size for the <mark> style variant95%
$mark-alt-line-heightLine height Line height for the <mark> style variant1
$mark-alt-box-shadowMargin Box shadow for the <mark> style variant0 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 definitions
MixinDescription
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.

make-toast-alt-color
ParameterTypeDescriptionSample value
$toast-alt-nameString Class name for the toast color variant'warning'
$toast-alt-back-colorColor Background color for the toast color variant#ffca28
$toast-alt-fore-colorColor (Optional) Text color for the toast color variant#212121

Sample usage

@include make-toast-alt-color ('warning', #ffca28, #212121);

make-toast-alt-style
ParameterTypeDescriptionSample value
$toast-alt-nameString Class name for the toast style variant'small'
$toast-alt-border-styleBorder Border style for the toast style variant1px solid #bdbdbd
$toast-alt-border-radiusBorder radius Border radius for the toast style variant6px
$toast-alt-paddingPadding (Optional) Padding for the toast style variant9px 12px
$toast-alt-box-shadowBox shadow (Optional) Box shadow for the toast style variant0 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 definitions
MixinDescription
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.

make-tooltip-alt-color
ParameterTypeDescriptionSample value
$tooltip-alt-nameString Class name for the tooltip color variant'primary'
$tooltip-alt-back-colorColor Background color for the tooltip color variant#0277bd
$tooltip-alt-fore-colorColor (Optional) Text color for the tooltip color variant#fafafa

Sample usage

@include make-tooltip-alt-color ('primary', #0277bd, #fafafa);

make-tooltip-alt-style
ParameterTypeDescriptionSample value
$tooltip-alt-nameString Class name for the tooltip style variant'large'
$tooltip-alt-tail-sizePosition left Left position for tooltip style variant's tail (calculated from value)8px
$tooltip-alt-border-radiusBorder radius Border radius for the tooltip style variant4px
$tooltip-alt-paddingPadding (Optional) Padding for the tooltip style variant15px 20px
$tooltip-alt-box-shadowBox Shadow (Optional) Box shadow for the tooltip style variant0 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.