@mixin segment() { ... }

Use to separate components on the page.

Modifiers

• --grey modifier to change the background color

This mixin takes no parameters.

.segment {
  @include segment();
}

@mixin container() { ... }

Create a container element to wrap segments

Modifiers

• --slim removes the gutters
• --narrow smaller width
• --half half of the max width

This mixin takes no parameters.

@mixin icon-before($uri) { ... }

Use in an icon to add it to the before selector

Parameters

$uri

string Required

The icon uri to add

@mixin clearfix() { ... }

A simple clearfix helper

This mixin takes no parameters.

@mixin respond-to($screen-width, $method: 'min') { ... }

Set up a media query passing a value to use for min width

Parameters

$screen-width

number Required

A value for the media query

$method

string Default:'min'

'min' or 'max'

.header {
    @include respond-to($min-1290) {

    }
}

@mixin best-fit-padding($imageWidth, $imageHeight) { ... }

Providing an image width and height, provides the correct aspect ratio via padding-bottom % This should be used with an element of a height of 0, so that the height is determined by the padding-bottom rather than the element's height property

Parameters

$imageWidth

number Required

The width of the image

$imageHeight

number Required

The height of the image

@mixin hardware-acceleration() { ... }

Hack to force GPU rendering (most in the community argue this should be used quite sparingly!!)

This mixin takes no parameters.

@mixin z-layer() { ... }

A mixin to help clean up z-index madness. Options are: below, default, middle, top, and modal [/doc]

This mixin takes no parameters.

@mixin divider() { ... }

Standard divider used between sections

This mixin takes no parameters.

@mixin component-width() { ... }

Sets max width and centers component

This mixin takes no parameters.

@mixin author-image($mobile, $orientation: 'vertical') { ... }

Style the author's image

Parameters

$mobile

boolean Required

No description available.

$orientation

string Default:'vertical'

'vertical' or 'horizontal'

@mixin author-creds($mobile) { ... }

Style the author's credentials

Parameters

$mobile

boolean Required

No description available.

@mixin author-name($mobile) { ... }

Style the author's name

Parameters

$mobile

boolean Required

No description available.

@mixin author-title($mobile) { ... }

Style an author's Title

Parameters

$mobile

boolean Required

No description available.

@mixin see-more-link() { ... }

Used for the see more links at the bottom of components

This mixin takes no parameters.

.survival_guide__button-container {
  @include see-more-link;
}

@mixin css-arrow-central() { ... }

Css arrow, currently only used in date picker

This mixin takes no parameters.

@mixin size() { ... }

This mixin takes no parameters.

@mixin placeholder() { ... }

Placeholder

Outputs vendor-prefixed placeholders for styling. Must be nested in a rule-set.

This mixin takes no parameters.

Usage
input {
  @include placeholder {
    color: #999;
  }
}

@mixin visuallyhidden() { ... }

Visually Hidden

Hide only visually, but have it available for screen readers http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

This mixin takes no parameters.

@mixin form-control($type: "text") { ... }

Includes a form control

Parameters

$type

String Default:"text"

The input type of the control; accepts "text" or "select"

textarea,
input[type="text"] {
  @include form-control;
}

select {
  @include form-control("select");
}

@mixin fade-edge($side, $offset: 0, $width: 3rem) { ... }

Apply to a :before or :after psuedo element to create a soft fade on an edge. Typically used to hide overflow and therefore best used with overflow: hidden; and white-space: nowrap;.

Parameters

$side

String Required

left or right

$offset

String Default:0

Amount of offset

$width

String Default:3rem

Width of the fade

.text {
  color: #333;
  font-size: 1em;
  overflow: hidden;
  white-space: nowrap;
  width: 400px;

  &:after {
    @include fade-edge("right");
  }
}

@mixin h1-props() { ... }

This mixin takes no parameters.

@mixin h3-props() { ... }

TODO: Refactor this

This mixin takes no parameters.

@mixin h4-props() { ... }

TODO: Refactor this

This mixin takes no parameters.

@mixin h5-props() { ... }

TODO: Refactor this

This mixin takes no parameters.

@mixin h1() { ... }

Mixin for main headers

This mixin takes no parameters.