Core API

variables

background-color

$background-color: #fff !global;

Description

The default background color as defined in body

Type

Color

Author

Dennis Thompson

use-global-border-box

$use-global-border-box: true !global;

Description

Set true to use wildcard border-box

Type

Bool

Author

Dennis Thompson

use-rem

$use-rem: true !global;

Description

Set true to use rem units as the default relative unit

Type

Bool

Used by

[function] relative
[function] relative
[function] relative
[mixin] font-size
[mixin] font-size
[mixin] font-size

Author

Dennis Thompson

use-em

$use-em: false !global;

Description

Set true to use em units as the default relative unit

Type

Bool

Used by

[function] relative
[function] relative
[function] relative
[mixin] font-size
[mixin] font-size
[mixin] font-size

Author

Dennis Thompson

use-percent

$use-percent: false !global;

Description

Set true to use % units as the default relative unit

Type

Bool

Used by

[function] relative
[function] relative
[function] relative
[mixin] font-size
[mixin] font-size
[mixin] font-size

Author

Dennis Thompson

use-px-fallback

Deprecated!

$use-px-fallback: true !global;

Description

Set true to use px fallback when legacy browsers don't properly support rem or em units.

Type

Bool

Author

Dennis Thompson

font-size

$font-size: 14px !global;

Description

Sets the global font-size as defined in body

Type

Number

Author

Dennis Thompson

font-family

$font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !global;

Description

Sets the global font-family as defined in body

Type

List

Author

Dennis Thompson

heading-family

$heading-family: "Georgia", "Times New Roman", serif !global;

Description

Sets the global heading families for h1 through h6

Type

List

Author

Dennis Thompson

font-color

$font-color: #444 !global;

Description

Sets the global font color as defined in body

Type

Color

Author

Dennis Thompson

heading-color

$heading-color: #181818 !global;

Description

Sets the global heading color for h1 through h6

Type

Color

Author

Dennis Thompson

form-font

$form-font: $font-family !global;

Description

Sets the form font-family

Type

Bool

Author

Dennis Thompson

link-color

$link-color: #333 !global;

Description

Sets the global link color as defined in a

Type

Color

Author

Dennis Thompson

link-hover

$link-hover: #000 !global;

Description

Sets the global link hover color

Type

Color

Author

Dennis Thompson

link-decoration

$link-decoration: underline !global;

Description

Sets the global link decoration

Type

String

Author

Dennis Thompson

is-fluid

$is-fluid: false !global;

Description

Set true to enable the fluid grid

Type

Bool

Used by

[mixin] _offset
[mixin] _offset

Author

Dennis Thompson

base-col-width

$base-col-width: 40px !global;

Description

Sets the base column width.

Note: only relevant when $is-fluid is set to false.

Type

Number

Author

Dennis Thompson

base-gutter-width

$base-gutter-width: 20px !global;

Description

Sets the amount of padding between each column.

Type

Number

Used by

[mixin] _fluidGrid

Author

Dennis Thompson

base-col-count

$base-col-count: 16 !global;

Description

Sets the number of columns to generate (max 99).

Type

Number

Author

Dennis Thompson

base-width

$base-width: if($is-fluid, 98%, ($base-col-width + $base-gutter-width) * $base-col-count) !global;

Description

Calculates the base width of the grid based on configured values.

Type

Number

Author

Dennis Thompson

new-grid-width

$new-grid-width: 80%;

Description

The width of the new grid used starting with the fresh theme.

Type

Number

Used by

[mixin] _fluidGrid

Author

Dennis Thompson

tablet-width

$tablet-width: 768px !global;

Description

A default value for the tablet @media query breakpoint.

Type

Number

Author

Dennis Thompson

mobile-portrait-width

$mobile-portrait-width: 300px !global;

Description

A default value for the portrait-mode mobile @media query breakpoint.

Type

Number

Author

Dennis Thompson

mobile-landscape-width

$mobile-landscape-width: 420px !global;

