Responsive utility classes

There are a collection of variables and classes to allow you to control the visibility of certain elements at a varienty of screen widths.

Breakpoints

These are defined in _config.variables.scss and can be used in your own media queries.

Mixins

Use with the breakpoint variables for easier media queries. Be aware that IE8 will only get desktop styles.

Respond min

Usage

respond-min($width)

Example

@include respond-min($screen-desktop) {
    ...
}

Respond max

Usage

respond-max($width)

Example

@include respond-max($screen-tablet) {
    ...
}

Respond min-max

Usage

respond-min-max($min-width, $max-width, $reverse: null) {

Example

@include respond-min-max($screen-tablet, $screen-desktop) {
    ...
}

Visibility

Use the following utility classes to control the visibility of elements at certain screen sizes.