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: http://sassmeister.com/gist/8047633.
+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: http://alistapart.com/article/creating-intrinsic-ratios-for-video
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: http://codepen.io/anon/pen/urhmI
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')