General

functions

[private] _fetch-bourbon-setting

@function _fetch-bourbon-setting($setting) { ... }

Description

Return a Bourbon setting.

Parameters

NameDescriptionTypeDefault value
$setting—String—

Returns

Boolean or Color or List or Number or String

Example

_fetch-bourbon-setting(rails-asset-pipeline)

Used by

[private] _font-source-declaration

@function _font-source-declaration($font-family, $file-path, $asset-pipeline, $file-formats) { ... }

Description

Builds the src list for an @font-face declaration.

Parameters

NameDescriptionTypeDefault value
$font-family—String—
$file-path—String—
$asset-pipeline—Boolean—
$file-formats—List—

Returns

List

Used by

Links

[private] _unpack-shorthand

@function _unpack-shorthand($shorthand) { ... }

Description

Transforms shorthand that can range from 1-to-4 values to be 4 values.

Parameters

NameDescriptionTypeDefault value
$shorthand—List—

Example

.element {
  margin: _unpack-shorthand(1em 2em);
}

// CSS Output
.element {
  margin: 1em 2em 1em 2em;
}

Used by

shade

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

Description

Mixes a color with black.

Parameters

NameDescriptionTypeDefault value
$color—Color—
$percent

The amount of black to be mixed in.

Number (percentage)—

Returns

Color

Example

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

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

Throws

  • #{$color} is not a valid color for the $color argument in

Requires

[private] _is-color

@function _is-color($color) { ... }

Description

Checks for a valid CSS color.

Parameters

NameDescriptionTypeDefault value
$color—String—

Returns

Boolean

Used by

mixins

animation

@mixin animation() { ... }

Description

Mixin for animation.

Parameters

None.

Example

mixin scss

  .element {
    @include animation($name,$time,$mode);
  }

  // CSS Output
  .element {
    -webkit-animation: $name $time $mode;
    -moz-animation: $name $time $mode;
    -o-animation: $name $time $mode;
    animation: $name $time $mode;
  }

Mixin for animation delay.

delay mixin scss

.element {
  @include animation-delay($time);
}

// CSS Output
.element {
  -webkit-animation-delay: $time;
  -moz-animation-delay: $time;
  -o-animation-delay: $time;
  animation-delay: $time;
}

box-sizing

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

Description

Mixin for box-sizing.

Parameters

None.

Example

.element {
  @include box-sizing;
}

