fabric

css

.Button, [class^='Button--'], [class*=' Button--']

.Button,
[class^='Button--'],
[class*=' Button--'] { ... }

fabric base placeholders

placeholders

a

%a { ... }

Description

Sets background color from color map

Requires

article

%article { ... }

Description

Sets a default margin

Requires

blockquote

%blockquote { ... }

Description

Creates a blockquote effect

Requires

body

%body { ... }

code

%code { ... }

h1

%h1 { ... }

Requires

h2

%h2 { ... }

Requires

h3

%h3 { ... }

Requires

h4

%h4 { ... }

Requires

h5

%h5 { ... }

Requires

h6

%h6 { ... }

Requires

Heading

%Heading { ... }

Requires

Used by

  • [placeholder] h1
  • [placeholder] h2
  • [placeholder] h3
  • [placeholder] h4
  • [placeholder] h5
  • [placeholder] h6

hr

%hr { ... }

Requires

html

%html { ... }

Requires

img

%img { ... }

margins

%margins { ... }

Requires

ol

%ol { ... }

Requires

p

%p { ... }

Requires

pre

%pre { ... }

root

%root { ... }

Requires

strong

%strong { ... }

table

%table { ... }

th

%th { ... }

th and td

%th and td { ... }

Requires

TextInput

%TextInput { ... }

Requires

ul

%ul { ... }

Requires

fabric button placeholders

placeholders

Button

%Button { ... }

Requires

fabric component placeholders

placeholders

Clearfix

%Clearfix { ... }

Description

Automatically clear its child elements when used.

Used by

Grid

%Grid { ... }

Requires

ResponsiveRatio

%ResponsiveRatio { ... }

ResponsiveRatio--1x2

%ResponsiveRatio--1x2 { ... }

Requires

Used by

ResponsiveRatio--2x1

%ResponsiveRatio--2x1 { ... }

Requires

Used by

ResponsiveRatio--2x3

%ResponsiveRatio--2x3 { ... }

Requires

Used by

ResponsiveRatio--3x1

%ResponsiveRatio--3x1 { ... }

Requires

Used by

ResponsiveRatio--3x2

%ResponsiveRatio--3x2 { ... }

Requires

Used by

ResponsiveRatio--3x4

%ResponsiveRatio--3x4 { ... }

Requires

Used by

ResponsiveRatio--4x1

%ResponsiveRatio--4x1 { ... }

Requires

Used by

ResponsiveRatio--4x3

%ResponsiveRatio--4x3 { ... }

Requires

Used by

ResponsiveRatio--5x1

%ResponsiveRatio--5x1 { ... }

Requires

Used by

ResponsiveRatio--5x2

%ResponsiveRatio--5x2 { ... }

Requires

Used by

ResponsiveRatio--5x3

%ResponsiveRatio--5x3 { ... }

Requires

Used by

ResponsiveRatio--5x4

%ResponsiveRatio--5x4 { ... }

Requires

Used by

ResponsiveRatio--16x9

%ResponsiveRatio--16x9 { ... }

Requires

Used by

Wrap

%Wrap { ... }

Requires

fabric components

css

.Clearfix

.Clearfix { ... }

Description

Extends the %Clearfix placeholder.

.Grid

.Grid { ... }

.Grid > div and .Grid-item

.Grid > div and .Grid-item { ... }

ResponsiveRatio-- and ResponsiveRatio--

ResponsiveRatio-- and ResponsiveRatio-- { ... }

[class*=' ResponsiveRatio--']

[class*=' ResponsiveRatio--'] { ... }

.ResponsiveRatio--1x2

.ResponsiveRatio--1x2 { ... }

.ResponsiveRatio--2x1

.ResponsiveRatio--2x1 { ... }

.ResponsiveRatio--2x3

.ResponsiveRatio--2x3 { ... }

.ResponsiveRatio--3x1

.ResponsiveRatio--3x1 { ... }

.ResponsiveRatio--3x2

.ResponsiveRatio--3x2 { ... }

.ResponsiveRatio--3x4

.ResponsiveRatio--3x4 { ... }

.ResponsiveRatio--4x1

.ResponsiveRatio--4x1 { ... }

.ResponsiveRatio--4x3

.ResponsiveRatio--4x3 { ... }

.ResponsiveRatio--5x1

.ResponsiveRatio--5x1 { ... }

.ResponsiveRatio--5x2

.ResponsiveRatio--5x2 { ... }

.ResponsiveRatio--5x3

.ResponsiveRatio--5x3 { ... }

.ResponsiveRatio--5x4

.ResponsiveRatio--5x4 { ... }

.ResponsiveRatio--16x9

.ResponsiveRatio--16x9 { ... }

.Wrap

.Wrap { ... }

fabric functions

functions

_

@function _($_value) { ... }

Description

Shorthand to x-to-px

Parameters

NameDescriptionTypeDefault value
$_value

Set the height of the button

Number—

Returns

String

Requires

Used by

add-unit

@function add-unit($_value, $_unit) { ... }

Description

Add unit to variable

Parameters

