A small collection of commonly used Sass functions, mixins and placeholders.
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.
A slew of various cubic-bezier
variables based on Robert Penner's
easing equations.
Mix black into a color by a certain percentage.
Mix white into a color by a certain percentage.
Convert a unit less pixel
value to an em
value. Takes an optional
second parameter as the context.
Convert a unit less pixel
value to a rem
value. Takes an optional
second parameter as the context.
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.
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_less
is 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
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.
Enable hardware acceleration for an element. Includes placeholder
Makes single line text with an ellipsis overflow. Includes placeholder
Generic shape mixin, primarily used by other shape like mixin's.
Draws a rectangle shape.
Draws a square shape.
Draws a circle shape.
Draws an oval shape.
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
Most of these courtesy of H5BP.
+hidden
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
+visuallyhidden
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