General

csss

.flex-container a:hover, .flex-slider a:hover

.flex-container a:hover,
.flex-slider a:hover { ... }

Description

RESETS

.flexslider

.flexslider { ... }

Description

BASE STYLES

.flexslider

.flexslider { ... }

Description

DEFAULT THEME

.flex-caption

.flex-caption { ... }

Description

caption

.icon

.icon { ... }

Description

SVG icons

.site-header-container, .post-header-container

.site-header-container, .post-header-container { ... }

Description

Cover

.half

.half { ... }

Description

page specific

.page-content

.page-content { ... }

Description

Body

.front .page-content

.front .page-content { ... }

Description

front page only

.page

.page { ... }

Description

Pages

.post

.post { ... }

Description

Posts

.site-footer

.site-footer { ... }

Description

Footer

.site-signature

.site-signature { ... }

Description

Site Description/Signature (right)

.site-contact

.site-contact { ... }

Description

Contact Info (center)

.editor-link

.editor-link { ... }

Description

Editor link

fieldset

fieldset { ... }

Description

Forms

.featured--col

.featured--col { ... }

Description

featured image on posts / events pages

.lb-dataContainer

.lb-dataContainer { ... }

Description

Lightbox

.logo

.logo { ... }

Description

logo

li.nav-link

li.nav-link { ... }

Description

Nav items

.projects

.projects { ... }

Description

Individual project pages

mixins

border-color

@mixin border-color($vals...) { ... }

Description

Provides a quick method for targeting border-color on specific sides of a box. Use a null value to “skip” a side.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$vals`	List of arguments	`Arglist`	— none

Example

Usage

.element {
  @include border-color(#a60b55 #76cd9c null #e8ae1a);
}

CSS Output

.element {
  border-left-color: #e8ae1a;
  border-right-color: #76cd9c;
  border-top-color: #a60b55;
}

Output

border-color

Requires

[mixin] directional-property

border-top-radius

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

Description

Provides a quick method for targeting border-radius on both corners on the side of a box.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radii`	List of arguments	`Number`	— none

Example

Usage

.element-one {
  @include border-top-radius(5px);
}

.element-two {
  @include border-left-radius(3px);
}

CSS Output