NameDescriptionTypeDefault value
$_value

Set the value you which you want to add to the unit

String—
$_unit

Set the unit you wish to use

String—

Returns

Property

Requires

camelize

@function camelize($_string) { ... }

Description

Convert string to camel-case

Parameters

NameDescriptionTypeDefault value
$_string

Set the string you which you want to camelize

String—

Returns

String

Requires

  • [external] SassCore::str-length
  • [external] SassCore::str-slice
  • [function] contain
  • [function] capitalize

Used by

capitalize

@function capitalize($_string) { ... }

Description

Capitalize a string

Parameters

NameDescriptionTypeDefault value
$_string

Set the string you which you want to capitalize

String—

Returns

String

Requires

  • [external] SassCore::to-upper-case
  • [external] SassCore::str-slice

Used by

circumference

@function circumference($r) { ... }

Description

Circumference

Parameters

NameDescriptionTypeDefault value
$r

Set the radius you want to the circumference of

String—

Returns

Number

Requires

contain

@function contain($list, $value) { ... }

Description

Check if word (or list) contains value

Parameters

NameDescriptionTypeDefault value
$list

Set the radius you want to the circumference of

String—
$value

Set the radius you want to the circumference of

String—

Returns

Boolean

Used by

explode

@function explode($_string, $dem) { ... }

Description

Explode a string, cause we can

Parameters

NameDescriptionTypeDefault value
$_string

Set the string you which you want to explode

String—
$dem

Set the delimiter

String—

Returns

Map

Requires

  • [external] SassCore::str-length
  • [external] SassCore::str-index
  • [external] SassCore::append
  • [external] SassCore::type-of
  • [external] SassCore::str-slice

Used by

get-color

@function get-color($_color, $_alpha: 1, $_return-hex: false) { ... }

Description

Shorthand to get color

Parameters

NameDescriptionTypeDefault value
$_color

Set the color

String—
$_alpha

Set the alpha the color

String1
$_return-hex

true to return a hex value for the color

Stringfalse

Returns

Mixed

Requires

  • [function] string
  • [variable] colors
  • [variable] colors-use-variables
  • [variable] colors
  • [external] SassCore::string
  • [external] SassCore::type-of
  • [external] SassCore::index
  • [external] SassCore::map-keys
  • [external] SassCore::var
  • [external] SassCore::map-get
  • [external] SassCore::rgba

Used by

get-font-size

@function get-font-size($_value, $_size: '') { ... }

Description

Shorthand to get font size

Parameters

NameDescriptionTypeDefault value
$_value

Set the font size type

String—
$_size—String''

Returns

Property or Null

Requires

Used by

get-font-weight

@function get-font-weight($_value, $_size: '') { ... }

Description

Shorthand to get font weight

Parameters

NameDescriptionTypeDefault value
$_value

Set the font weight type

String—
$_size—String''

Returns

Number or Null

Requires

Used by

get-grid-gap

@function get-grid-gap($_value) { ... }

Description

Shorthand to get grid gap

Parameters

NameDescriptionTypeDefault value
$_value

Set the grid gap size

String—

Returns

Property or 0 or Null

Requires

  • [variable] grid-gaps
  • [variable] grid-gaps
  • [external] SassCore::type-of
  • [external] SassCore::index
  • [external] SassCore::map-keys
  • [function] string
  • [function] _

Used by

get-letter-spacing

@function get-letter-spacing($_value, $_size: '') { ... }

Description

Shorthand to get letter spacing

Parameters

NameDescriptionTypeDefault value
$_value

Set the letter-spacing type

String—
$_size

Set the letter-spacing size

String''

Returns

Number or Null

Requires

Used by

get-line-height

@function get-line-height($_value, $_size: '') { ... }

Description

Shorthand to get line height

Parameters

NameDescriptionTypeDefault value
$_value

Set the get-line-height type

String—
$_size

Set the get-line-height size

String''

Returns

Property or Null

Requires

Used by

get-spacing

@function get-spacing($_value) { ... }

Description

Shorthand to get spacing unit

Parameters

NameDescriptionTypeDefault value
$_value

Set the spacing size

String—

Returns

Property or Null

Requires

  • [function] x-to-px
  • [external] SassCore::type-of
  • [external] SassCore::map-get

get-text-transform

@function get-text-transform($_value, $_size: '') { ... }

Description

Shorthand to get text transform

Parameters

NameDescriptionTypeDefault value
$_value

Set the grid gap size

String—
$_size

Set the grid gap size

String''

Returns

Property or Null

Requires

Used by

get-timing-function

@function get-timing-function($_value) { ... }

Description

Sets transition timing function

Parameters

NameDescriptionTypeDefault value
$_value

This sets the animation functions

Property—

Returns

Property

Requires

  • [variable] timing-functions
  • [variable] timing-functions
  • [external] SassCore::type-of
  • [external] SassCore::index
  • [external] SassCore::map-keys
  • [external] SassCore::map-get
  • [external] SassCore::unquote
  • [external] SassCore::inspect

Used by

get-transition-speed

