elements

mixins

accordions

@mixin accordions($custom) { ... }

Description

Accordions

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[function] core
[function] core

alert-bars

@mixin alert-bars($custom) { ... }

Description

Alert Bars

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] object

blockquotes

@mixin blockquotes($custom) { ... }

Description

Blockquotes

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[function] breakpoint

buttons

@mixin buttons($custom) { ... }

Description

Buttons

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] font-sizes
[function] merge-palettes
[function] typography
[function] core
[function] merge-palettes
[function] typography
[function] breakpoint

carousels

@mixin carousels($custom) { ... }

Description

Carousels

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] horizontal-center
[mixin] vertical-center

forms

@mixin forms($custom) { ... }

Description

Forms

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] vertical-center
[function] core
[function] core
[function] core

headings

@mixin headings($custom) { ... }

Description

Headings

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] font-sizes
[function] core

images

@mixin images($custom) { ... }

Description

Images

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] horizontal-center
[mixin] vertical-center

lists

@mixin lists($custom) { ... }

Description

Buttons

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] vertical-center
[function] color

modals

@mixin modals($custom) { ... }

Description

Modals

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] horizontal-center
[function] core

progress-bars

@mixin progress-bars($custom) { ... }

Description

Progress Bars

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] vertical-center

tables

@mixin tables($custom) { ... }

Description

Tables

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[function] color
[function] color

tabs

@mixin tabs($custom) { ... }

Description

Tabs

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

tooltips

@mixin tooltips($custom) { ... }

Description

Tooltips

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] triangle-core
[mixin] triangle

wells

@mixin wells($custom) { ... }

Description

Wells

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] vertical-center

objects

mixins

billboard

@mixin billboard($custom) { ... }

Description

Billboard

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] bg-overlay
[mixin] horizontal-center
[mixin] vertical-center

breadcrumb

@mixin breadcrumb($custom) { ... }

Description

Breadcrumb

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Author

@esr360

dropdown

@mixin dropdown($custom) { ... }

Description

Dropdown

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] vertical-center
[function] retrieve-value
[function] color

footer

@mixin footer($custom) { ... }

Description

Footer

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

google-map

@mixin google-map($custom) { ... }

Description

Google Map

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[function] color

header

@mixin header($custom) { ... }

Description

Header

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] vertical-center
[function] core
[function] core

logo

@mixin logo($custom) { ... }

Description

Logo

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

navigation

@mixin navigation($custom) { ... }

Description

Navigation

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[function] breakpoint

overlay

@mixin overlay($custom) { ... }

Description

Overlay

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

preloader

@mixin preloader($custom) { ... }

Description

Preloader

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] vertical-center
[mixin] horizontal-center
[mixin] horizontal-center

scroll-top

@mixin scroll-top($custom) { ... }

Description

Scroll Top

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

search

@mixin search($custom) { ... }

Description

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[mixin] vertical-center

side-nav

@mixin side-nav($custom) { ... }

Description

sideNav

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Content

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

Requires

[function] core

tools

mixins

background

@mixin background($custom) { ... }

Description

Background

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Output

styles for an element's background

fill-parent

@mixin fill-parent($position) { ... }

Description

Cause an element to fill its parent

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	the value to use for the `position` property	`String`	— none

Used by

[mixin] bg-overlay

font-sizes

@mixin font-sizes($custom) { ... }

Description

Create font-size modifiers

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Example

@include font-sizes();

Requires

[function] breakpoint
[function] breakpoint
[function] typography-config

Used by

[mixin] buttons
[mixin] headings

horizontal-center

@mixin horizontal-center() { ... }

Description

Center an element horizontally

Parameters

None.

Used by

[mixin] carousels
[mixin] images
[mixin] modals
[mixin] billboard
[mixin] preloader
[mixin] preloader

bg-overlay

@mixin bg-overlay($custom) { ... }

Description

Background Overlay

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Requires

[mixin] fill-parent

Used by

[mixin] billboard

triangle-core

@mixin triangle-core() { ... }

Description

Triangle Core

Parameters

None.

Used by

[mixin] tooltips
[mixin] triangle

triangle

@mixin triangle() { ... }

Description

Triangle

Parameters

None.

Requires

[mixin] triangle-core
[function] color

Used by

[mixin] tooltips

vertical-center

@mixin vertical-center($position) { ... }

Description

Vertical Center

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	the value to use for the `position` property	`String`	— none

Used by

[mixin] carousels
[mixin] forms
[mixin] images
[mixin] lists
[mixin] progress-bars
[mixin] wells
[mixin] billboard
[mixin] dropdown
[mixin] header
[mixin] preloader
[mixin] search
[mixin] helpers

functions

retrieve-value

@function retrieve-value($module, $module: 0, $module: 1, $args...) { ... }

Description

