animation

variables

ease-in-quad

$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);

Description

CSS cubic-bezier timing functions ported from Bourbon via jquery.easie (github.com/jaukia/easie)

Type

Cubic-bezier

mixins

animated

@mixin animated($animation-name: null, $animation-duration: .65s, $animation-easing: $ease-out-quad) { ... }

Description

Sets the main animation properties. Optionally, we have a very basic set of custom animtions that can be passed. Note you must call initialize-animation mixin on root of your document to enable the keyframes;

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$animation-name`	Currently available animation names: 'fade-in', 'fade-in-up', 'fade-in-down', 'over-scale'	`Variable`	`null`
`$animation-duration`	How long animation takes	`Variable`	`.65s`
`$animation-easing`	Animation easing type	`Variable`	`$ease-out-quad`

initialize-animation

@mixin initialize-animation() { ... }

Description

Render the keyframes needed for animation mixin. Required to pass animation-names to animated mixin.

Parameters

None.

Example

@include initialize-animation();

code

mixins

code

@mixin code($color: #DF5C33) { ... }

Description

Styles inline code snippets on your page. Defaults to a beautiful red, but can be passed any color.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$color`	Text Color	`Variable`	`#DF5C33`

Example

code {
  @include code(blue);
}

Requires

[variable] base-gray

pre

@mixin pre() { ... }

Description

Some default styles for code blocks on your page. Takes not arguments

Parameters

None.

Example

pre {
  @include pre();
}

Requires

[variable] base-gray

forms

mixins

select-box