.element-one {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.element-two {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

Output

border-radius

border-style

@mixin border-style($vals...) { ... }

Description

Provides a quick method for targeting border-style on specific sides of a box. Use a null value to “skip” a side.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$vals`	List of arguments	`Arglist`	— none

Example

Usage

.element {
  @include border-style(dashed null solid);
}

CSS Output

.element {
  border-bottom-style: solid;
  border-top-style: dashed;
}

Output

border-style

Requires

[mixin] directional-property

border-width

@mixin border-width($vals...) { ... }

Description

Provides a quick method for targeting border-width on specific sides of a box. Use a null value to “skip” a side.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$vals`	List of arguments	`Arglist`	— none

Example

Usage

.element {
  @include border-width(1em null 20px);
}

CSS Output

.element {
  border-bottom-width: 20px;
  border-top-width: 1em;
}

Output

border-width

Requires

[mixin] directional-property

clearfix

@mixin clearfix() { ... }

Description

Provides an easy way to include a clearfix for containing floats.

Parameters

None.

Example

Usage

.element {
  @include clearfix;
}

CSS Output

.element::after {
  clear: both;
  content: "";
  display: table;
}

Used by

[mixin] outer-container
[mixin] row

ellipsis

@mixin ellipsis($width: 100%) { ... }

Description

Truncates text and adds an ellipsis to represent overflow.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	Max-width for the string to respect before being truncated	`Number`	`100%`

Example

Usage

.element {
  @include ellipsis;
}

CSS Output

.element {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

hide-text

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

Description

Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.

Parameters

None.

Example

Usage

.element {
  @include hide-text;
}

CSS Output

.element {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

TODO's

Remove height argument in v5.0.0

margin

@mixin margin($vals...) { ... }

Description

Provides a quick method for targeting margin on specific sides of a box. Use a null value to “skip” a side.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$vals`	List of arguments	`Arglist`	— none

Example

Usage

.element {
  @include margin(null 10px 3em 20vh);
}

CSS Output

.element {
  margin-bottom: 3em;
  margin-left: 20vh;
  margin-right: 10px;
}

Output

margin

Requires

[mixin] directional-property

padding

@mixin padding($vals...) { ... }

Description

Provides a quick method for targeting padding on specific sides of a box. Use a null value to “skip” a side.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$vals`	List of arguments	`Arglist`	— none

Example

Usage

.element {
  @include padding(12vh null 10px 5%);
}

CSS Output

.element {
  padding-bottom: 10px;
  padding-left: 5%;
  padding-top: 12vh;
}

Output

padding

Requires

[mixin] directional-property

position

@mixin position($position: relative, $coordinates: null null null null...) { ... }

Description

Provides a quick method for setting an element’s position. Use a null value to “skip” a side.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	A CSS position value	`Position`	`relative`
`$coordinates`	List of values that correspond to the 4-value syntax for the edges of a box	`Arglist`	`null null null null`

Example

Usage

.element {
  @include position(absolute, 0 null null 10em);
}

CSS Output

.element {
  left: 10em;
  position: absolute;
  top: 0;
}

Requires

[function] is-length
[function] unpack

prefixer

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

Description

A mixin for generating vendor prefixes on non-standardized properties.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	Property to prefix	`String`	— none
`$value`	Value to use	`Any`	— none
`$prefixes`	Prefixes to define	`List`	— none

Example

Usage

.element {
  @include prefixer(border-radius, 10px, webkit ms spec);
}

CSS Output

.element {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Requires

[variable] prefix-for-webkit

size

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

Description

Sets the width and height of the element.

Parameters

parameter Name parameter Description parameter Type parameter Default value

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	A list of at most 2 size values. If there is only a single value in `$size` it is used for both width and height. All units are supported.	`List`	— none

$size

A list of at most 2 size values.

If there is only a single value in $size it is used for both width and height. All units are supported.

List

—

Example

Usage

.first-element {
  @include size(2em);
}

.second-element {
  @include size(auto 10em);
}

CSS Output

.first-element {
  width: 2em;
  height: 2em;
}

.second-element {
  width: auto;
  height: 10em;
}

Requires

[function] is-size
[function] is-size

TODO's

Refactor in 5.0.0 to use a comma-separated argument

word-wrap

@mixin word-wrap($wrap: break-word) { ... }

Description

Provides an easy way to change the word-wrap property.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$wrap`	Value for the `word-break` property.	`String`	`break-word`

Example

Usage

.wrapper {
  @include word-wrap(break-word);
}

CSS Output

.wrapper {
  overflow-wrap: break-word;
  word-break: break-all;
  word-wrap: break-word;
}

selection

@mixin selection($current-selector: false) { ... }

Description

Outputs the spec and prefixed versions of the ::selection pseudo-element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$current-selector`	If set to `true`, it takes the current element into consideration.	`Bool`	`false`

Content

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

Example

Usage

.element {
  @include selection(true) {
    background-color: #ffbb52;
  }
}

CSS Output

.element::-moz-selection {
  background-color: #ffbb52;
}

.element::selection {
  background-color: #ffbb52;
}

[private] directional-property

@mixin directional-property($pre, $suf, $vals) { ... }

Description

Output directional properties, for instance margin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$pre`	Prefix to use	`String`	— none
`$suf`	Suffix to use	`String`	— none
`$vals`	List of values	`List`	— none

Requires

[function] collapse-directionals
[function] contains-falsy

Used by

[mixin] border-color
[mixin] border-style
[mixin] border-width
[mixin] margin
[mixin] padding

direction-context

@mixin direction-context($direction: left-to-right) { ... }

Description

Changes the direction property used by other mixins called in the code block argument.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`.	`String`	`left-to-right`

Content

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

Example

Usage

@include direction-context(right-to-left) {
 .right-to-left-block {
   @include span-columns(6);
  }
}

CSS Output

.right-to-left-block {
  float: right;
   ...
}

display-context

@mixin display-context($display: block) { ... }

Description

Changes the display property used by other mixins called in the code block argument.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	Display value to be used within the block. Can be `table` or `block`.	`String`	`block`

Content

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

Example

@include display-context(table) {
 .display-table {
   @include span-columns(6);
  }
}

.display-table {
   display: table-cell;
   ...
}

fill-parent

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

Description

Forces the element to fill its parent container.

Parameters

None.

Example

Usage

.element {
  @include fill-parent;
}

CSS Output

.element {
  width: 100%;
  box-sizing: border-box;
}

Requires

[variable] border-box-sizing

Used by

[mixin] row

media

@mixin media($query, $total-columns: $grid-columns) { ... }

Description

Outputs a media-query block with an optional grid context (the total number of columns used in the grid).

Parameters

parameter Name parameter Description parameter Type parameter Default value

parameter Name	parameter Description	parameter Type	parameter Default value
`$query`	A list of media query features and values, where each `$feature` should have a corresponding `$value`. For a list of valid values for `$feature`, click here. If there is only a single `$value` in `$query`, `$default-feature` is going to be used. The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`).	`List`	— none
`$total-columns`	Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.	`Number (unitless)`	`$grid-columns`

$query

A list of media query features and values, where each $feature should have a corresponding $value. For a list of valid values for $feature, click here.

If there is only a single $value in $query, $default-feature is going to be used.

The number of total columns in the grid can be set by passing $columns at the end of the list (overrides $total-columns).

List

—

$total-columns

Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.

Number (unitless)

$grid-columns

Content

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

Example

Usage

 .responsive-element {
    @include media(769px) {
      @include span-columns(6);
    }
 }

.new-context-element {
  @include media(min-width 320px max-width 480px, 6) {
    @include span-columns(6);
  }
}

CSS Output

@media screen and (min-width: 769px) {
  .responsive-element {
    display: block;
    float: left;
    margin-right: 2.35765%;
    width: 48.82117%;
  }

  .responsive-element:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
  .new-context-element {
    display: block;
    float: left;
    margin-right: 4.82916%;
    width: 100%;
  }

  .new-context-element:last-child {
    margin-right: 0;
  }
}

Requires

[variable] default-feature
[variable] grid-columns
[variable] grid-columns
[variable] grid-columns
[variable] grid-columns
[variable] grid-columns
[variable] grid-columns
[variable] grid-columns

omega

@mixin omega($query: block) { ... }

Description

Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every nth-child occurrence. Works only with block layouts.

Parameters

parameter Name parameter Description parameter Type parameter Default value

parameter Name	parameter Description	parameter Type	parameter Default value
`$query`	List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`). When passed an `nth-child` argument of type `n` with `block` display, the omega mixin automatically adds a clear to the `n+1` th element. Note that composite arguments such as `2n+1` do not support this feature. Deprecation warning: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead.	`List`	`block`

$query

List of arguments. Supported arguments are nth-child selectors (targets a specific pseudo element) and auto (targets last-child).

When passed an nth-child argument of type *n with block display, the omega mixin automatically adds a clear to the *n+1 th element. Note that composite arguments such as 2n+1 do not support this feature.

Deprecation warning: The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead.

List

block

Example

Usage

.element {
  @include omega;
}

.nth-element {
  @include omega(4n);
}

CSS Output

.element {
  margin-right: 0;
}

.nth-element:nth-child(4n) {
  margin-right: 0;
}

.nth-element:nth-child(4n+1) {
  clear: left;
}

Requires

[variable] default-layout-direction

outer-container

@mixin outer-container($local-max-width: $max-width) { ... }

Description

Makes an element a outer container by centring it in the viewport, clearing its floats, and setting its max-width. Although optional, using outer-container is recommended. The mixin can be called on more than one element per page, as long as they are not nested.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$local-max-width`	Max width to be applied to the element. Can be a percentage or a measure.	`Number [unit]`	`$max-width`

Example

Usage

.element {
  @include outer-container(100%);
}

CSS Output

.element {
  *zoom: 1;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.element:before, .element:after {
  content: " ";
  display: table;
}

.element:after {
  clear: both;
}

Requires

[mixin] clearfix

pad

@mixin pad($padding: flex-gutter()) { ... }

Description

Adds padding to the element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$padding`	A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value.	`List`	`flex-gutter()`

Example

Usage

.element {
  @include pad(30px -20px 10px default);
}

CSS Output

.element {
  padding: 30px -20px 10px 2.35765%;
}

row

@mixin row($display: default, $direction: $default-layout-direction) { ... }

Description

Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	Sets the display property of the element and the display context that will be used by its children. Can be `block` or `table`.	`String`	`default`
`$direction`	Sets the layout direction. Can be `LTR` (left-to-right) or `RTL` (right-to-left).	`String`	`$default-layout-direction`

Example

Usage

.element {
  @include row();
}

CSS Output

 .element {
   *zoom: 1;
   display: block;
 }

.element:before, .element:after {
  content: " ";
  display: table;
}

.element:after {
  clear: both;
}

Requires

[mixin] fill-parent
[mixin] clearfix
[variable] default-layout-direction

shift

@mixin shift($n-columns: 1) { ... }

Description

Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$n-columns`	Number of columns by which the element shifts.	`Number (unitless)`	`1`

Example

Usage

.element {
  @include shift(-3);
}

CSS output

.element {
  margin-left: -25.58941%;
}

Requires

[mixin] shift-in-context

shift-in-context

@mixin shift-in-context($shift) { ... }

Description

Translates an element horizontally by a number of columns, in a specific nesting context.

Parameters

parameter Name parameter Description parameter Type parameter Default value

parameter Name	parameter Description	parameter Type	parameter Default value
`$shift`	A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`). The two values can be separated with any string such as `of`, `/`, etc.	`List`	— none

$shift

A list containing the number of columns to shift ($columns) and the number of columns of the parent element ($container-columns).

The two values can be separated with any string such as of, /, etc.

List

—

Example

Usage

.element {
  @include shift(-3 of 6);
}

CSS output

.element {
  margin-left: -52.41458%;
}

Requires

[variable] default-layout-direction
[variable] grid-columns

Used by

[mixin] shift

span-columns

@mixin span-columns($span, $display: block) { ... }

Description

Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.

Parameters

parameter Name parameter Description parameter Type parameter Default value

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional). If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid. The values can be separated with any string such as `of`, `/`, etc. `$columns` also accepts decimals for when it's necessary to break out of the standard grid. E.g. Passing `2.4` in a standard 12 column grid will divide the row into 5 columns.	`List`	— none
`$display`	Sets the display property of the element. By default it sets the display propert of the element to `block`. If passed `block-collapse`, it also removes the margin gutter by adding it to the element width. If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid.	`String`	`block`

$span

A list containing $columns, the unitless number of columns the element spans (required), and $container-columns, the number of columns the parent element spans (optional).

If only one value is passed, it is assumed that it's $columns and that that $container-columns is equal to $grid-columns, the total number of columns in the grid.

The values can be separated with any string such as of, /, etc.

$columns also accepts decimals for when it's necessary to break out of the standard grid. E.g. Passing 2.4 in a standard 12 column grid will divide the row into 5 columns.

List

—

$display

Sets the display property of the element. By default it sets the display propert of the element to block.

If passed block-collapse, it also removes the margin gutter by adding it to the element width.

If passed table, it sets the display property to table-cell and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid.

String

block

Example

Usage

 .element {
   @include span-columns(6);

  .nested-element {
    @include span-columns(2 of 6);
  }
}

CSS Output

.element {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 48.82117%;
}

.element:last-child {
  margin-right: 0;
}

.element .nested-element {
  display: block;
  float: left;
  margin-right: 4.82916%;
  width: 30.11389%;
}

.element .nested-element:last-child {
  margin-right: 0;
}

Requires

[variable] default-layout-direction

reset-display

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

Description

Resets the active display property to block. Particularly useful when changing the display property in a single row.

Parameters

None.

Example

Usage

.element {
  @include row(table);
  // Context changed to table display
}

@include reset-display;
// Context is reset to block display

Used by

[mixin] reset-all

reset-layout-direction

@mixin reset-layout-direction() { ... }

Description

Resets the active layout direction to the default value set in $default-layout-direction. Particularly useful when changing the layout direction in a single row.

Parameters

None.

Example

Usage

.element {
  @include row($direction: RTL);
  // Context changed to right-to-left
}

@include reset-layout-direction;
// Context is reset to left-to-right

Requires

[variable] default-layout-direction

Used by

[mixin] reset-all

reset-all

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

Description

Resets both the active layout direction and the active display property.

Parameters

None.

Example

Usage

.element {
  @include row(table, RTL);
  // Context changed to table table and right-to-left
}

@include reset-all;
// Context is reset to block display and left-to-right

Requires

[mixin] reset-display
[mixin] reset-layout-direction

variables

buttons-list

$buttons-list: 'button',
               'input[type="button"]',
               'input[type="reset"]',
               'input[type="submit"]';

Description

Generates variables for all buttons. Please note that you must use interpolation on the variable: #{$all-buttons}.

Type

List

Example

Usage

#{$all-buttons} {
  background-color: #f00;
}

#{$all-buttons-focus},
#{$all-buttons-hover} {
  background-color: #0f0;
}