@function get-transition-speed($_value) { ... }

Description

Shorthand to get transition speed

Parameters

NameDescriptionTypeDefault value
$_value

This sets the animation speed

String—

Requires

hsb

@function hsb($h-hsb, $s-hsb, $b-hsb, $a) { ... }

Description

Convert hsb to hsl color

Parameters

NameDescriptionTypeDefault value
$h-hsb

Set the hue of the hsla color

Number—
$s-hsb

Set the saturation of the hsla color

Number—
$b-hsb

Set the lightness of the hsla color

Number—
$a

Set the alpha of the hsla color

Number—

Returns

Color

Requires

  • [external] SassCore::hsla

implode

@function implode($list, $separator: ',') { ... }

Description

Shorthand to get transition speed

Parameters

NameDescriptionTypeDefault value
$list

Set the map

Map—
$separator

Set the delimiter

Map','

Returns

String

Requires

  • [external] SassCore::length
  • [external] SassCore::nth

is-number

@function is-number($_value) { ... }

Description

Is a number?

Parameters

NameDescriptionTypeDefault value
$_value

Check to see if this is a number

String—

Returns

Boolean

Requires

  • [external] SassCore::type-of

Used by

is-string

@function is-string($_value) { ... }

Description

Is a string?

Parameters

NameDescriptionTypeDefault value
$_value

Check to see if this is a string

String—

Returns

Boolean

Requires

  • [external] SassCore::type-of

is-x-unit

@function is-x-unit($_value) { ... }

Description

Is an x unit?

Parameters

NameDescriptionTypeDefault value
$_value

Check to see if value is a px value

Mixed—

Returns

Boolean

Requires

  • [function] string
  • [function] is-number
  • [function] number
  • [external] SassCore::str-length
  • [external] SassCore::str-slice
  • [external] SassCore::is-number
  • [external] SassCore::number

Used by

list-reverse

@function list-reverse($_list) { ... }

Description

Reverse the order of a list

Parameters

NameDescriptionTypeDefault value
$_list

Set the list you want to reverse

List—

Returns

Boolean

Requires

  • [external] SassCore::type-of
  • [external] SassCore::length
  • [external] SassCore::append

Used by

map-reverse

@function map-reverse($_map) { ... }

Description

Reverse the order of a map

Parameters

NameDescriptionTypeDefault value
$_map

Set the map you want to reverse

Map—

Returns

Map

Requires

  • [external] SassCore::type-of
  • [external] SassCore::map-keys
  • [external] SassCore::length
  • [external] SassCore::map-merge
  • [external] SassCore::map-get
  • [external] SassCore::nth

mod

@function mod($number, $divisor) { ... }

Description

Finds the remainder after division of one number by another

Parameters

NameDescriptionTypeDefault value
$number

Set the number you want find the reminder of

Map—
$divisor

Set number you want to divide by

Map—

Returns

Number

Requires

  • [external] SassCore::type-of

number

@function number($string) { ... }

Description

Number

Parameters

NameDescriptionTypeDefault value
$string

Set the string you want to turn into a number

String—

Returns

Number

Requires

  • [external] SassCore::str-length
  • [external] SassCore::str-slice
  • [external] SassCore::index
  • [external] SassCore::nth
  • [function] unit-length

Used by

opposite-position

@function opposite-position($_position) { ... }

Description

Get the opposite position of a position

Parameters

NameDescriptionTypeDefault value
$_position

Set the position you want to find the opposite of

String—

Returns

String

Requires

Used by

pascalize

@function pascalize($_position) { ... }

Description

Convert string to pascal-case

Parameters

NameDescriptionTypeDefault value
$_position

Set the string you want to convert to pascal-case

String—

Returns

String

Requires

pi

@function pi() { ... }

Description

Pi

Parameters

None.

Returns

Number —

Returns PI the number

Requires

pow

@function pow($number, $exponent) { ... }

Description

Returns the base to the exponent power

Parameters

NameDescriptionTypeDefault value
$number

Set the base number

String—
$exponent

Set the the exponent used to raise the base

String—

Returns

Number

px-to-rem

@function px-to-rem($_value) { ... }

Description

Converts a pixel value into a root em based value

Parameters

NameDescriptionTypeDefault value
$_value

Set the pixel value you want to turn into a rem

String—

Returns

Property

Requires

remove-unit

@function remove-unit($_value) { ... }

Description

Removes any unit from the variable

Parameters

NameDescriptionTypeDefault value
$_value

Set the pixel value remove the unit from

String—

Returns

Number

Requires

  • [external] SassCore::str-length
  • [external] SassCore::str-slice
  • [function] string
  • [function] is-number
  • [function] number

Used by

string

@function string($_value) { ... }

Description

Convert to string

Parameters

NameDescriptionTypeDefault value
$_value

Set the value you want to turn into a string

String—

Returns

String

Requires

  • [external] SassCore::inspect

Used by

unit-length

@function unit-length($number, $unit) { ... }

Description

Length

Parameters

NameDescriptionTypeDefault value
$number

