Permalink
Fetching contributors…
Cannot retrieve contributors at this time
225 lines (206 sloc) 6.12 KB

Responsive

Responsive classes for mobile, tablet and desktop resolutions.

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

Print Classes

Use these for toggling content for print.

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

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.