#{$all-buttons-active} {
  background-color: #00f;
}

CSS Output

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: #f00;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background-color: #0f0;
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  background-color: #00f;
}

TODO's

Remove double assigned variables (Lines 59–62) in v5.0.0

georgia

$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;

Description

Georgia font stack.

Type

List

helvetica

$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;

Description

Helvetica font stack.

Type

List

lucida-grande

$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;

Description

Lucida Grande font stack.

Type

List

monospace

$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;

Description

Monospace font stack.

Type

List

verdana

$verdana: "Verdana", "Geneva", sans-serif;

Description

Verdana font stack.

Type

List

text-inputs-list

$text-inputs-list: 'input[type="color"]',
                   'input[type="date"]',
                   'input[type="datetime"]',
                   'input[type="datetime-local"]',
                   'input[type="email"]',
                   'input[type="month"]',
                   'input[type="number"]',
                   'input[type="password"]',
                   'input[type="search"]',
                   'input[type="tel"]',
                   'input[type="text"]',
                   'input[type="time"]',
                   'input[type="url"]',
                   'input[type="week"]',
                   'textarea';

Description

Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: #{$all-text-inputs}.

Type

List

Example

Usage

#{$all-text-inputs} {
  border: 1px solid #f00;
}

#{$all-text-inputs-focus},
#{$all-text-inputs-hover} {
  border: 1px solid #0f0;
}