Description

A default value for the landscape-mode mobile @media query breakpoint.

Type

Number

Author

Dennis Thompson

mobile-fluid-width

$mobile-fluid-width: 100%;

Description

The width to set the for fluid mobile grid.

Type

Number

Used by

[mixin] _mobileGrid

Author

Dennis Thompson

base-font-size

$base-font-size: 10px !global;

Description

Warning: Excersize discretion when altering these values as they can cause undesired results.

Adjusts the base font size which is used to calculate all relative units.

Type

Number

Author

Dennis Thompson

use-new-grid

Deprecated!

$use-new-grid: true !global;

Description

Warning: Excersize discretion when altering these values as they can cause undesired results.

Set false to use legacy grid implemented in Skeleton Sass 1

Type

Bool

Used by

[mixin] grid

Author

Dennis Thompson

mixins

[private] _fluidGrid

@mixin _fluidGrid($colCount, $new:  $use-new-grid ) { ... }

Description

Handles the generation of fluid grids.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$colCount`	The number of columns to generate (max 99)	`Number`	— none
`$new`	Set true to enable the new style of grid to be generated	`Bool`	`$use-new-grid`

Requires

[mixin] _offset
[function] percent
[function] percent
[function] numToString
[function] numToString
[function] numToString
[function] numToString
[variable] base-gutter-width
[variable] new-grid-width

Used by

[mixin] grid

Author

Dennis Thompson

[private] _fixedGrid

@mixin _fixedGrid($width, $colWidth, $gutterWidth, $colCount) { ... }

Description

Handles the generation of fixed grids.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	The width of the grid as defined in `.container`	`Number`	— none
`$colWidth`	The width of each column	`Number`	— none
`$gutterWidth`	The amount of padding between each column	`Number`	— none
`$colCount`	The number of columns to generate (max 99)	`Number`	— none

Requires

[mixin] _offset
[function] numToString
[function] numToString
[function] numToString

Used by

[mixin] grid

Author

Dennis Thompson

[private] _offset

@mixin _offset($is-fluid, $colCount, $colWidth, $new:  $use-new-grid ) { ... }

Description

Creates offset rules

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$is-fluid`	Set true if the offsets are to be used with a fluid grid.	`Bool`	— none
`$colCount`	The number of columns to generate (max 99)	`Number`	— none
`$colWidth`	The width of each column	`Number`	— none
`$new`	Set true to enable the new style of grid to be generated	`Bool`	`$use-new-grid`

Requires

[function] numToString
[variable] is-fluid
[variable] is-fluid

Used by

[mixin] _fluidGrid
[mixin] _fixedGrid

Author

Dennis Thompson

[private] _mobileGrid

@mixin _mobileGrid($width, $colCount, $isFluid) { ... }

Description

Creates the mobile grid which should be inside of a @media query.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	The width of the grid as defined in `.container`.	`Number`	— none
`$colCount`	The number of columns to generate (max 99).	`Number`	— none
`$isFluid`	Set true of the mobile grid should be fluid.	`Bool`	— none

Requires

[mixin] _group
[mixin] _mobileOffset
[function] numToString
[variable] mobile-fluid-width

Used by

[mixin] mobileGrid

Author

Dennis Thompson

[private] _mobileOffset

@mixin _mobileOffset($colCount) { ... }

Description

Creates offset classes for the mobile grid

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$colCount`	The number of columns to create offset classes for.	`Number`	— none

Requires

[mixin] _group

Used by

[mixin] _mobileGrid

Author

Dennis Thompson

[private] _group

@mixin _group($stop, $selector, $pos:  before ) { ... }

Description

Groups all of offset-by- selectors together

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$stop`	The column to stop at (e.g. `offset-by-fifteen`) when `$stop = 15`	`Number`	— none
`$selector`	The selector to group	`String`	— none
`$pos`	Where to place `$selector` (`offset-by-two` vs. `two-offset-by`)	`String`	`before`

Content