Set the number you want to append to the unit type

Number—
$unit

Set the type of unit you want the number to appended to

String—

Returns

Number or Boolean

Requires

  • [external] SassCore::index
  • [external] SassCore::nth

Used by

validate-position

@function validate-position($_position) { ... }

Description

Validate (and normalize) a position value

Parameters

NameDescriptionTypeDefault value
$_position

Set the position you want to validate

String—

Returns

String

Requires

  • [external] SassCore::index
  • [external] SassCore::unquote
  • [function] string

Used by

x-to-px

@function x-to-px($_value: '') { ... }

Description

Converts an 'x' unit into px based on the $layout-spacing variable

Parameters

NameDescriptionTypeDefault value
$_value

This sets the value to px

Mixed''

Returns

Mixed

Requires

  • [function] is-x-unit
  • [function] remove-unit
  • [variable] layout-spacing
  • [external] SassCore::type-of
  • [external] SassCore::unquote
  • [external] SassCore::is-x-unit
  • [external] SassCore::remove-unit

Used by

fabric mixins

mixins

animation-timing-function

@mixin animation-timing-function($_functions) { ... }

Description

Sets animation timing function

Parameters

NameDescriptionTypeDefault value
$_functions

This sets which timing functions you want to use

Map—

Requires

  • [external] SassCore::length
  • [external] SassCore::type-of
  • [external] SassCore::nth
  • [function] explode
  • [function] get-timing-function
  • [external] SassCore::append

background-color

@mixin background-color($_color, $_alpha) { ... }

Description

Sets background color from color map

Parameters

NameDescriptionTypeDefault value
$_color

Set the color of the background

Map—
$_alpha

Set the alpha of the background

Map—

Requires

button-colors

@mixin button-colors($_background: 'accent', $_border: transparent, $_text: 'white') { ... }

Description

Creates color styles for a button

Parameters

NameDescriptionTypeDefault value
$_background

This sets the background color

String'accent'
$_border

This sets the border color

Stringtransparent
$_text

This sets the text color

String'white'

Requires

Used by

button-hover

@mixin button-hover($_background: 'accent', $_border: transparent, $_text: 'white') { ... }

Description

Creates a hover style effect

Parameters

NameDescriptionTypeDefault value
$_background

This sets the background color

String'accent'
$_border

This sets the border color

Stringtransparent
$_text

This sets the text color

String'white'

Requires

Used by

button-size

@mixin button-size($_height: '', $_padding: 3px, $_border-width: 2px, $_radius: 3px) { ... }

Description

Creates the styles for button sizes

Parameters

NameDescriptionTypeDefault value
$_height

Set the height of the button

String''
$_padding

Set the padding of the button

String3px
$_border-width

Set the border width of the button

String2px
$_radius

Set the border radius of the button

String3px

Requires

Used by

color

@mixin color($_color: '', $_alpha: 1) { ... }

Description

Sets color from color map

Parameters

NameDescriptionTypeDefault value
$_color

Set the color

String''
$_alpha

Set the alpha the color

String1

Requires

Used by

drop-shadow

@mixin drop-shadow($_color: 'black', $_elevation: 'medium', $_inset: false) { ... }

Description

Set drop shadow based on default

Parameters

NameDescriptionTypeDefault value
$_color

Set the color of the drop shadow

String'black'
$_elevation

Set the level of visible appearance of distance from the ground

String'medium'
$_inset

Set if the drop shadow show be inset

Stringfalse

Requires

[private] font-size

@mixin font-size($_value, $_size: '') { ... }

Description

Sets font size responsively

Parameters

NameDescriptionTypeDefault value
$_value

Set the font size type

String—
$_size—String''

Requires

Used by

font-weight

@mixin font-weight($_value, $_size: '') { ... }

Description

Sets font weight responsively

Parameters

NameDescriptionTypeDefault value
$_value

Set the font weight

String—
$_size—String''

Requires

Used by

font

@mixin font($_value, $_size: '') { ... }

Description

Sets font responsively

Parameters

NameDescriptionTypeDefault value
$_value—String—
$_size—String''

Requires

Used by

  • [placeholder] h1
  • [placeholder] h2
  • [placeholder] h3
  • [placeholder] h4
  • [placeholder] h5
  • [placeholder] h6
  • [placeholder] html
  • [placeholder] TextInput
  • [placeholder] Button

grid-gaps

@mixin grid-gaps($_key: 'normal') { ... }

Parameters

NameDescriptionTypeDefault value
$_key

Set the grid gap

String'normal'

Requires

hover

@mixin hover() { ... }

Description

This creates the styles for a hover effect

Parameters

None.

Used by

letter-spacing

@mixin letter-spacing($_value, $_size: '') { ... }

Description

Sets letter spacing responsively

Parameters

NameDescriptionTypeDefault value
$_value

Set the letter spacing type

String—
$_size—String''

Requires

Used by

line-height

@mixin line-height($_value, $_size: '') { ... }

Description

Sets line height responsively

Parameters

NameDescriptionTypeDefault value
$_value

Set the line height type