#{$all-text-inputs-active} {
  border: 1px solid #00f;
}

CSS Output

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
  border: 1px solid #f00;
}

input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
textarea:focus,
input[type="color"]:hover,
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="email"]:hover,
input[type="month"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="time"]:hover,
input[type="url"]:hover,
input[type="week"]:hover,
textarea:hover {
  border: 1px solid #0f0;
}

input[type="color"]:active,
input[type="date"]:active,
input[type="datetime"]:active,
input[type="datetime-local"]:active,
input[type="email"]:active,
input[type="month"]:active,
input[type="number"]:active,
input[type="password"]:active,
input[type="search"]:active,
input[type="tel"]:active,
input[type="text"]:active,
input[type="time"]:active,
input[type="url"]:active,
input[type="week"]:active,
textarea:active {
  border: 1px solid #00f;
}

ease-in-quad

$ease-in-quad: cubic-bezier(0.550,  0.085, 0.680, 0.530);

Description

CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)

Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html

Type

Cubic-bezier

asset-pipeline

$asset-pipeline: false !default;

Description

A global setting to enable or disable the $asset-pipeline variable for all functions that accept it.

Type

Bool

prefix-for-webkit

$prefix-for-webkit: true !default;

Description

Global variables to enable or disable vendor prefixes

Used by