This mixin allows extra content to be passed (through the @content directive).

Requires

[function] numToString
[function] numToString

Used by

[mixin] _mobileGrid
[mixin] _mobileOffset

Author

Dennis Thompson

grid

@mixin grid($width:  $base-width , $fluid:  $is-fluid , $gutterWidth:  $base-gutter-width , $colCount:  $base-col-count ) { ... }

Description

Creates the grid

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	The with of the grid as defined in `.container`	`Number`	`$base-width`
`$fluid`	Set true to generate a fluid grid.	`Bool`	`$is-fluid`
`$gutterWidth`	Adjusts the gutter width.	`Number`	`$base-gutter-width`
`$colCount`	Adjusts the number of columns to generate.	`Number`	`$base-col-count`

Requires

[mixin] _fluidGrid
[mixin] _fixedGrid
[variable] use-new-grid

Author

Dennis Thompson

mobileGrid

@mixin mobileGrid($width:  $base-width , $fluid:  $is-fluid , $colCount:  $base-col-count ) { ... }

Description

Creates the mobile grid.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	The with of the grid as defined in `.container`	`Number`	`$base-width`
`$fluid`	Set true to generate a fluid grid.	`Bool`	`$is-fluid`
`$colCount`	Adjusts the number of columns to generate.	`Number`	`$base-col-count`

Requires

[mixin] _mobileGrid

Author

Dennis Thompson

font-size

@mixin font-size($size, $fallback:  $use-px-fallback ) { ... }

Description

Calculates the font-size automatically based on config settings.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The font size to convert.	`Number`	— none
`$fallback`	Set true to fallback to px for legacy browsers.	`Bool`	`$use-px-fallback`

Requires

[function] rem
[function] em
[function] percent
[variable] use-rem
[variable] use-em
[variable] use-percent
[variable] use-em
[variable] use-rem
[variable] use-percent
[variable] use-percent
[variable] use-rem
[variable] use-em

Author

Dennis Thompson

hide-text

@mixin hide-text() { ... }

Description

Helper mixin to easily hide text.

Parameters

None.

Author

Dennis Thompson

functions

[private] numToString

@function numToString($int) { ... }

Description

Converts a number from 0 to 100 to the English word

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$int`	Any number between 1 and 99	`Number`	— none

Returns

String —

The English version of the number entered in.

Used by

[mixin] _fluidGrid
[mixin] _fluidGrid
[mixin] _fluidGrid
[mixin] _fluidGrid
[mixin] _fixedGrid
[mixin] _fixedGrid
[mixin] _fixedGrid
[mixin] _offset
[mixin] _mobileGrid
[mixin] _group
[mixin] _group

Author

Dennis Thompson

[private] _calcRU

@function _calcRU($px, $base, $unit) { ... }

Description

Calculates the relative units given absolute units.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$px`	The unit in pixels.	`String` or `Number`	— none
`$base`	The base value to divide by.	`Number`	— none
`$unit`	`em`, `rem`, or `%` are valid relative values.	`String`	— none

Returns

String —

The new relative unit.

Requires

[function] strip-units
[function] strip-units

Used by

[function] em
[function] rem
[function] percent

Author

Dennis Thompson

strip-units

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

Description

Strips the units from strings

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$number`	The number to remove units from.	`String` or `Number`	— none

Returns

Number —

Unitless number.

Used by

[function] _calcRU
[function] _calcRU
[function] triad
[function] square

Author

Dennis Thompson

em

@function em($px, $base:  $base-font-size ) { ... }

Description

Takes in an absolute unit and gives back a relative one.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$px`	A absolute unit.	`Number`	— none
`$base`	The base font size to calculate with.	`Number`	`$base-font-size`

Returns

Number —

Realtive em unit.

Requires

[function] _calcRU

Used by

[function] relative
[mixin] font-size

Author

Dennis Thompson

rem

@function rem($px, $base:  $base-font-size ) { ... }

Description

