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

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

1. The value of `$float-prefix` will only be used if `$include-floats` is set to `true`.
2. The value of `$clearfix-name` will only be used if `$include-clearfix` is set to `true`.
3. The value of `$center-block-name` will only be used if `$include-center-block` is set to `true`.

## Close icon

The utility module's close icon uses a custom class and a few variable to customize its appearance.

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

make-border-generic
Parameter | Type | Description | Sample value
--- | --- | --- | ---
$border-generic-name | String | Class name for the generic border class | 'bordered'

### Sample usage

    @include make-border-generic ('bordered');

make-border-radial-style
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);

make-box-shadow-generic
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 definitions
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.

make-margin-responsive
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);

make-padding-responsive
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 definitions
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.

make-hidden-responsive
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');

make-visually-hidden-responsive
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.