// CSS Output
.element {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Requires

clearfix

@mixin clearfix() { ... }

Description

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

Parameters

None.

Example

.element {
  @include clearfix;
}

// CSS Output
.element::after {
  clear: both;
  content: "";
  display: block;
}

Links

ellipsis

@mixin ellipsis($width: 100%, $display: inline-block) { ... }

Description

Truncates text and adds an ellipsis to represent overflow.

Parameters

NameDescriptionTypeDefault value
$width

The max-width for the string to respect before being truncated.

Number100%
$display

Sets the display-value of the element.

Stringinline-block

Example

.element {
  @include ellipsis;
}

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

flex-init

@mixin flex-init() { ... }

Description

Mixin for flex init.

Parameters

None.

Example

mixin scss

.element {
  @include flex-init;
}

// CSS Output
.element {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

flex-direction

@mixin flex-direction() { ... }

Description

Mixin for flex init.

Parameters

None.

Example

mixin scss

.element {
  @include flex-direction($direction);
}

// CSS Output
.element {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

font-face

@mixin font-face($font-family, $file-path, $asset-pipeline: false, $file-formats: ("ttf", "woff2", "woff")) { ... }

Description

Generates an @font-face declaration. You can choose the specific file formats you need to output; the mixin supports eot, ttf, svg, woff2 and woff. The mixin also supports usage with the Rails Asset Pipeline, which you can enable per use, or globally in the $bourbon() settings.

Parameters

NameDescriptionTypeDefault value
$font-family—String—
$file-path—String—
$asset-pipeline

Set to true if you’re using the Rails Asset Pipeline (place the fonts in app/assets/fonts/). Can also be set globally using the rails-asset-pipeline key in the Bourbon settings.

Stringfalse
$file-formats

List of the font file formats to include. Can also be set globally using the global-font-file-formats key in the Bourbon settings.

String or List("ttf", "woff2", "woff")

Content

This mixin allows extra content to be passed (through the @content directive). Role: Any additional CSS properties that are included in the `@include` directive will be output within the `@font-face` declaration, e.g. you can pass in `font-weight`, `font-style` and/or `unicode-range`.

Example

@include font-face(
  "source-sans-pro",
  "fonts/source-sans-pro-regular",
  ("woff2", "woff")
) {
  font-style: normal;
  font-weight: 400;
}

// CSS Output
@font-face {
  font-family: "source-sans-pro";
  src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
       url("fonts/source-sans-pro-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
}

Requires

hide-text

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

Description

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

Parameters

None.

Example

.element {
  @include hide-text;
}

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

Links

position

@mixin position($position, $box-edge-values) { ... }

Description

Provides a concise, one-line method for setting an element’s positioning properties: position, top, right, bottom and left. Use a null value to “skip” an edge of the box.

Parameters

NameDescriptionTypeDefault value
$position

A CSS position value.

String—
$box-edge-values

List of lengths; accepts CSS shorthand.

List—

Example

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

// CSS Output
.element {
  left: 10em;
  position: relative;
  top: 0;
}
.element {
  @include position(absolute, 0);
}

// CSS Output
.element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Requires

prefixer

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

Description

Generates vendor prefixes.

Parameters

NameDescriptionTypeDefault value
$property

Property to prefix.

String—
$value

Value to use.

String—
$prefixes

Vendor prefixes to output.

List—

Example

.element {
  @include prefixer(appearance, none, ("webkit", "moz"));
}

// CSS Output
.element {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Used by

Author

  • Hugo Giraudel

word-wrap

@mixin word-wrap() { ... }

Parameters

None.

Example

CSS Output

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

csss

/// @example css - CSS Output /// .wrapper

/// @example css - CSS Output
///   .wrapper { ... }

Description

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

Example

Usage

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

variables

font-helvetica

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

Description

A variable that outputs a Helvetica font stack.

Type

List

Example

.element {
  font-family: $font-stack-helvetica;
}

// CSS Output
.element {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

Links

font-open-sans

$font-open-sans: "Open Sans", sans-serif;

Description

A variable that outputs a Open Sans font stack.

Type

List

Example

.element {
  font-family: $font-open-sans;
}

// CSS Output
.element {
  font-family: "Open Sans", sans-serif;
}

Links

font-montserrat

$font-montserrat: "Montserrat", sans-serif;

Description

A variable that outputs a Montserrat font stack.

Type

List

Example

.element {
  font-family: $font-montserrat;
}

// CSS Output
.element {
  font-family: "Montserrat", sans-serif;
}

Links

font-lato

$font-lato: "Lato", sans-serif;

Description

A variable that outputs a Helvetica font stack.

Type

List

Example

.element {
  font-family: $font-lato;
}

// CSS Output
.element {
  font-family: "Lato", sans-serif;
}

Links

font-raleway

$font-raleway: "Raleway", sans-serif;

Description

A variable that outputs a Raleway font stack.

https://fonts.google.com/?query=rale&selection.family=Raleway

Type

List

Example

.element {
  font-family: $font-raleway;
}

// CSS Output
.element {
  font-family: "Raleway", sans-serif;
}

font-roboto

$font-roboto: "Roboto", sans-serif;

Description

A variable that outputs a Roboto font stack.

Type

List

Example

.element {
  font-family: $font-roboto;
}

// CSS Output
.element {
  font-family: "Roboto", sans-serif;
}

Links

font-oswald

$font-oswald: "Oswald", sans-serif;

Description

A variable that outputs a Oswald font stack.

Type

List

Example

.element {
  font-family: $font-oswald;
}

// CSS Output
.element {
  font-family: "Oswald", sans-serif;
}

Links

ease-in-quad

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

Description

CSS cubic-bezier timing functions.

Type

String

Links