@mixin select-box($bg-color: #FFF, $border-radius: .2em, $arrow-image: null, $arrow-size: 6px, $focus-glow: #B4DEFA, $text-color: null, $bg-hover-color: null, $border-color: null, $border-hover-color: null) { ... }

Description

Styling select boxes is the worst. Hopefully this makes life a little easier. Automagically colors elements based on luminance of the backbground color. Pass it a custom arrow image, or use a handy css-only triangle by default. Must be called on an element that wraps the select. Works with Safari, Chrome, Firefox, and IE10+.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$bg-color`	default background-color	`Variable`	`#FFF`
`$border-radius`	border radius	`Variable`	`.2em`
`$arrow-image`	Custom image for the dropdown	`Variable`	`null`
`$arrow-size`	Size of arrow image (change if image provided)	`Variable`	`6px`
`$focus-glow`	Sets a glow around the dropdown when focused. Remove with 'null'	`Variable`	`#B4DEFA`
`$text-color`	Determined dynamically based on luminance of background color, but can be overwritten.	`Variable`	`null`
`$bg-hover-color`	Determined dynamically based on luminance of background color, but can be overwritten.	`Variable`	`null`
`$border-color`	Determined dynamically based on luminance of background color, but can be overwritten.	`Variable`	`null`
`$border-hover-color`	Determined dynamically based on luminance of background color, but can be overwritten.	`Variable`	`null`

Example

.select-wrapper {
  @include select-box();
}

.select-wrapper {
 @include select-box(#efefef, 0px, $arrow-size: 15px, $arrow-image: "http://dbox.us/_img/sample-arrow.png")
}

Requires

[function] luminance

radio

@mixin radio($color: #0074D9, $size: 1em) { ... }

Description

A simple reset for radio button styling across browsers. Note must be used on thewhich wraps your radio inputs.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$color`	active radio button color	`Variable`	`#0074D9`
`$size`	size of the radio button	`Variable`	`1em`

Example

label {
  @include radio();
}

layout

mixins

clearfix (aliased as `cf` )

@mixin clearfix() { ... }

Description

Just your standard clearfix.

Parameters

None.

Example

@include clearfix();

Used by

[mixin] cf
[mixin] inline-list

cf (alias for `clearfix`)

@mixin cf() { ... }

Refer to clearfix.

ratio-box

@mixin ratio-box($ratio: 1 / 1, $bg-color: $base-gray, .2) { ... }

Description

This sets a specific width/height ratio. Useful on background images, iframes and Youtube embeds.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$ratio`	Aspect ratio: height / width	`Variable`	`1 / 1`
`$bg-color`	placeholder background color	`Variable`	`$base-gray, .2`

Example

figure {
  @include ratio(16 / 9);
}

full-page

@mixin full-page($height: 100vh, $max-height: 850px, $min-height: 600px, $breakpoint: 768px) { ... }

Description

Create a responsive full page section with intelligent defaults. Resets on mobile.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$height`	Page height	`Variable`	`100vh`
`$max-height`	Max page height	`Variable`	`850px`
`$min-height`	Min page height	`Variable`	`600px`
`$breakpoint`	Disable below this size or pass 'null' to not use a breakpoint.	`Variable`	`768px`

Example

section {
  @include full-page();
}

section {
  @include full-page(calc(100vh - 90px), 800px, 500px);
}

vertically-align

@mixin vertically-align($reset: Null) { ... }

Description

Cross browser vertical align. Works down to IE9.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$reset`	Pass `false` to reset override to original values	`Variable`	`Null`

Example

article {
  @include vertically-align();
}

h4 {
  @include vertically-align(false);
}

rule

@mixin rule($color: rgba(#000, .15), $spacing: 1.5em) { ... }

Description

Clean reset for divider lines.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$color`	Line color	`Variable`	`rgba(#000, .15)`
`$spacing`	Margin above and below the line	`Variable`	`1.5em`

Example

hr {
  @include rule();
}
hr.blue {
  @include rule(blue);
}

TODO's

- $border-width param

table-layout

@mixin table-layout($layout-type: fixed) { ... }

Description

Sets element and its children to use table layout. An old but very powerful css property for flexible layout challenges.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$layout-type`	`fixed` or `auto`	`Variable`	`fixed`

Example

ul {
  @include table-layout();
}

absolute-center

@mixin absolute-center($width: 50%) { ... }

Description

Faster centering when your element has to be position: absolute;

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$width`	Width of your item	`Variable`	`50%`

Example

div {
  @include absolute-center(400px);
}

material-shadow

@mixin material-shadow($z-depth: 1, $strength: 1, $color: 1) { ... }

Description

Box shadows based on 5 Material Design presets;

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$z-depth`	shadow distance on z-axis	`Variable`	`1`
`$strength`	multiplier for shadow strength/darkness	`Variable`	`1`
`$color`	shadow color	`Variable`	`1`

Example

div {
  @include material-shadow(3);
}

Requires

[function] rem

reset

mixins

normalize

@mixin normalize() { ... }

Description

Normalize css. Keeps some defaults. Call this on the root of your project.

Parameters

None.

Example

@include normalize();

rest

mixins

reset-css

@mixin reset-css() { ... }

Description

Meyer reset. Use this when you want to nuke all styles. Otherwise maybe use normalize mixin.

Parameters

None.

Example

@include reset-css();

settings

variables

base-font-size

$base-font-size: 16px !default;

Description

Sets the base font size for rem calculations;

Type

Number (px)

Used by

[function] rem

base-gray

$base-gray: #707F8C !default;

Description

Base gray - tweak this to add slight color tint to the grayscale, then base all grays off this color. If you want flat gray use #888888

Type

Color (hex)

Used by

[mixin] code
[mixin] pre
[mixin] table

table

mixins

table

@mixin table($border: true, $striped: true, $condensed: false) { ... }

Description

Ported directly from Twitter Bootstrap (by way of Axis), as they did an excellent job with the tables.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$border`	Makes table bordered	`Variable`	`true`
`$striped`	Adds zebra striping	`Variable`	`true`
`$condensed`	Makes the table condensed	`Variable`	`false`

Example

table {
  @include table();
}

Requires

[variable] base-gray

TODO's

- make hover effect optional

typography

mixins

inline-list

@mixin inline-list($spacing: 20px) { ... }

Description

For when you need your list to be horizontal.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$spacing`	Amount of spacing between elements - can be whatever unit you like.	`Variable`	`20px`

Example

ul {
  @include inline-list();
}

Requires

[mixin] clearfix

text-list

@mixin text-list($style: disc) { ... }

Description

We tend to spend a great deal of time resetting all of the properties for lists. This puts them back to roughly the same state as browser defaults. You can pass it any option that [list-style-type] (http://www.w3schools.com/cssref/pr_list-style-type.asp) would normally take.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$style`	Amount of spacing between elements. can be whatever unit you like.	`Variable`	`disc`

Example

ul {
  @include text-list();
}
ul {
  @include text-list('disc');
}

reset-list

@mixin reset-list() { ... }

Description

Resets the margins padding, and styles to list.

Parameters

None.

Example

ul {
  @include reset-list();
}

ellipsis

@mixin ellipsis($width: 100%) { ... }

Description

Truncate text to the width of its container...

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$width`	Width of the container can be whatever unit you like.	`Variable`	`100%`

Example

h3 {
  @include ellipsis();
}

fluid-type

@mixin fluid-type($min-font-size: 12px, $max-font-size: 24px, $lower-range: 420px, $upper-range: 900px) { ... }

Description

Magic calc + vh combo to allow text to be fluid between minimum and maximum breakpoints.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$min-font-size`	Minimum font size	`Variable`	`12px`
`$max-font-size`	Maximum font size	`Variable`	`24px`
`$lower-range`	Stop scaling font smaller at this screen resolution	`Variable`	`420px`
`$upper-range`	Stop scaling font larger at this screen resolution	`Variable`	`900px`

Example

h1 {
  @include fluid-type(20px, 48px);
}

ui

mixins

button

@mixin button($background-color: #00BFFF, $color: #FFF) { ... }

Description

A starting place for button styling.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$background-color`	Button background color	`Variable`	`#00BFFF`
`$color`	Button text color	`Variable`	`#FFF`

Example

a.btn {
  @include button();
}
a.yellow-button {
  @include button(yellow, black);
}

utilities

functions

pow

@function pow($x, $n) { ... }

Description

Power function

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$x`	—none	`Number`	—none
`$n`	—none	`Number`	—none

Returns

Number

Used by

[function] luminance

rem

@function rem($size) { ... }

Description

Calculates and returns the rem value based on px input. Default base font size is 16px, but can be changed with a global $base-font-size variable.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	Size in pixels	`Variable`	—none

Example

font-size: rem(30px);
// returns font-size: 1.875rem;

Requires

[variable] base-font-size

Used by

[mixin] material-shadow

strip-unit

@function strip-unit($number) { ... }

Description

Sometimes it's just easier to do calculations with the unit is stripped.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$number`	Number that has a unit	`Number`	—none

Example

$length: 42px;
$value: strip-unit($length);
// -> 42

luminance

@function luminance($color) { ... }

Description

Returns the luminance of $color as a float (between 0 and 1) 1 is pure white, 0 is pure black

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$color`	Color	`Color`	—none

Returns

Number

Requires

[function] pow

Used by

[mixin] select-box

Author

Hugo Giradel

mixins

debug

@mixin debug() { ... }

Description

Debugging tool - adds a border to the current element, its children, grandchildren, etc so you can see what's up – great for precise layout tweaks. It will also add flags if you made mistakes like put in inline styles, forgot an alt on an image, left the alt blank, etc. Not to be used in production, obviously.

Parameters

None.

Example

.container-elment {
  @include debug();
}

triangle

@mixin triangle($direction: up, $size: 10px, $color: #000) { ... }

Description

Makes a little css triangle for you.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$direction`	Direction of the triangle: up, down left or right	`Variable`	`up`
`$size`	Size of the triangle	`Variable`	`10px`
`$color`	Color of the triangle	`Variable`	`#000`

Example

.element:after {
  @include triangle();
}
span {
  @include triangle(right, 8px, red);
}

animation

variables

Description

Type

Links

mixins

Description

Parameters

Links

Description

Parameters

Example

Links

code

mixins

Description

Parameters

Example

Requires

Description

Parameters

Example

Requires

forms

mixins

Description

Parameters

Example

Requires

Links

Description

Parameters

Example

Links

layout

mixins

clearfix (aliased as cf )

Description

Parameters

Example

Used by

cf (alias for clearfix)

Description

Parameters

Example

Links

Description

Parameters

Example

Links

Description

Parameters

Example

Links

Description

Parameters

Example

TODO's

Description

Parameters

Example

Links

Description

Parameters

Example

Links

Description

Parameters

Example

Requires

Links

reset

mixins

Description

Parameters

Example

rest

mixins

Description

Parameters

clearfix (aliased as `cf` )

cf (alias for `clearfix`)