General
mixins
clearfix
@mixin clearfix() { ... }Description
Clearfix with an overflow.
Parameters
None.
Used by
- [mixin]
float-list - [mixin]
media-box - [mixin]
media-box__content
Links
expand-click-area
@mixin expand-click-area() { ... }Description
Sometimes icons and small buttons need a slightly larger hit area, particularly on touch interfaces. This adds a before pseudo element that increases the click area by 10px in every direction.
Parameters
None.
Links
float-list__item
@mixin float-list__item() { ... }Description
Use on list items in <= IE8
Parameters
None.
Used by
- [mixin]
float-list
float-list
@mixin float-list() { ... }Description
Extends unstyled-list to remove the default styles from a list and its children, and floats all the children left.
Parameters
None.
Requires
- [mixin]
float-list__item - [mixin]
unstyled-list - [mixin]
clearfix
fluid-media-wrapper__media
@mixin fluid-media-wrapper__media() { ... }Description
For use with fluid-media-wrapper where the child is not an embed, iframe, or object element.
Parameters
None.
Used by
- [mixin]
fluid-media-wrapper
fluid-media-wrapper
@mixin fluid-media-wrapper($ratio: 16 9) { ... }Description
A fluid media wrapper provides the ability to maintain a consistent aspect ratio for video and media content while allowing that content to scale to a maximum width in a responsive layout.
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$ratio | an aspect ratio to maintain | List | 16 9 |
Throws
$ratiomust be a list with two values.
Requires
- [mixin]
fluid-media-wrapper__media
image-replacement
@mixin image-replacement() { ... }Description
Provides an accessible way to hide text where background images are used on that element.
Parameters
None.
Links
inline-list__item
@mixin inline-list__item() { ... }Description
Use on list items in <= IE8
Parameters
None.
Used by
- [mixin]
inline-list
inline-list
@mixin inline-list() { ... }Description
Extends unstyled-list to remove the default styles from a list and its children, and dislays those children as inline-block elements.
Parameters
None.
Requires
- [mixin]
inline-list__item - [mixin]
unstyled-list
media-box
@mixin media-box() { ... }Description
Display an image beside some other content.
Parameters
None.
Requires
- [mixin]
clearfix
Links
media-box__content
@mixin media-box__content() { ... }Description
The content of the media box.
Parameters
None.
Requires
- [mixin]
clearfix
media-box__aside-left
@mixin media-box__aside-left() { ... }Description
The image (or other) of the media box, shown on the left of content.
Parameters
None.
media-box__aside-right
@mixin media-box__aside-right() { ... }Description
The image (or other) of the media box, shown on the right of content.
Parameters
None.
responsive-image
@mixin responsive-image() { ... }Description
Scalable images.
Parameters
None.
Links
unbulleted-list
@mixin unbulleted-list() { ... }Description
Removes bullet point styles from a list and its children.
Parameters
None.
Used by
- [mixin]
unstyled-list
unstyled-anchor
@mixin unstyled-anchor() { ... }Description
Displays an anchor as plain text.
Parameters
None.
unstyled-input
@mixin unstyled-input() { ... }Description
Strips browser styling from an input.
Parameters
None.
unstyled-list
@mixin unstyled-list() { ... }Description
A list without styling.
Parameters
None.
Requires
- [mixin]
unbulleted-list
Used by
- [mixin]
float-list - [mixin]
inline-list
vertical-align
@mixin vertical-align() { ... }Description
Allows vertical centering of elements with unknown dimensions.
Parameters
None.
Links
vertical-align__child
@mixin vertical-align__child() { ... }Description
The element to be vertically centred.
Parameters
None.