String—
$_size—String''

Requires

Used by

linear-gradient

@mixin linear-gradient($_direction, $_color-stops: '') { ... }

Description

Multi color gradients

Parameters

NameDescriptionTypeDefault value
$_direction

Set the gradient direction

String—
$_color-stops

Set the color stop values

Map''

Requires

  • [function] explode
  • [variable] colors
  • [variable] colors
  • [external] SassCore::length
  • [external] SassCore::nth
  • [external] SassCore::explode
  • [external] SassCore::unquote
  • [external] SassCore::inspect
  • [external] SassCore::inspect
  • [external] SassCore::index
  • [external] SassCore::map-keys
  • [external] SassCore::append

margin

@mixin margin($_margins: 3x auto, $_breakpoint: '') { ... }

Description

Sets margins relative to $layout-spacing

Parameters

NameDescriptionTypeDefault value
$_margins

Set the margin amount

String3x auto
$_breakpoint

Set the color stop values

Map''

Requires

Used by

padding

@mixin padding($_paddings: 3x auto, $_breakpoint: '') { ... }

Description

Sets paddings relative to $layout-spacing

Parameters

NameDescriptionTypeDefault value
$_paddings—String3x auto
$_breakpoint—String''

Requires

Used by

responsive-margin

@mixin responsive-margin($_values) { ... }

Description

Sets margins based on the responsive key:value pairs defined in a map

Parameters

NameDescriptionTypeDefault value
$_values

Set margin values

String—

Requires

  • [external] SassCore::map-keys
  • [external] SassCore::get-keys
  • [external] SassCore::str-index
  • [mixin] margin
  • [mixin] media

responsive-property

@mixin responsive-property($_property, $_values, $_format: false) { ... }

Description

Sets a property based on the responsive key:value pairs defined in a map

Parameters

NameDescriptionTypeDefault value
$_property

Set the property you want to be responsive

String—
$_values

Set the font size type

String—
$_format

Set the font size type

Stringfalse

Requires

  • [mixin] media
  • [function] _
  • [function] _

Used by

responsive-ratio

@mixin responsive-ratio($_ratio) { ... }

Description

Sets responsive ratio on an object

Parameters

NameDescriptionTypeDefault value
$_ratio

Set the property you want to be responsive

String—

Requires

  • [function] explode
  • [function] explode
  • [external] SassCore::nth
  • [external] SassCore::explode
  • [external] SassCore::inspect
  • [function] number

Used by

text-transform

@mixin text-transform($_value, $_size: '') { ... }

Description

Sets text transform responsively

Parameters

NameDescriptionTypeDefault value
$_value

Set the text transform type

String—
$_size—String''

Requires

Used by

transition-timing-function

@mixin transition-timing-function($_functions) { ... }

Description

Sets transition timing function

Parameters

NameDescriptionTypeDefault value
$_functions

Set the transition timing function

Map—

Requires

  • [external] SassCore::length
  • [external] SassCore::nth
  • [external] SassCore::type-of
  • [external] SassCore::append
  • [function] explode
  • [function] get-timing-function

transition

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

Description

Sets transition based on defaults

Parameters

NameDescriptionTypeDefault value
$_properties

This sets which transition functions you want to use

Properties—

Requires

  • [variable] transitions-speed
  • [variable] transitions-speed
  • [external] SassCore::length
  • [external] SassCore::type-of
  • [external] SassCore::nth
  • [external] SassCore::index
  • [external] SassCore::map-keys
  • [external] SassCore::get-keys
  • [function] explode
  • [external] SassCore::append
  • [external] SassCore::unquote
  • [external] SassCore::inspect

Used by

triangle

@mixin triangle($_position: top, $_color: currentcolor, $_size: 2x, $_scale: 1) { ... }

Description

Make a triangle

Parameters

NameDescriptionTypeDefault value
$_position

Set the position of the triangle

Stringtop
$_color

Set the color of the triangle

Stringcurrentcolor
$_size

Set the size of the triangle

String2x
$_scale

Set the scale of the triangle

String1

Requires

fabric utility

css

.color-

.color- { ... }

.hide-

.hide- { ... }

.show-

.show- { ... }

fabric utility placeholders

placeholders

color-

%color- { ... }

Requires

has-animatedUnderline

%has-animatedUnderline { ... }

Description

Animate a line underneath an element

Requires

  • [mixin] transition
  • [external] SassCore::calc
  • [external] SassCore::scaleX

hide-

%hide- { ... }

Requires

  • [external] SassCore::map-keys
  • [external] SassCore::unquote
  • [function] camelize

show-

%show- { ... }

Requires

  • [mixin] media
  • [external] SassCore::map-keys
  • [external] SassCore::unquote
  • [function] camelize

fabric variables

variables

breakpoints

$breakpoints: (

	'xx-small': 320px,
	'x-small': 480px,
	'small': 768px,
	'medium': 1024px,
	'large': 1200px,
	'x-large': 1400px,
	'xx-large': 1600px

) !default;

Description

Breakpoints

Used by

buttons-border-width