[mixin] prefixer

disable-warnings

$disable-warnings: false !default;

Description

Disable all deprecation warnings. Defaults to false. Set with a !global flag.

Type

Bool

column

$column: modular-scale(3, 1em, $golden) !default;

Description

Sets the relative width of a single grid column. The unit used should be the same one used to define $gutter. To learn more about modular-scale() see Bourbon docs. Set with a !global flag.

Type

Number (unit)

gutter

$gutter: modular-scale(1, 1em, $golden) !default;

Description

Sets the relative width of a single grid gutter. The unit used should be the same one used to define $column. To learn more about modular-scale() see Bourbon docs. Set with the !global flag.

Type

Number (unit)

grid-columns

$grid-columns: 12 !default;

Description

Sets the total number of columns in the grid. Its value can be overridden inside a media query using the media() mixin. Set with the !global flag.

Type

Number (unitless)

Used by

[mixin] media
[mixin] media
[mixin] media
[mixin] media
[mixin] media
[mixin] media
[mixin] media
[mixin] shift-in-context

max-width

$max-width: em(768) !default;

Description

Sets the max-width property of the element that includes outer-container(). To learn more about em() see Bourbon docs. Set with the !global flag.

Type

Number (unit)

border-box-sizing

$border-box-sizing: true !default;