Takes in an absolute unit and gives back a relative one.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$px`	A absolute unit.	`Number`	— none
`$base`	The base font size to calculate with.	`Number`	`$base-font-size`

Returns

Number —

Realtive rem unit.

Requires

[function] _calcRU

Used by

[function] relative
[mixin] font-size

Author

Dennis Thompson

percent

@function percent($px, $base:  $base-font-size ) { ... }

Description

Takes in an absolute unit and gives back a relative one.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$px`	A absolute unit.	`Number`	— none
`$base`	The base font size to calculate with.	`Number`	`$base-font-size`

Returns

Number —

Realtive % unit.

Requires

[function] _calcRU

Used by

[mixin] _fluidGrid
[mixin] _fluidGrid
[function] relative
[mixin] font-size

Author

Dennis Thompson

relative

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

Description

Takes in an absolute unit and gives back a relative one.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	A absolute unit.	`Number`	— none

Returns

Number —

A relative unit based on the values of $use-rem, $use-em, and $use-percent.

Requires

[function] rem
[function] em
[function] percent
[variable] use-rem
[variable] use-em
[variable] use-percent
[variable] use-em
[variable] use-rem
[variable] use-percent
[variable] use-percent
[variable] use-rem
[variable] use-em

Author

Dennis Thompson

triad

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

Description

Takes in a color and provides a list of triad-compatible colors.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color to calculate traid colors for.	`Color`	— none

Returns

List —

A list of triad colors.

Requires

[function] strip-units

Author

Dennis Thompson

square

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

Description

Takes in a color and provides a list of square-compatible colors.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color to calculate traid colors for.	`Color`	— none

Returns

List —

A list of square colors.

Requires

[function] strip-units

Author

Dennis Thompson

Theme API

mixins

[private] _bd

@mixin _bd($vert, $horiz, $radius) { ... }

Description

Sets prefixes for border-radius

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$vert`	The vertical direction of the border radius.	`String`	— none
`$horiz`	The horizontal direction of the border radius.	`String`	— none
`$radius`	The radius to set.	`Number`	— none

prefixer

@mixin prefixer($property, $value, $prefixes) { ... }

Description

Prefixes CSS properties

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	The property name to prefix.	`String`	— none
`$value`	The value of the property.	`Any`	— none
`$prefixes`	A list of prefixes to use (e.g. webkit moz ms o spec)	`List`	— none

Used by

[mixin] box-shadow
[mixin] border-radius
[mixin] box-sizing
[mixin] single-transition
[mixin] transition

box-shadow

@mixin box-shadow($shadow) { ... }

Description

Auto-prefixes the box-shadow property.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$shadow`	The shadow properties to include (e.g. 5px, inset 5px 6px, etc.)	`List`	— none

Requires

[mixin] prefixer

border-radius

@mixin border-radius($radii) { ... }

Description

