Responsive

Responsive classes for mobile, tablet and desktop resolutions.

Top

Usage

For easier mobile and tablet development, a handful of utility classes are available for showing and hiding content based on media queries and breakpoints. These classes should be used to complement a layout, not for structuring it.

Display Classes

Use these for toggling content based on the viewport width.

Extra Small (0px-640px) Small (641px-960px) Medium (961px-1280px) Large (1281px-1680px) Extra Large (1680px+)
.hide-xsmall Hidden Visible Visible Visible Visible
.hide-small Visible Hidden Visible Visible Visible
.hide-medium Visible Visible Hidden Visible Visible
.hide-large Visible Visible Visible Hidden Visible
.hide-xlarge Visible Visible Visible Visible Hidden
.show-xsmall Visible Hidden Hidden Hidden Hidden
.show-small Hidden Visible Hidden Hidden Hidden
.show-medium Hidden Hidden Visible Hidden Hidden
.show-large Hidden Hidden Hidden Visible Hidden
.show-xlarge Hidden Hidden Hidden Hidden Visible
The breakpoints for these responsive display classes can be altered through the $breakpoint-range-* Sass variables.

Orientation Classes

Use these for toggling content based on device orientation.

Portrait Landscape
.hide-landscape Visible Hidden
.hide-portrait Hidden Visible
.show-landscape Hidden Visible
.show-portrait Visible Hidden

Retina Classes

Use these for toggling content based on screen quality (retina and HD displays).

Standard-Def (SD) High-Def (HD)
.hide-retina Visible Hidden
.show-retina Hidden Visible

Use these for toggling content for print.

Browser Print
.hide-print Visible Hidden
.show-print Hidden Visible
Top

Variables

Variable Default Description
$responsive-design mobile Determines which type of device to target; accepts mobile or desktop. If mobile is used, responsive mixins will use min-width breakpoints in media queries. If desktop is used, then max-width breakpoints are used.