Variables

pesticide-debug

$pesticide-debug: false;

Description

CSS layout debugging

Type

Boolean

Found at

scss/utilities/_global.scss

fix-mqs

$fix-mqs: false !default;

Description

Define width for browsers w/out media query support

Type

Boolean

Found at

scss/utilities/_global.scss

old-ie

$old-ie: false !default;

Description

Turn on/off IE specific styles

Type

Boolean

Found at

scss/utilities/_global.scss

base-font-size

$base-font-size: 16;

Description

Base font size in used in _mixins.scss

Type

Number

Found at

scss/utilities/_global.scss

base-line-height

$base-line-height: 24;

Description

Base line-height in used in _mixins.scss

Type

Number

Found at

scss/utilities/_global.scss

google-fonts-url

$google-fonts-url: 'http://fonts.googleapis.com/css?family=Source+Sans+Pro|Source+Code+Pro';

Description

(optional) URL for Google Fonts import

Type

String

Found at

scss/utilities/_global.scss

fonts

$fonts: 'FONTNAME', 'FONTNAME', 'FONTNAME', 'FONTNAME';

Description

(optional) names of webfonts imports

Type

Array

Found at

scss/utilities/_global.scss

font-family-sans

$font-family-sans: 'source-sans-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;

Description

define font stack used for sans-serifs

Type

String

Used by

font-family-default

Found at

scss/utilities/_global.scss

font-family-serif

$font-family-serif: 'source-serif-pro', Georgia, 'Times New Roman', Times, serif;

Description

define font stack used for serifs

Type

String

Used by

font-family-display

Found at

scss/utilities/_global.scss

font-family-monospace

$font-family-monospace: 'source-code-pro','Inconsolata', "Menlo", Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
                                'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L',
                                Monaco, 'Courier New', Courier, monospace;

Description

define font stack used for monospaced copy

Type

String

Found at

scss/utilities/_global.scss

font-family-display

$font-family-display: $font-family-serif;

Description

define font stack used for headings

Type

String

Requires

font-family-serif

Found at

scss/utilities/_global.scss

font-family-default

$font-family-default: $font-family-sans;

Description

define font stack used for paragraphs

Type

String

Requires

font-family-sans

Found at

scss/utilities/_global.scss

zindex

$zindex: (
  modal                       : 9000,
  overlay                     : 8000,
  dropdown                    : 7000,
  header                      : 6000,
  footer                      : 5000
);

Description

Define z-indexes for various elements

Type

Number

Found at

scss/utilities/_global.scss

Mixins

theme

@mixin theme($name) { ... }

Description

SMACSS Theming

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	theme name	String	— none

Example

.foobar {
  background: #ff3377;
  @include theme(beccapurple){
    background: #663399;
  }
}

Found at

scss/utilities/_mixins.scss

btn