$buttons-border-width: 2px !default;

buttons-height

$buttons-height: 5x !default;

Used by

buttons-padding

$buttons-padding: 3x !default;

buttons-radius

$buttons-radius: 3px !default;

buttons-background-color

$buttons-background-color: 'accent' !default;

buttons-border-color

$buttons-border-color: transparent !default;

buttons-text-color

$buttons-text-color: 'white' !default;

buttons-hover-background-color

$buttons-hover-background-color: 'accent' !default;

buttons-hover-border-color

$buttons-hover-border-color: transparent !default;

buttons-hover-text-color

$buttons-hover-text-color: 'white' !default;

colors-use-variables

$colors-use-variables: false !default;

Used by

colors

$colors: (

	'default':      #232323,
	'accent':       #fe5000,

	'black':        #000,
	'darker-gray':  #232323,
	'dark-gray':    #4a4a4a,
	'gray':         #9b9b9b,
	'light-gray':   #dedede,
	'lighter-gray': #fcfcfc,
	'white':        #fff

) !default;

Used by

drop-shadows-alpha

$drop-shadows-alpha: 0.2 !default;

Used by

drop-shadows-elevations

$drop-shadows-elevations: (

	'lowest':  ('0 1px 2px', '0 1px 3px'),
	'low':     ('0 3px 5px', '0 3px 10px'),
	'medium':  ('0 5px 5px', '0 10px 20px'),
	'high':    ('0 10px 10px', '0 15px 30px'),
	'highest': ('0 15px 10px', '0 20px 40px')

) !default;

Used by

font-family

$font-family: Helvetica, Arial, sans-serif !default;

Used by

font-family--monospace

$font-family--monospace: monospace !default;

font-family--sans-serif

$font-family--sans-serif: Helvetica, Arial, sans-serif !default;

font-family--serif

$font-family--serif: serif !default;

font-size

$font-size: (
	'base': 18px,
	'h6':   16px,
	'h5':   18px,
	'h4':   24px,
	'h3':   32px,
	'h2':   40px,
	'h1':   48px
) !default;

Used by

font-weight

$font-weight: (
	'base': 400,
	'h6':   400,
	'h5':   400,
	'h4':   400,
	'h3':   400,
	'h2':   400,
	'h1':   400
) !default;

Used by

letter-spacing

$letter-spacing: (
	'base': 0,
	'h6':   0,
	'h5':   0,
	'h4':   0,
	'h3':   0,
	'h2':   0,
	'h1':   0
) !default;

Used by

line-height

$line-height: (
    'base': 32px,
    'h6':   24px,
    'h5':   24px,
    'h4':   32px,
    'h3':   40px,
    'h2':   48px,
    'h1':   48px
) !default;

Used by

text-transform

$text-transform: (
    'base': none,
    'h6':   none,
    'h5':   none,
    'h4':   none,
    'h3':   none,
    'h2':   none,
    'h1':   none
) !default;

Used by

grid-columns

$grid-columns: 12 !default;

Used by

grid-breakpoints

$grid-breakpoints: (

	'normal': ('small', 'medium', 'large')

) !default;

Used by

grid-gaps

$grid-gaps: (

	'small':  2x,
	'normal': 3x,
	'large':  4x

) !default;

Used by

layout-padding

$layout-padding: 3x !default;

Used by

layout-spacing

$layout-spacing: 8px !default;

Used by

layout-width

$layout-width: 1080px !default;

Used by

math-pi

$math-pi: 3.14159265358979 !default;

Used by

timing-functions

$timing-functions: (

	'ease-in-sine':      cubic-bezier(0.47, 0, 0.745, 0.715),
	'ease-out-sine':     cubic-bezier(0.39, 0.575, 0.565, 1),
	'ease-in-out-sine':  cubic-bezier(0.445, 0.05, 0.55, 0.95),
	'ease-in-quad':      cubic-bezier(0.55, 0.085, 0.68, 0.53),
	'ease-out-quad':     cubic-bezier(0.25, 0.46, 0.45, 0.94),
	'ease-in-out-quad':  cubic-bezier(0.455, 0.03, 0.515, 0.955),
	'ease-in-cubic':     cubic-bezier(0.55, 0.055, 0.675, 0.19),
	'ease-out-cubic':    cubic-bezier(0.215, 0.61, 0.355, 1),
	'ease-in-out-cubic': cubic-bezier(0.645, 0.045, 0.355, 1),
	'ease-in-quart':     cubic-bezier(0.895, 0.03, 0.685, 0.22),
	'ease-out-quart':    cubic-bezier(0.165, 0.84, 0.44, 1),
	'ease-in-out-quart': cubic-bezier(0.77, 0, 0.175, 1),
	'ease-in-quint':     cubic-bezier(0.755, 0.05, 0.855, 0.06),
	'ease-out-quint':    cubic-bezier(0.23, 1, 0.32, 1),
	'ease-in-out-quint': cubic-bezier(0.86, 0, 0.07, 1),
	'ease-in-expo':      cubic-bezier(0.95, 0.05, 0.795, 0.035),
	'ease-out-expo':     cubic-bezier(0.19, 1, 0.22, 1),
	'ease-in-out-expo':  cubic-bezier(1, 0, 0, 1),
	'ease-in-circ':      cubic-bezier(0.6, 0.04, 0.98, 0.335),
	'ease-out-circ':     cubic-bezier(0.075, 0.82, 0.165, 1),
	'ease-in-out-circ':  cubic-bezier(0.785, 0.135, 0.15, 0.86),
	'ease-in-back':      cubic-bezier(0.6, -0.28, 0.735, 0.045),
	'ease-out-back':     cubic-bezier(0.175, 0.885, 0.32, 1.275),
	'ease-in-out-back':  cubic-bezier(0.68, -0.55, 0.265, 1.55)

) !default;

