Mixin Reference

The following mixins are available throughout Base and set in _mixins.less. For more information on the grid mixins see Using the Grid.

Visual Elements

• .arrow-[up,down,left,right](@size: 5px, @color: #000) - CSS arrow/triangle trick adopted from http://css-tricks.com/snippets/css/css-triangle/

Shortcuts

• .size(@height, @width) - Shorthand way to set width and height.
• .hide-text() - removes font size, color and shadow
• .font(@size: 100%, @weight: normal, @lineHeight: 150%) - shorthand
• .inline-block() - sets display: inline-block with the IE hack

CSS3 Prefixes

Animation

• .animation(@args)
• .animation-delay(@delay)
• .animation-direction(@direction)
• .animation-duration(@duration)
• .animation-iteration-count(@count)
• .animation-name(@name)
• .animation-play-state(@state)
• .animation-timing-function(@function)

Background Size

• .background-size(@args)

Box Shadows

• .box-shadow(@args)
• .inner-shadow(@args) - adds inset

Box Sizing

• .box-sizing(@args)

CSS3 Columns (poor browser support)

• .columns(@args)
• .column-count(@count)
• .column-gap(@gap)
• .column-width(@width)
• .column-rule(@args)

Gradients

• #gradient .horizontal(@startColor: #555, @endColor: #333)
• #gradient .vertical(@startColor: #555, @endColor: #333)
• #gradient .directional(@startColor: #555, @endColor: #333, @deg: 45deg)
• #gradient .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f)
• #gradient .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f)
• #gradient .radial(@innerColor: #555, @outerColor: #333)

IE Reset

• .reset-filter() - resets IE filters used for opacity and gradients

Opacity

• .opacity(@factor)

Transforms

• .transform(@args)
• .translateHardware(@x, @y) - attempts to force hardware acceleration.

Transitions

• .transition(@args:200ms)
• .transition-delay(@delay:0)
• .transition-duration(@duration:200ms)
• .transition-property(@property:all)
• .transition-timing-function(@function:ease)