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

Defaults

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

Functions

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.

Mixins

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

+clearfix

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

+hardware-accelerate

Enable hardware acceleration for an element. Includes placeholder

+overflow-ellipsis

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.

+circle($size:4rem)

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.

+vertical-align

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

visibility mixins

Most of these courtesy of H5BP.

+hidden

Totally hidden from screen readers and browsers. Includes placeholder

+shown

Reverse the effects of +hidden. Includes placeholder

+conceal

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

+invisible

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

+visuallyhidden

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

+visuallyshown

Reverse the settings applied by .visuallyhidden. Includes placeholder

+image-replacement

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

Snippets

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