A small collection of commonly used Sass functions, mixins and placeholders.

sass, mixins, css
bower install corduroy



A small collection of commonly used Sass functions, mixins and placeholders.

Installation and Usage

Install using component(1)

$ component install mkitt/corduroy

Import the full library (except snippets).

@import mkitt-corduroy/corduroy


The following variables are set as the default and should be overridden prior to calling a mixin or extending a placeholder if needed.

$context-px: 16 !default


Utility functions and variables.

bezier variables

A slew of various cubic-bezier variables based on Robert Penner's easing equations.

color functions

shade($color, $percent)

Mix black into a color by a certain percentage.

tint($color, $percent)

Mix white into a color by a certain percentage.

measurement functions

em($px, $context:$context-px)

Convert a unit less pixel value to an em value. Takes an optional second parameter as the context.

rem($px, $context:$context-px)

Convert a unit less pixel value to a rem value. Takes an optional second parameter as the context.

unit-less($px, $context:$context-px)

Divide a unit less pixel value by a context, similar to the #rem function except the value returned does not contain a unit of measurement.

percent($px, $context)

Converts a target px value to a percentage constrained within a context.

** Note: By default the variable $context-px used for the optional second parameter in #em, #rem and #unit_lessis set to 16. To override this value, set it prior to using one of these functions.


Most mixins also come with a placeholder for use with @extend. These are noted below.


The new micro clearfix utilizing pseudo elements to clear floats. Includes placeholder

+font-face($family, $file-path, $weight:normal, $style:normal, $pipeline:false)

One-liner for loading custom fonts with all the crazy path options. Pass $pipeline:true to use the Rails helper. Borrowed from Thoughtbot's excellent Bourbon library.

movement mixins


Enable hardware acceleration for an element. Includes placeholder


Makes single line text with an ellipsis overflow. Includes placeholder

shape mixins

+shape($width:6rem, $height:4rem, $border-radii:false)

Generic shape mixin, primarily used by other shape like mixin's.

+rectangle($width:6rem, $height:4rem, $border-radii:false)

Draws a rectangle shape.

+square($size:4rem, $border-radii:false)

Draws a square shape.


Draws a circle shape.

+oval($width:6rem, $height:4rem)

Draws an oval shape.

+triangle($direction, $size:1rem, $color:black)

Draws a triangle shape in the direction passed. Possible direction values are: up, down, right, left, up-right, up-left, down-right, down-left. Or use cardinal positions: north, south, east, west, north-east, north-west, south-east, south-west.


Vertically align anything within a container(IE9+). Includes placeholder

visibility mixins

Most of these courtesy of H5BP.


Totally hidden from screen readers and browsers. Includes placeholder


Reverse the effects of +hidden. Includes placeholder


Hide visually and from screenreaders, but maintain layout. Includes placeholder


Hide visually and remove from layout. (useful for the checkbox hack) Includes placeholder


Only visually hidden, still available to screen readers. Includes placeholder


Reverse the settings applied by .visuallyhidden. Includes placeholder


Prep an element to replace it's contents with a background-image. Includes placeholder


These files are typically used for reference only. You can import them, but it's usually easier to just drop them into a project and configure them from there.

  • transition.sass: placeholders for common transition properties
  • animation.sass: mixin and placeholders for common @keyframe animations
  • sticky_footer.sass: mixins for creating and releasing a sticky footer structure
  • tab_focus.sass: mixin and placeholder for resetting the browser styles for tab focusable elements