Utility
The utility module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.
Quick overview
Every website or app has different needs and no CSS framework can predict them all. The utility module addresses this issue by providing you with a handful of utility and helper classes to make common, repetitive declarations easier. These classes include, but are not limited to, generic border styling and shadows, some responsive sizing and spacing utilities and a few other things, like a close icon, breadcrumbs styling and visiblity helpers for screen readers.
Quick start
To customize the utility 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).
Visibility helpers & legacy features
The utility module's visiblity helpers use a couple of custom classes, while certain legacy features are also available via certain variables and custom class definitions.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $hidden-name | String | Class name for hidden elements | 'hidden' |
| $visually-hidden-name | String | Class name for visually hidden elements | 'visually-hidden' |
| $include-floats | Logical | Enables floats (legacy feature)1 | false |
| $float-prefix | String | Class prefix for float classes1 | 'float' |
| $include-clearfix | Logical | Enables the clearfix (legacy feature)2 | false |
| $clearfix-name | String | Class name for clearfix2 | 'clearfix' |
| $include-center-block | Logical | Enables the center block (legacy feature)3 | false |
| $center-block-name | String | Class name for center block3 | 'center-block' |
Notes:
- The value of
$float-prefixwill only be used if$include-floatsis set totrue. - The value of
$clearfix-namewill only be used if$include-clearfixis set totrue. - The value of
$center-block-namewill only be used if$include-center-blockis set totrue.
Breadcrumbs
The utility module's breadcrumbs use a custom class and a few varaibles to allow you to customize their appearance.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $breadcrumbs-name | String | Class name for the breadcrumbs component | 'breadcrumbs' |
| $breadcrumbs-back-color | Color | Background color for the breadcrumbs component | #e0e0e0 |
| $breadcrumbs-margin | Margin | Margin for the breadcrumbs component | 10px |
| $breadcrumbs-height | Height | Height for the breadcrumbs component | 32px |
| $breadcrumbs-separator-width | Width | Width of the breadcrumbs component's separator | 2px |
| $breadcrumbs-border-style | Border | Border style for the breadcrumbs component | 1px solid #bdbdbd |
| $breadcrumbs-border-radius | Border radius | Border radius for the breadcrumbs component | 4px |
| $breadcrumbs-box-shadow | Box shadow | Box shadow for the breadcrumbs component | 0 1px 3px rgba(0,0,0, 0.1) |
Close icon
The utility module's close icon uses a custom class and a few variable to customize its appearance.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $close-icon-name | String | Class name for the close icon component | 'close' |
| $close-icon-size | Font size | Size of the close icon component | 32px |
| $close-icon-back-color | Color | Background color for the close icon component | #e0e0e0 |
| $close-icon-fore-color | Color | Foreground color for the close icon component | #212121 |
Generic border & shadow mixins
The utility module contains a few mixins for creating generic borders, border styles and shadows.
| Mixin | Description |
|---|---|
| make-border-generic ($border-generic-name) | Creates a new class that applies a generic border, based on the specified value. |
| make-border-radial-style ($border-radial-name, $border-radial-radius) | Creates a new class that applies a generic radial border, based on the specified values. |
| make-box-shadow-generic ($box-shadow-name, $box-shadow-value) | Creates a new class that applies a generic box shadow, based on the specified values. |
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $border-generic-name | String | Class name for the generic border class | 'bordered' |
Sample usage
@include make-border-generic ('bordered');
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $border-radial-name | String | Class name for the generic radial border class | 'rounded' |
| $border-radial-radius | Border radius | Border radius for the generic radial border class | 2px |
Sample usage
@include make-border-radial-style ('rounded', 2px);
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $box-shadow-name | String | Class name for the generic box shadow class | 'shadow-small' |
| $box-shadow-value | Box shadow | Box shadow for the generic box shadow class | 0 1px 3px rgba(0,0,0, 0.1) |
Sample usage
@include make-box-shadow-generic ('shadow-small', 0 1px 3px rgba(0,0,0, 0.1));
Responsive sizing & spacing mixins
The utility module contains a couple of mixins for creating responsive sizing and spacing classes.
| Mixin | Description |
|---|---|
| make-margin-responsive ($margin-name, $margin-small-value, $margin-medium-value, $margin-large-value, $margin-medium-breakpoint, $margin-large-breakpoint, $margin-use-four-step-grid, $margin-small-breakpoint, $margin-extra-small-value) | Creates a responsive margin class using the specified values. |
| make-padding-responsive ($padding-name, $padding-small-value, $padding-medium-value, $padding-large-value, $padding-medium-breakpoint, $padding-large-breakpoint, $padding-use-four-step-grid, $padding-small-breakpoint, $padding-extra-small-value) | Creates a responsive padding class using the specified values. |
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $margin-name | String | Class name for the responsive margin class | 'urgent' |
| $margin-small-value | Margin | Margin of the responsive margin class on smaller screens | 4px |
| $margin-medium-value | Margin | Margin of the responsive margin class on medium-sized screens | 6px |
| $margin-large-value | Margin | Margin of the responsive margin class on larger screens | 8px |
| $margin-medium-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive margin class for medium-sized screens | 768px |
| $margin-large-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive margin class for larger screens | 1280px |
| $margin-use-four-step-grid | Logical | (Optional) Enables the use of the four-step grid for the responsive margin class | false |
| $margin-small-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive margin class for smaller screens (four-step grid only) | 480px |
| $margin-extra-small-value | Margin | (Optional) Margin of the responsive margin class on extra small screens (four-step grid only) | 2px |
Sample usage
@include make-margin-responsive ('responsive-margin', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $padding-name | String | Class name for the responsive padding class | 'urgent' |
| $padding-small-value | Padding | Padding of the responsive padding class on smaller screens | 4px |
| $padding-medium-value | Padding | Padding of the responsive padding class on medium-sized screens | 6px |
| $padding-large-value | Padding | Padding of the responsive padding class on larger screens | 8px |
| $padding-medium-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive padding class for medium-sized screens | 768px |
| $padding-large-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive padding class for larger screens | 1280px |
| $padding-use-four-step-grid | Logical | (Optional) Enables the use of the four-step grid for the responsive padding class | false |
| $padding-small-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive padding class for smaller screens (four-step grid only) | 480px |
| $padding-extra-small-value | Padding | (Optional) Padding of the responsive padding class on extra small screens (four-step grid only) | 2px |
Sample usage
@include make-padding-responsive ('responsive-padding', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);
Responsive visibility helper mixins
The utility module contains a couple of mixins for creating responsive visibility helpers.
| Mixin | Description |
|---|---|
| make-hidden-responsive ($hidden-prefix, $hidden-medium-breakpoint, $hidden-large-breakpoint,$hidden-small-suffix, $hidden-medium-suffix, $hidden-large-suffix, $hidden-use-four-step-grid, $hidden-small-breakpoint, $hidden-extra-small-suffix) | Creates a responsive class for hiding elements using the specified values. |
| make-visually-hidden-responsive ($visually-hidden-prefix, $visually-hidden-medium-breakpoint, $visually-hidden-large-breakpoint,$visually-hidden-small-suffix, $visually-hidden-medium-suffix, $visually-hidden-large-suffix, $visually-hidden-use-four-step-grid, $visually-hidden-small-breakpoint, $visually-hidden-extra-small-suffix) | Creates a responsive class for visually hiding elements using the specified values. |
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $hidden-prefix | String | Class prefix for the responsive hiding class | 'hidden' |
| $hidden-medium-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive hiding class for medium-sized screens | 768px |
| $hidden-large-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive hiding class for larger screens | 1280px |
| $hidden-small-suffix | String | Suffix of the responsive hiding class on smaller screens | 'sm |
| $hidden-medium-suffix | String | Suffix of the responsive hiding class on medium-sized screens | 'md' |
| $hidden-large-suffix | String | Suffix of the responsive hiding class on larger screens | 'lg' |
| $hidden-use-four-step-grid | Logical | (Optional) Enables the use of the four-step grid for the responsive hiding class | false |
| $hidden-small-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive hiding class for smaller screens (four-step grid only) | 480px |
| $hidden-extra-small-suffix | String | (Optional) Suffix of the responsive hiding class on extra small screens (four-step grid only) | 'xs' |
Sample usage
@include make-hidden-responsive ('hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $visually-hidden-prefix | String | Class prefix for the responsive visual hiding class | 'visually-hidden' |
| $visually-hidden-medium-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive visual hiding class for medium-sized screens | 768px |
| $visually-hidden-large-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive visual hiding class for larger screens | 1280px |
| $visually-hidden-small-suffix | String | Suffix of the responsive visual hiding class on smaller screens | 'sm |
| $visually-hidden-medium-suffix | String | Suffix of the responsive visual hiding class on medium-sized screens | 'md' |
| $visually-hidden-large-suffix | String | Suffix of the responsive visual hiding class on larger screens | 'lg' |
| $visually-hidden-use-four-step-grid | Logical | (Optional) Enables the use of the four-step grid for the responsive visual hiding class | false |
| $visually-hidden-small-breakpoint | Breakpoint | (Optional) Breakpoint of the responsive visual hiding class for smaller screens (four-step grid only) | 480px |
| $visually-hidden-extra-small-suffix | String | (Optional) Suffix of the responsive visual hiding class on extra small screens (four-step grid only) | 'xs' |
Sample usage
@include make-visually-hidden-responsive ('visually-hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');
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.