@mixin btn($color-background, $color-text: #fff) { ... }

Description

Buttons
This customises your buttons with a different background color and text color.
If no text color is specified it will default to white.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color-background`	background color	String	— none
`$color-text`	text color	String	`#fff`

Example

.foobar { @include btn(#f37) { ... } }

Found at

scss/utilities/_mixins.scss

mq

@mixin mq($breakpoint, $query: min-width, $type: screen) { ... }

Description

Media Queries
Allows you to use inline media queries.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$breakpoint`	breakpoint	String	— none
`$query`	query type	String	`min-width`
`$type`	media type	String	`screen`

Example

.foobar { @include mq(20em) { ... } }

Found at

scss/utilities/_mixins.scss

old-ie

@mixin old-ie() { ... }

Description

IE Specific Styles

Parameters

None.

Example

.foobar {
  .lt-ie8 & { @include old-ie { ... } }
  .lt-ie9 & { @include old-ie { ... } }
}

Found at

scss/utilities/_mixins.scss

sticky-footer

@mixin sticky-footer($footer_height, $root_selector: .site, $root_footer_selector: .push, $footer_selector: footer) { ... }

Description

Sass version of Sticky Footer by Ryan Fait

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$footer_height`	height of footer including padding or borders	String	— none
`$root_selector`	main wrapper element	String	`.site`
`$root_footer_selector`	hidden element that "pushes" down the footer	String	`.push`
`$footer_selector`	footer element	String	`footer`

Example

.foobar { @include sticky-footer(4em) { ... } }

Found at

scss/utilities/_mixins.scss

fullscreen-bg

@mixin fullscreen-bg() { ... }

Description

Fullscreen Background for < IE8

Parameters

None.

Example

.foobar { @include fullscreen-bg() { ... } }

Found at

scss/utilities/_mixins.scss

opacity

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

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$opacity`	— none	Number	— none

Example

.foobar { @include opacity(4) { ... } }

Found at

scss/utilities/_mixins.scss

inline-block

@mixin inline-block($alignment: baseline) { ... }

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$alignment`	— none	String	`baseline`

Example

.foobar { @include inline-block() { ... } }

Found at

scss/utilities/_mixins.scss

image-2x

@mixin image-2x($image, $width, $height) { ... }

Description

Retina Displays

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$image`	image url	String	— none
`$width`	image width	String	— none
`$height`	image height	String	— none

Example

.foobar { @include image-2x('img/logo.png', 200px, 300px) { ... } }

Found at

scss/utilities/_mixins.scss

rgba-bg

@mixin rgba-bg($color, $percent) { ... }

Description

RGBA Fallback

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	— none	String	— none
`$percent`	— none	String	— none

Example

.foobar { @include rgba-bg(#f37,.9) { ... } }

Found at

scss/utilities/_mixins.scss

Functions

em

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

Description

px to em conversion

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$target`	size to convert	Number	— none
`$context`	context conversion is based on	Number	`$base-font-size`

Returns

Number

Example

.foobar { padding-bottom: em(30); }

Requires

base-font-size

Found at

scss/utilities/_functions.scss

rem

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

Description

px to rem

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$target`	size to convert	Number	— none
`$context`	context conversion is based on	Number	`$base-font-size`

Returns

Number

Example

.foobar { padding-bottom: rem(30); }

Requires

base-font-size

Found at

scss/utilities/_functions.scss

px

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

Description

em to px conversion

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$target`	size to convert	Number	— none
`$context`	context conversion is based on	Number	`$base-font-size`

Returns

Number

Example

.foobar { padding-bottom: px(30); }

Requires

base-font-size

Found at

scss/utilities/_functions.scss

aspect-ratio

@function aspect-ratio($ratio-numerator, $ratio-denominator) { ... }

Description

Aspect Ratio

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$ratio-numerator`	ratio numerator	Number	— none
`$ratio-denominator`	ratio denominator	Number	— none

Returns

Number

Example

.foobar { padding-bottom: aspect-ratio(16,9); } // @returns 56.25%

Found at

scss/utilities/_functions.scss

aspect-ratio-fixed

@function aspect-ratio-fixed($w, $h) { ... }

Description

Aspect Ratio
Based on Fixed Image Dimensions

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$w`	image width	Number	— none
`$h`	image height	Number	— none

Returns

Number

Example

.foobar { padding: 0 0 aspect-ratio-fixed(1080, 720); } // @returns 66.666666666667%

Found at

scss/utilities/_functions.scss

context-calc

@function context-calc($target, $context) { ... }

Description

Context Calculator

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$target`	— none	Number	— none
`$context`	— none	Number	— none

Returns

Number

Example

.foobar { padding-bottom: context-calc(30,15); }

Found at

scss/utilities/_functions.scss

strip-unit

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

Description

Strip Unit Values

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	— none	String	— none

Returns

Number

Example

.foobar { padding-bottom: strip-unit(30px); }

Found at

scss/utilities/_functions.scss

Variables

Description

Type

Links

Found at

Description

Type

Links

Found at

Description

Type

Links

Found at

Description

Type

Used by

Found at

Description

Type

Found at

Description

Type

Found at

Description

Type

Found at

Description

Type

Used by

Found at

Description

Type

Used by

Found at

Description

Type

Found at

Description

Type

Requires

Found at

Description

Type

Requires

Found at

Description

Type

Links

Found at

Mixins

Description

Parameters

Example

Found at

Description

Parameters

Example

Found at

Description

Parameters

Example

Links

Found at

Description

Parameters

Example

Found at

Description

Parameters

Example

Links

Found at

Description

Parameters

Example

Links

Found at

Parameters

Example

Found at