Auto-prefixes the border-radius property.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radii`	The border-radius properties to include (e.g. 5px, 3px 5px, etc.)	`List`	— none

Requires

[mixin] prefixer

border-top-left-radius

@mixin border-top-left-radius($radius:  $default-border-radius ) { ... }

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	The radius to set.	`Number`	`$default-border-radius`

Requires

[mixin] _bd

Used by

[mixin] border-top-radius
[mixin] border-left-radius

border-top-right-radius

@mixin border-top-right-radius($radius:  $default-border-radius ) { ... }

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	The radius to set.	`Number`	`$default-border-radius`

Requires

[mixin] _bd

Used by

[mixin] border-top-radius
[mixin] border-right-radius

border-bototm-left-radius

@mixin border-bototm-left-radius($radius:  $default-border-radius ) { ... }

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	The radius to set.	`Number`	`$default-border-radius`

Requires

[mixin] _bd

border-bottom-right-radius

@mixin border-bottom-right-radius($radius:  $default-border-radius ) { ... }

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	The radius to set.	`Number`	`$default-border-radius`

Requires

[mixin] _bd

Used by

[mixin] border-right-radius
[mixin] border-bottom-radius

border-top-radius

@mixin border-top-radius($radius:  $default-border-radius ) { ... }

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	The radius to set.	`Number`	`$default-border-radius`

Requires

[mixin] border-top-left-radius
[mixin] border-top-right-radius

border-right-radius

@mixin border-right-radius($radius:  $default-border-radius ) { ... }

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	The radius to set.	`Number`	`$default-border-radius`

Requires

[mixin] border-top-right-radius
[mixin] border-bottom-right-radius

border-bottom-radius

@mixin border-bottom-radius($radius:  $default-border-radius ) { ... }

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	The radius to set.	`Number`	`$default-border-radius`

Requires

[mixin] border-bottom-right-radius

border-left-radius

@mixin border-left-radius($radius:  $default-border-radius ) { ... }

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	The radius to set.	`Number`	`$default-border-radius`

Requires

[mixin] border-top-left-radius

opacity

@mixin opacity($alpha, $ie:  true ) { ... }

Description

Sets the opacity with or without IE support.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$alpha`	A decmal value between 0 and 1.	`Number`	— none
`$ie`	Set true to support legacy IE clients.	`Bool`	`true`

box-sizing

@mixin box-sizing($type) { ... }

Description

Auto-prefixes the box-sizing property.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$type`	A valid value of the `box-sizing` property.	`String`	— none

Requires

[mixin] prefixer

single-transition

@mixin single-transition($property, $duration, $function, $delay) { ... }

Description

Sets a single transition.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	The property to animate (e.g. all, opacity, etc.)	`String`	— none
`$duration`	The duration of animation.	`Number`	— none
`$function`	The particular easing function to use (e.g. linear)	`String`	— none
`$delay`	The amount of time to wait before animating.	`Number`	— none

Requires

[mixin] prefixer

transition

@mixin transition($transition) { ... }

Description

Sets multiple transitions

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$transition`	A list of transitions.	`List`	— none

Requires

[mixin] prefixer

See

[mixin] single-transition

reset-box-model

@mixin reset-box-model() { ... }

Description

Resets the box model.

Parameters

None.

Used by

[mixin] global-reset
[mixin] nested-reset

reset-font

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

Description

Resets fonts.

Parameters

None.

Used by

[mixin] global-reset
[mixin] nested-reset

reset-focus

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

Description

Wipes all focus outline styles.

Parameters

None.

reset-body

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

Description

Resets line-height values.

Parameters

None.

Used by

[mixin] global-reset

reset-list-style

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

Description

Wipes all list styles.

Parameters

None.

Used by

[mixin] global-reset
[mixin] nested-reset

reset-image-anchor-border

@mixin reset-image-anchor-border() { ... }

Description

Resets image anchors.

Parameters

None.

Used by

[mixin] nested-reset

reset-table

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

Description

Normalizes table styles.

Parameters

None.

Used by

[mixin] global-reset
[mixin] nested-reset

reset-table-cell

@mixin reset-table-cell() { ... }

Description

Resets table cell alignment and font-weights.

Parameters

None.

Used by

[mixin] nested-reset

reset-quotation

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

Description

Reset quotations.

Parameters

None.

Used by

[mixin] global-reset
[mixin] nested-reset

reset-html5

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

Description

Reset HTML5 elements (mainly for legacy browsers).

Parameters

None.

Used by

[mixin] global-reset

global-reset

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

Description

Eric Meyer's global reset.

Parameters

None.

Requires

[mixin] reset-box-model
[mixin] reset-font
[mixin] reset-html5
[mixin] reset-body
[mixin] reset-list-style
[mixin] reset-quotation
[mixin] reset-table

nested-reset

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

Description

Nested elements reset.

Parameters

None.

Requires

[mixin] reset-box-model
[mixin] reset-font
[mixin] reset-list-style
[mixin] reset-quotation
[mixin] reset-table-cell
[mixin] reset-table
[mixin] reset-image-anchor-border