Retrieve another module's option value

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$module`	— none	`List`	— none
`$module`	the name of the module	`String`	`0`
`$module`	default config for the module	`Map`	`1`
`$args`	the options to fetch	`Arglist`	— none

Returns

Any type —

desired option value

Used by

[mixin] dropdown

General

functions

custom

@function custom($module) { ... }

Description

Used to fetch custom module configuration from a global config file

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$module`	The module for which to find configuration	`String`	— none

Author

@esr360

eval-config

@function eval-config($func) { ... }

Description

Evaluate a configuration value

Parameters

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

Used by

[function] typography

utilities

mixins

colors

@mixin colors($custom) { ... }

Description

Colors

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Output

all project color palettes as a global variable

container

@mixin container($custom) { ... }

Description

Container

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

core

@mixin core($custom) { ... }

Description

Core Styles

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Requires

[mixin] object
[mixin] object
[function] color

object

@mixin object() { ... }

Description

Create vertical-rhythm for an element

Parameters

None.

Used by

[mixin] alert-bars
[mixin] core
[mixin] core

grid

@mixin grid($custom) { ... }

Description

Grid System

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

Example

@include grid((
    'options':(
        'max-width' : 90%
    ),
    'breakpoints':(
        'break-3'   : 840px,
        'break-5'   : 1600px
    )
));

Requires

[function] core
[function] core

helpers

@mixin helpers() { ... }

Description

Helper Classes

Parameters

None.

Requires

[function] breakpoint
[mixin] vertical-center

print

@mixin print() { ... }

Description

Print styles

Parameters

None.

Requires

[function] color
[function] color
[function] color

typography

@mixin typography($custom) { ... }

Description

Typography

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$custom`	where custom config will be passed	`Map`	— none

functions

palette

@function palette($palette) { ... }

Description

Function to get desired color palette

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$palette`	the key of the palette you are interested in	`String`	— none

Returns

Map —

new map containing desired palette

Used by

[function] color
[function] merge-palettes
[function] merge-palettes

color

@function color($palette, $color) { ... }

Description

Function to get desired color from specific palette

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$palette`	the palette which contains your desired color	`Map`	— none
`$color`	the key of the color you are interested in	`String`	— none

Returns

Color —

the desired color value

Requires

[function] palette

Used by

[mixin] lists
[mixin] tables
[mixin] tables
[mixin] dropdown
[mixin] google-map
[mixin] triangle
[function] gradient
[mixin] core
[mixin] print
[mixin] print
[mixin] print

merge-palettes

@function merge-palettes($palettes) { ... }

Description

Function to merge entire/partial color palettets

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$palettes`	the palettes you wish to merge	`List`	— none

Returns

Map —

new map containing all desired colors and values

Requires

[function] palette
[function] palette

Used by

[mixin] buttons
[mixin] buttons

gradient

@function gradient($gradient) { ... }

Description

Function to create a linear-gradient

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$gradient`	the desired gradient from the $palettes variable	`Map`	— none

Returns

Color —

the desired color value

Requires

[function] color

core

@function core($group) { ... }

Description

Function to get configuration group

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$group`	the group you are interested in	`Map`	— none

Returns

Map —

new map containing desired group

Used by

[mixin] accordions
[mixin] accordions
[mixin] buttons
[mixin] forms
[mixin] forms
[mixin] forms
[mixin] headings
[mixin] modals
[mixin] header
[mixin] header
[mixin] side-nav
[mixin] grid
[mixin] grid

breakpoint

@function breakpoint($breakpoint) { ... }

Description

Get a breakpoint value

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$breakpoint`	the key of your desired breakpoint	`String`	— none

Returns

Number —

your desired breakpoint value

Used by

[mixin] blockquotes
[mixin] buttons
[mixin] navigation
[mixin] font-sizes
[mixin] font-sizes
[mixin] helpers

typography-config

@function typography-config($group) { ... }

Description

Function to get configuration group

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$group`	the group you are interested in	`Map`	— none

Returns

Map —

new map containing desired group

Used by

[mixin] font-sizes
[function] typography

typography

@function typography($group, $key) { ... }

Description

Function to get desired value from configuration group

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$group`	the configuration group you are interested in	`Map`	— none
`$key`	the key of the value you are interested in	`String`	— none

Returns

Any type —

the desired value

Requires

[function] eval-config
[function] typography-config

Used by

[mixin] buttons
[mixin] buttons
[function] typeface
[function] font-size

typeface

@function typeface($typeface, $fallback) { ... }

Description

Function to get desired typeface value

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$typeface`	the desired typeface value	`String`	— none
`$fallback`	the desired fallback typefaces	`String` or `List`	— none

Requires

[function] typography

font-size

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

Description

Function to get value from 'sizes' group

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	the key of the size you are interested in	`String`	— none
`$rem`	whether the returned value should use rem units	`Bool`	— none

Returns

Number —

the desired font size

Requires

[function] typography