Description

Transitions

Used by

transitions-speed

$transitions-speed: (

	'x-slow': 0.8s,
	'slow':   0.6s,
	'normal': 0.4s,
	'fast':   0.2s,
	'x-fast': 0.1s

) !default;

Used by

wrap-padding

$wrap-padding: (

	'narrow': $layout-padding,
	'no-padding': $layout-padding

) !default;

wrap-width

$wrap-width: (

	'narrow': $layout-width * 2/3,
	'no-padding': $layout-width

) !default;

include media

for browsers that don't support media queries.

functions

im-log

@function im-log($message) { ... }

Description

Log a message either with @error if supported else with @warn, using feature-exists('at-error') to detect support.

Parameters

NameDescriptionTypeDefault value
$message

Message to log

String—

Requires

Used by

Author

  • Eduardo Boucas

noop

@function noop() { ... }

Description

Function with no @return called next to @warn in Sass 3.3 to trigger a compiling error and stop the process.

Parameters

None.

Used by

Author

  • Eduardo Boucas

im-intercepts-static-breakpoint

@function im-intercepts-static-breakpoint($conditions...) { ... }

Description

Determines whether a list of conditions is intercepted by the static breakpoint.

Parameters

NameDescriptionTypeDefault value
$conditions

Media query conditions

Arglist—

Returns

Boolean —

Returns true if the conditions are intercepted by the static breakpoint

Requires

Used by

Author

  • Eduardo Boucas

get-expression-operator

@function get-expression-operator($expression) { ... }

Description

Get operator of an expression

Parameters

NameDescriptionTypeDefault value
$expression

Expression to extract operator from

String—

Returns

String —

Any of >=, >, <=, <, ≥, ≤

Requires

Used by

Author

  • Eduardo Boucas

get-expression-dimension

@function get-expression-dimension($expression, $operator) { ... }

Description

Get dimension of an expression, based on a found operator

Parameters

NameDescriptionTypeDefault value
$expression

Expression to extract dimension from

String—
$operator

Operator from $expression

String—

Returns

String —

width or height (or potentially anything else)

Used by

Author

  • Eduardo Boucas

get-expression-prefix

@function get-expression-prefix($operator) { ... }

Description

Get dimension prefix based on an operator

Parameters

NameDescriptionTypeDefault value
$operator

Operator

String—

Returns

String —

min or max

Used by

Author

  • Eduardo Boucas

get-expression-value

@function get-expression-value($expression, $operator) { ... }

Description

Get value of an expression, based on a found operator

Parameters

NameDescriptionTypeDefault value
$expression

Expression to extract value from

String—
$operator

Operator from $expression

String—

Returns

Number —

A numeric value

Requires

Used by

Author

  • Eduardo Boucas

parse-expression

@function parse-expression($expression) { ... }

Description

Parse an expression to return a valid media-query expression

Parameters

NameDescriptionTypeDefault value
$expression

Expression to parse

String—

Returns

String —

Valid media query

Requires

Used by

Author

  • Eduardo Boucas

[private] slice

@function slice($list, $start: 1, $end: length($list)) { ... }

Description

Slice $list between $start and $end indexes

Parameters

NameDescriptionTypeDefault value
$list

List to slice

List—
$start

Start index

Number1
$end

End index

Numberlength($list)

Returns

List —

Sliced list

Used by

Author

  • Eduardo Boucas

to-number

@function to-number($value) { ... }

Description

Casts a string into a number

Parameters

NameDescriptionTypeDefault value
$value

Value to be parsed

String or Number—

Returns

Number

Requires

Used by

Author

  • Eduardo Boucas

to-length

@function to-length($value, $unit) { ... }

Description

Add $unit to $value

Parameters

NameDescriptionTypeDefault value
$value

Value to add unit to

Number—
$unit

String representation of the unit

String—

Returns

Number —

$value expressed in $unit

Requires

Used by

Author

  • Eduardo Boucas

mixins

log

@mixin log($message) { ... }

Description

Wrapper mixin for the log function so it can be used with a more friendly API than @if im-log('..') {} or $_: im-log('..'). Basically, use the function within functions because it is not possible to include a mixin in a function and use the mixin everywhere else because it's much more elegant.

Parameters

NameDescriptionTypeDefault value
$message

