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

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

Author

  • Dennis Thompson

use-percent

$use-percent: false !global;

Description

Set true to use % units as the default relative unit

Type

Bool

Used by

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

is-fluid

$is-fluid: false !global;

Description

Set true to enable the fluid grid

Type

Bool

Used by

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

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

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

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

Author

  • Dennis Thompson

mixins

[private] _fluidGrid

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

Description

Handles the generation of fluid grids.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$colCount

The number of columns to generate (max 99)

Numbernone
$new

Set true to enable the new style of grid to be generated

Bool$use-new-grid

Requires

Used by

[private] _fixedGrid

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

Description

Handles the generation of fixed grids.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

The width of the grid as defined in .container

Numbernone
$colWidth

The width of each column

Numbernone
$gutterWidth

The amount of padding between each column

Numbernone
$colCount

The number of columns to generate (max 99)

Numbernone

Requires

Used by

[private] _offset

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

Description

Creates offset rules

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$is-fluid

Set true if the offsets are to be used with a fluid grid.

Boolnone
$colCount

The number of columns to generate (max 99)

Numbernone
$colWidth

The width of each column

Numbernone
$new

Set true to enable the new style of grid to be generated

Bool$use-new-grid

Requires

Used by

[private] _mobileGrid

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

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

The width of the grid as defined in .container.

Numbernone
$colCount

The number of columns to generate (max 99).

Numbernone
$isFluid

Set true of the mobile grid should be fluid.

Boolnone

Requires

Used by

[private] _mobileOffset

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

Description

Creates offset classes for the mobile grid

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$colCount

The number of columns to create offset classes for.

Numbernone

Requires

Used by

[private] _group

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

Description

Groups all of offset-by- selectors together

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$stop

The column to stop at (e.g. offset-by-fifteen) when $stop = 15

Numbernone
$selector

The selector to group

Stringnone
$pos

Where to place $selector (offset-by-two vs. two-offset-by)

Stringbefore

Content

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

Requires

Used by

grid

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

Description

Creates the grid

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault 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

mobileGrid

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

Description

Creates the mobile grid.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault 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

font-size

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

Description

Calculates the font-size automatically based on config settings.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

The font size to convert.

Numbernone
$fallback

Set true to fallback to px for legacy browsers.

Bool$use-px-fallback

Requires

hide-text

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

Description

Helper mixin to easily hide text.

Parameters

None.

functions

[private] numToString

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

Description

Converts a number from 0 to 100 to the English word

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$int

Any number between 1 and 99

Numbernone

Returns

String

The English version of the number entered in.

Used by

[private] _calcRU

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

Description

Calculates the relative units given absolute units.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$px

The unit in pixels.

String or Numbernone
$base

The base value to divide by.

Numbernone
$unit

em, rem, or % are valid relative values.

Stringnone

Returns

String

The new relative unit.

Requires

Used by

strip-units

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

Description

Strips the units from strings

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$number

The number to remove units from.

String or Numbernone

Returns

Number

Unitless number.

Used by

Links

em

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

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$px

A absolute unit.

Numbernone
$base

The base font size to calculate with.

Number$base-font-size

Returns

Number

Realtive em unit.

Requires

Used by

rem

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

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$px

A absolute unit.

Numbernone
$base

The base font size to calculate with.

Number$base-font-size

Returns

Number

Realtive rem unit.

Requires

Used by

percent

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

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$px

A absolute unit.

Numbernone
$base

The base font size to calculate with.

Number$base-font-size

Returns

Number

Realtive % unit.

Requires

Used by

relative

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

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

A absolute unit.

Numbernone

Returns

Number

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

Requires

triad

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

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

The color to calculate traid colors for.

Colornone

Returns

List

A list of triad colors.

Requires

square

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

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

The color to calculate traid colors for.

Colornone

Returns

List

A list of square colors.

Requires

Theme API

mixins

[private] _bd

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

Description

Sets prefixes for border-radius

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$vert

The vertical direction of the border radius.

Stringnone
$horiz

The horizontal direction of the border radius.

Stringnone
$radius

The radius to set.

Numbernone

Used by

prefixer

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

Description

Prefixes CSS properties

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$property

The property name to prefix.

Stringnone
$value

The value of the property.

Anynone
$prefixes

A list of prefixes to use (e.g. webkit moz ms o spec)

Listnone

Used by

box-shadow

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

Description

Auto-prefixes the box-shadow property.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$shadow

The shadow properties to include (e.g. 5px, inset 5px 6px, etc.)

Listnone

Requires

border-radius

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

Description

Auto-prefixes the border-radius property.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$radii

The border-radius properties to include (e.g. 5px, 3px 5px, etc.)

Listnone

Requires

border-top-left-radius

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

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$radius

The radius to set.

Number$default-border-radius

Requires

Used by

border-top-right-radius

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

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$radius

The radius to set.

Number$default-border-radius

Requires

Used by

border-bototm-left-radius

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

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$radius

The radius to set.

Number$default-border-radius

Requires

border-bottom-right-radius

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

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$radius

The radius to set.

Number$default-border-radius

Requires

Used by

border-top-radius

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

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$radius

The radius to set.

Number$default-border-radius

Requires

border-right-radius

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

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$radius

The radius to set.

Number$default-border-radius

Requires

border-bottom-radius

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

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$radius

The radius to set.

Number$default-border-radius

Requires

border-left-radius

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

Description

Auto-prefixes specified border-radius variant propery

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$radius

The radius to set.

Number$default-border-radius

Requires

opacity

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

Description

Sets the opacity with or without IE support.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$alpha

A decmal value between 0 and 1.

Numbernone
$ie

Set true to support legacy IE clients.

Booltrue

box-sizing

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

Description

Auto-prefixes the box-sizing property.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$type

A valid value of the box-sizing property.

Stringnone

Requires

single-transition

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

Description

Sets a single transition.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$property

The property to animate (e.g. all, opacity, etc.)

Stringnone
$duration

The duration of animation.

Numbernone
$function

The particular easing function to use (e.g. linear)

Stringnone
$delay

The amount of time to wait before animating.

Numbernone

Requires

transition

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

Description

Sets multiple transitions

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$transition

A list of transitions.

Listnone

Requires

See

reset-box-model

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

Description

Resets the box model.

Parameters

None.

Used by

reset-font

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

Description

Resets fonts.

Parameters

None.

Used by

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

reset-list-style

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

Description

Wipes all list styles.

Parameters

None.

Used by

reset-image-anchor-border

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

Description

Resets image anchors.

Parameters

None.

Used by

reset-table

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

Description

Normalizes table styles.

Parameters

None.

Used by

reset-table-cell

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

Description

Resets table cell alignment and font-weights.

Parameters

None.

Used by

reset-quotation

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

Description

Reset quotations.

Parameters

None.

Used by

reset-html5

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

Description

Reset HTML5 elements (mainly for legacy browsers).

Parameters

None.

Used by

global-reset

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

Description

Eric Meyer's global reset.

Parameters

None.

Requires

nested-reset

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

Description

Nested elements reset.

Parameters

None.

Requires