Helpers

Media object

Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et.

<div class="ui-media">
  <div class="ui-media__image">
    <img src="http://placehold.it/120x120" />
  </div>
  <p class="ui-media__body">
    Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et.
  </p>
</div>

Measurement units

Maintain a strong baseline and vertical grid with the unit function. Each unit is a multiple of the em equivalent of 30px.

Example:

padding: unit(1) unit(0.5) unit(2) unit(0.5);

Match

Given a SASS map key, find it's value. Source

Parameters:

$haystack - A SASS map
$needle - A key in $haystack

Example:

z-index: match($element, modal);

Opposite position

Returns the opposite position of a the argument.

Parameters

$position - Any valid CSS position value. Returns a string with the opposite position

Example:

position: opposite-position(bottom); // Returns top

Vertically center mixin

Vertically centers text within an element of a defined height. Text should be single-line text.

Parameters:

$height - Overall height of the element
$min - Boolean. Use min-height instead of height. Default is false.
$line-height - line-height for the element. This optional param is helpful if your element has top or bottom padding.

Example:

@include vertically-center(unit(1));

Compass CSS arrow

Makes a little pointer arrow on the element. Source

Parameters:

$position - String. CSS position (top, right, bottom, left). Default is top.
$size - Unit. Any border-accepted length (px, em, etc., not %). Default is 7px.
$color - Any color. Default is white.
$border-width - Unit. Any border-accepted length with units comparable to $size. Defautl is 1px.
$border-color - Any color. Default is $borderColor1.
$border-style - String. CSS border style (dotted, dashed, solid, double, groove, ridge, inset, outset). Default is solid.

Example:

@include css-arrow(top, 10px, $colorGray6, $border-color: $colorBorder2);

Ellipsis

Ellipsizes the element.

Parameters:

$width - Unit. Optional, defines the max-width of the element.

Example:

@include ellipsis;

IE9 only

Elements or rules defined within the mixin will compile as children of .lte-ie9 and only render in IE9.

Example:

@include ie9 { ... }

No color link

Creates a link with a specified default state color, that changes to a link color on hover.

Parameters:

$color - Any color. Default state color. Default is $colorGray4.
$colorHover - Any color. Hover state color. Default is $colorPrimary

Example:

@include no-color-link($colorText);

Air traffic controller

Helps organize z-index. This should make use of Sass maps if Rails can ever get around to updating to 3.3.

Parameters:

$element - Corresponds to the element being stacked. Accepted values are overlay, modal, alert, flash, nav, panels, header, content
$step - Integer. Amount above or below $element to stack the element.

Example:

@include z-index(modal, 1); // result is z-index: 501;

High performance fixed positioning

Ensures that fixed items don't need to be repainted on the DOM when you scroll. Not supported by older broswers.

Example:

@include position-fixed-high-performance;

Shadows

Based on "height" of the floating element off the page. Higher the value, the darker/more diffuse/more offset the shadow is.

Parameters

$height - integer. 1 is the default value.

Example:

@include box-shadow(2);

Number alignment

Neatly aligns numbers in tables. For more...

Example

@include number-alignment;

Breakpoint

Use the breakpoint mixin to set screen-width dependant styles. You can find all breakpoint variables under Grid.

Parameters:

$width - Unit. Defines the point at which the breakpoint occurs.
$minmax - Sets whether the styles apply to screen widths larger (min) or smaller (max) than the $width. Default is max.

Example

@include breakpoint($breakSmall) { ... }

Example:

<div class="pull-right">...</div>
<div class="pull-left">...</div>

Clearfix

You got your floats in your markup, so you might want a clearfix.

Example:

<div class="clearfix"></div>