Message to log

String—

Requires

Author

  • Eduardo Boucas

media-context

@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) { ... }

Description

This mixin aims at redefining the configuration just for the scope of the call. It is helpful when having a component needing an extended configuration such as custom breakpoints (referred to as tweakpoints) for instance.

Parameters

NameDescriptionTypeDefault value
$tweakpoints

Map of tweakpoints to be merged with $breakpoints

Map()
$tweak-media-expressions

Map of tweaked media expressions to be merged with $media-expression

Map()

Example

Extend the global breakpoints with a tweakpoint

@include media-context(('custom': 678px)) {
  .foo {
    @include media('>phone', '<=custom') {
     // ...
    }
  }
}

Extend the global media expressions with a custom one

@include media-context($tweak-media-expressions: ('all': 'all')) {
  .foo {
    @include media('all', '>phone') {
     // ...
    }
  }
}

Extend both configuration maps

@include media-context(('custom': 678px), ('all': 'all')) {
  .foo {
    @include media('all', '>phone', '<=custom') {
     // ...
    }
  }
}

Requires

Author

  • Hugo Giraudel

media

@mixin media($conditions...) { ... }

Description

Generates a media query based on a list of conditions

Parameters

NameDescriptionTypeDefault value
$conditions

Media query conditions

Arglist—

Example

With a single set breakpoint

@include media('>phone') { }

With two set breakpoints

@include media('>phone', '<=tablet') { }

With custom values

@include media('>=358px', '<850px') { }

With set breakpoints with custom values

@include media('>desktop', '<=1350px') { }

With a static expression

@include media('retina2x') { }

Mixing everything

@include media('>=350px', '<tablet', 'retina3x') { }

Requires

Used by

Author

  • Eduardo Boucas

variables

breakpoints

$breakpoints: (
  'phone': 320px,
  'tablet': 768px,
  'desktop': 1024px
) !default;

Description

Creates a list of global breakpoints

Example

Creates a single breakpoint with the label phone

$breakpoints: ('phone': 320px);

Author

  • Eduardo Boucas

media-expressions

$media-expressions: (
  'screen': 'screen',
  'print': 'print',
  'handheld': 'handheld',
  'landscape': '(orientation: landscape)',
  'portrait': '(orientation: portrait)',
  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
  'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)'
) !default;

Description

Creates a list of static expressions or media types

Example

Creates a single media type (screen)

$media-expressions: ('screen': 'screen');

Creates a static expression with logical disjunction (OR operator)

$media-expressions: (
  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
);

Used by

Author

  • Eduardo Boucas

unit-intervals

$unit-intervals: (
  'px': 1,
  'em': 0.01,
  'rem': 0.1,
  '': 0
) !default;

Description

Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals

Example

Interval for pixels is defined as 1 by default

@include media('>128px') {}

/* Generates: */
@media (min-width: 129px) {}

Interval for ems is defined as 0.01 by default

@include media('>20em') {}

/* Generates: */
@media (min-width: 20.01em) {}

Interval for rems is defined as 0.1 by default, to be used with font-size: 62.5%;

@include media('>2.0rem') {}

/* Generates: */
@media (min-width: 2.1rem) {}

Used by

Author

  • Eduardo Boucas

im-media-support

$im-media-support: true !default;

Description

Defines whether support for media queries is available, useful for creating separate stylesheets

Example

Disables support for media queries

$im-media-support: false;
@include media('>=tablet') {
  .foo {
    color: tomato;
  }
}

/* Generates: */
.foo {
  color: tomato;
}

Used by

Author

  • Eduardo Boucas

im-no-media-breakpoint

$im-no-media-breakpoint: 'desktop' !default;

Description

Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or intercept the breakpoint will be displayed, any others will be ignored.

Example

This media query will show because it intercepts the static breakpoint

$im-media-support: false;
$im-no-media-breakpoint: 'desktop';
@include media('>=tablet') {
  .foo {
    color: tomato;
  }
}

/* Generates: */
.foo {
  color: tomato;
}

This media query will NOT show because it does not intercept the desktop breakpoint

$im-media-support: false;
$im-no-media-breakpoint: 'tablet';
@include media('>=desktop') {
  .foo {
    color: tomato;
  }
}

/* No output */

Used by

Author

  • Eduardo Boucas

im-no-media-expressions

$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;

Description

Selects which media expressions are allowed in an expression for it to be used when media queries are not supported.

Example

This media query will show because it intercepts the static breakpoint and contains only accepted media expressions

$im-media-support: false;
$im-no-media-breakpoint: 'desktop';
$im-no-media-expressions: ('screen');
@include media('>=tablet', 'screen') {
  .foo {
    color: tomato;
  }
}

 /* Generates: */
 .foo {
   color: tomato;
 }

This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted

$im-media-support: false;
$im-no-media-breakpoint: 'desktop';
$im-no-media-expressions: ('screen');
@include media('>=tablet', 'retina2x') {
  .foo {
    color: tomato;
  }
}

/* No output */

Used by

Author

  • Eduardo Boucas