Description

When set to true, it sets the box-sizing property of all elements to border-box. Set with a !global flag.

Type

Bool

Example

CSS Output

html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit;
}

Used by

[mixin] fill-parent

default-feature

$default-feature: min-width;

Description

Sets the default media feature that media() and new-breakpoint() revert to when only a breakpoint value is passed. Set with a !global flag.

Type

String

Used by

[function] new-breakpoint
[mixin] media

default-layout-direction

$default-layout-direction: LTR !default;

Description

Sets the default layout direction of the grid. Can be LTR or RTL. Set with a !global flag.

Type

String

Used by

[mixin] omega
[mixin] row
[mixin] shift-in-context
[mixin] span-columns
[mixin] reset-layout-direction

visual-grid

$visual-grid: false !default;

Description

Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the !global flag.

Type

Bool

visual-grid-color

$visual-grid-color: #eee !default;

Description

Sets the visual grid color. Set with !global flag.

Type

Color

visual-grid-index

$visual-grid-index: back !default;

Description

Sets the z-index property of the visual grid. Can be back (behind content) or front (in front of content). Set with !global flag.

Type

String

visual-grid-opacity

$visual-grid-opacity: 0.4 !default;

Description

Sets the opacity property of the visual grid. Set with !global flag.

Type

Number (unitless)

functions

[private] contains-falsy

@function contains-falsy($list) { ... }

Description

Checks if a list does not contains a value.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The list to check against.	`List`	— none

Returns

Bool

Used by

[function] collapse-directionals
[mixin] directional-property

[private] contains

@function contains($list, $values) { ... }

Description

Checks if a list contains a value(s).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The list to check against.	`List`	— none
`$values`	A single value or list of values to check for.	`List`	— none

Returns

Bool

Example

Usage

contains($list, $value)

Used by

[function] is-number
[function] is-size

is-length

@function is-length($value) { ... }

Description

Checks for a valid CSS length.

Parameters

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

Used by

[mixin] position
[function] is-size

is-light

@function is-light($color) { ... }

Description

Programatically determines whether a color is light or dark.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	— none	`Color (hex)`	— none

Returns

Bool

Example

Usage

is-light($color)

