Example

Returns

mixins

A formula for making an embedded video responsive (oftentimes, an iframe, embed, or object). Apply it to the parent container. Note: Some older players may require some additional spacing for the player controls. You can do so by adding padding-top to the parent container.

Requires

Links

Hides text, but is accessible to screen readers. Best used on single element next to an element that will display. IE: title next to an icon.

Warning: Fallback has been known to mistakenly fail as invalid CSS, and might fail completely in Opera Mini with the text fallback completely obscured. General best practice in many cases, for icon/text pairs for example, is to use two elements and use appropriate hidden or invisible styles for the text.

Links

Shorthand method for applying margin while using the familiar multi-value declarations while also providing a null option to display only needed values.

Parameters

$value

Number[unit]

Default: —none

Takes 1-4 values, following convention of traditional CSS shorthand properties for margin, padding, etc. One notable improvement: You can use the shorthand and still leave some values blank. Do so by placing an 'n' in place of any numeral.

Links

Shorthand method for applying padding while using the familiar multi-value declarations while also providing a null option to display only needed values.

Parameters

$value

Number[unit]

Default: —none

Takes 1-4 values, following convention of traditional CSS shorthand properties for margin, padding, etc. One notable improvement: You can use the shorthand and still leave some values blank. Do so by placing an 'n' in place of any numeral.

Parameters

$value

Number[unit]

Default: —none

Takes 1-4 values, following convention of traditional CSS shorthand properties for margin, padding, etc. One notable improvement: You can use the shorthand and still leave some values blank. Do so by placing an 'n' in place of any numeral.

Links

Parameters

$value

Number[unit]

Default: —none

Takes 1-4 values, following convention of traditional CSS shorthand properties for margin, padding, etc. One notable improvement: You can use the shorthand and still leave some values blank. Do so by placing an 'n' in place of any numeral.

Parameters

$value

Number[unit]

Default: —none

Takes 1-4 values, following convention of traditional CSS shorthand properties for margin, padding, etc. One notable improvement: You can use the shorthand and still leave some values blank. Do so by placing an 'n' in place of any numeral.

Parameters

Takes 1-4 values, following convention of traditional CSS shorthand properties for margin, padding, etc. One notable improvement: You can use the shorthand and still leave some values blank. Do so by placing an 'n' in place of any numeral.

Links

Use SVGs as background images with the proper PNG fallbacks. You'll need to set the display (inline-block or block) and a height/width for the container. Also, before using, set a default image path if you wish by overriding the empty $default-img-path variable in your project's settings or variables file.

For full support, produce your graphic with highest resolution in mind, and export:

A responsive-ready SVG named {file-name}.svg

A highest-resolution PNG named {file-name}.png

A 1x-resolution PNG named {file-name}-ie.png

Parameters

$bg-name

String

Default: —none

Name of the image file without extension. Include a path if you have not set a default $img-path variable or if you want to use a unique path.