Responsive Mixins

These functions are used to provide some consistency around how we handle responsive states.

Enable styles at a certain viewport

Always use this mixin to apply breakpoints so we can support legacy browsers.

You can pass in named arguments or integers. Named argument options are: narrow-view (380px), medium-view (600px), wide-view(980) larger-than-ipad(1025px) and cinema-view(1100).

Example of use:

+respond-to($screen-width, $fallback: true)

Enable styles at a certain viewport with legacy .ie7 and .ie8 style output


Calculate padding for a proportional wrapper

Force an intrinsic ratio based on the width of the containing block to used as a wrapper for fixed aspect-ratio content.

More information:

+intrinsic-ratio($ratioX, $ratioY)

Best fit media to a fixed size wrapper

Uses transforms (where available) to 'best fit' an image or video element to its container. Best used with the intrinsic ratio mixin.

Example of use:


Responsive Images using CSS Backgrounds.

Using this mixin requires three versions of the image to be available at 480,700 & 1600px widths.

Using this mixin will also covering Retina & IE8 support.

+responsive-image($path: '', $extension: 'jpg')