is-number

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

Description

Checks for a valid number.

Parameters

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

Requires

[function] contains

is-size

@function is-size($value) { ... }

Description

Checks for a valid CSS size.

Parameters

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

Requires

[function] contains
[function] is-length

Used by

[mixin] size
[mixin] size

shade

@function shade($color, $percent) { ... }

Description

Mixes a color with black.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	— none	`Color`	— none
`$percent`	The amount of black to be mixed in.	`Number (percentage)`	— none

Returns

Color

Example

Usage

.element {
  background-color: shade(#ffbb52, 60%);
}

CSS Output

.element {
  background-color: #664a20;
}

strip-units

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

Description

Strips the unit from a number.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	— none	`Number (with unit)`	— none

Returns

Number (unitless)

Example

Usage

$dimension: strip-units(10em);

CSS Output

$dimension: 10;

tint

@function tint($color, $percent) { ... }

Description

Mixes a color with white.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	— none	`Color`	— none
`$percent`	The amount of white to be mixed in.	`Number (percentage)`	— none

Returns

Color

Example

Usage

.element {
  background-color: tint(#6ecaa6, 40%);
}

CSS Output

.element {
  background-color: #a8dfc9;
}

unpack

@function unpack($shorthand) { ... }

Description

Converts shorthand to the 4-value syntax.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$shorthand`	— none	`List`	— none

Example

Usage

.element {
  margin: unpack(1em 2em);
}

CSS Output

.element {
  margin: 1em 2em 1em 2em;
}

Used by

[mixin] position

collapse-directionals

@function collapse-directionals($vals) { ... }

Description

Directional-property mixins are shorthands for writing properties like the following

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$vals`	List of directional values	`List`	— none

Returns

List

Example

Usage

.element {
  @include border-style(dotted null);
  @include margin(null 0 10px);
}

CSS Output

.element {
  border-bottom-style: dotted;
  border-top-style: dotted;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
}

Requires

[function] contains-falsy

Used by

[mixin] directional-property

new-breakpoint

@function new-breakpoint($query, $total-columns: $grid-columns) { ... }

Description

Returns a media context (media query / grid context) that can be stored in a variable and passed to media() as a single-keyword argument. Media contexts defined using new-breakpoint are used by the visual grid, as long as they are defined before importing Neat.

Parameters

parameter Name parameter Description parameter Type parameter Default value

parameter Name	parameter Description	parameter Type	parameter Default value
`$query`	A list of media query features and values. Each `$feature` should have a corresponding `$value`. If there is only a single `$value` in `$query`, `$default-feature` is going to be used. The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click here.	`List`	— none
`$total-columns`	Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.	`Number (unitless)`	`$grid-columns`

$query

A list of media query features and values. Each $feature should have a corresponding $value.

If there is only a single $value in $query, $default-feature is going to be used.

The number of total columns in the grid can be set by passing $columns at the end of the list (overrides $total-columns). For a list of valid values for $feature, click here.

List

—

$total-columns

Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.

Number (unitless)

$grid-columns

Example

Usage

$mobile: new-breakpoint(max-width 480px 4);

.element {
  @include media($mobile) {
    @include span-columns(4);
  }
}

CSS Output

@media screen and (max-width: 480px) {
  .element {
    display: block;
    float: left;
    margin-right: 7.42297%;
    width: 100%;
  }
  .element:last-child {
    margin-right: 0;
  }
}

Requires

[variable] default-feature

General

csss

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

Description

mixins

Description

Parameters

Example

Output

Requires

Description

Parameters

Example

Output

Description

Parameters

Example

Output

Requires

Description

Parameters

Example

Output

Requires

Description

Parameters

Example

Used by

Links

Description

Parameters

Example

Description

Parameters

Example

TODO's

Links

Description

Parameters

Example

Output

Requires

Description

Parameters

Example

Output

Requires

Description

Parameters

Example

Requires

Description

Parameters

Example

Requires

Description

Parameters

Example