bem

mixins

element (aliased as `e` )

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

Description

Block Element

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$element`	Element's name	`String`	—none

Content

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

Example

.foo {
    width: 30em;
    @include element('bar') {
        background: #fff;
    }
}

Output

.foo {
  width: 30em;
}
.foo__bar {
    background: #fff;
}

Used by

[mixin] e

modifier (aliased as `m` )

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

Description

Block Modifier

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$modifier`	Modifier's name	`String`	—none

Content

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

Example

.foo {
    width: 30em;
    @include element('bar') {
        background: #fff;
        @include modifier('baz') {
            border: solid 1px #000;
        }
    }
}

Output

.foo {
  width: 30em;
}
.foo__bar {
    background: #fff;
}
.foo__bar--baz {
    border: solid 1px #000;
}

Used by

[mixin] m

e (alias for `element`)

@mixin e() { ... }

Refer to element.

m (alias for `modifier`)

@mixin m() { ... }

Refer to modifier.

grid

mixins

container

@mixin container($max-row-width: 100%, $center: false) { ... }

Description

Mixin to create a grid container(row) based on flexbox. This mixin essentially creates a flexbox grid row to contain one or more flexbox grid columns

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$max-row-width`	Element's width	`Width`	`100%`
`$center`	true / false	`Boolean`	`false`

Example

.foo {
  @include conatiner(1200px);
}

Output

.foo {
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

column

@mixin column($width: 1, $gutter: 1) { ... }

Description

Mixin to create a grid column(row) based on flexbox. This mixin creates a flexbox grid column

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$width`	Column width converted to percentage	`Width`	`1`
`$gutter`	Gutter width	`Width`	`1`

Example

.bar {
  @include column(1/2);
}

Output

.bar {
  width: 49.5%;
}

breakpoint

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

Description

Media query Mixin for map based breakpoint. This mixin creates a media query block

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	thin(20em) OR normal(46.875em) OR wide(73.125em) OR full(100em)	`Name`	—none

Content

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

Example

@include breakpoint(wide) {
  .baz { color: black; }
}

Output

@media (min-width: 73.125em) {
  .baz { color: black; }
}

Requires

[variable] breakpoints
[variable] breakpoints

utility

functions

color

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

Description

Function to get color of a shade from color-map.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$color`	Color (aorange, agreen, ablue or agray)	`Color`	—none
`$shade`	Shade (base, light, lighter, dark, darker)	`Shade`	—none

Example

.example-el {
    background: color(agray, lighter);
    color: color(ablue); // base blue
}

Output

.example-el {
    background: #dfdfdf;
    color: #00abde;
}

Requires

[variable] colors
[variable] colors

em

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

Description

Function to convert px to ems

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$pixels`	pixels to convert to em	`Pixels`	—none
`$context`	base font size	`Context`	`base-font-size`

Example

.example-el {
    padding-top: em(16px);
}

Output

.example-el {
    padding-top: 1em;
}

strip-unit

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

Description

Function to remove unit of length. This is an internal function removes length unit.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$number`	Number to remove unit from	`Number`	—none

Returns

Number —

Unitless number

z-index

@function z-index($layer) { ... }

Description

Function to get z-index values based on layer names.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$layer`	Layer name (bump - 10, dropdown - 100, overlay - 200, modal - 300, trump- 1000)	`Layer`	—none

Example

.example-el {
    z-index: z-index(bump); // 10
}

Output

.example-el {
    z-index: 10;
}

Requires

[variable] z-index
[variable] z-index
[variable] z-index

mixins

border-radius

@mixin border-radius($border-radius: 6px) { ... }

Description

Mixin to create border radius for an element. This mixin creates border radius for an element. Radius can be specified as a single radius or as top-left, top-right, bottom-right, bottom-left

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$border-radius`	Border Size	`Size`	`6px`

Example

.foo {
  @include border-radius(10px);
}

Output

.foo {
  border-radius: 10px;
}

Example

.bar {
  @include border-radius(0, 10px, 15px, 20px);
}

Output

.bar {
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 20px;
}

Requires

[variable] border-radius

border

@mixin border($border: 1px solid #000) { ... }

Description

Mixin to create border for an element. This mixin creates border for an element. Sides can be specified as top, right, bottom, left

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$border`	Border	`Size`	`1px solid #000`

Example

.foo {
  @include border(1px solid #333);
}

Output

.foo {
  border: 1px solid  #333;
}

Example

.bar {
  @include border(1px solid  #333, top bottom);
}

Output

.bar {
  border-top: 1px solid  #333;
  border-bottom: 1px solid  #333;
}

center

@mixin center($direction) { ... }

Description

Mixin to center an absolutely positioned element. This mixin centers an absolutely positioned element within its parents.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$direction`	vertical, horizontal, both	`Direction`	—none

Example

.foo {
  @include center(both);
}

Output

.foo {
  top: 50%;
  left: 50%
  transform: translate(-50%, -50%);
}

clearfix

@mixin clearfix() { ... }

Description

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

Parameters

None.

Example

.element {
  @include clearfix;
}

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

font-face

@mixin font-face($font-name, $font-file, $font-weight: normal, $font-style: normal) { ... }

Description

Mixin for custom fonts. This mixin inserts font-face declarations for custom fonts.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-name`	Font Name	`Font`	—none
`$font-file`	Font File	`Url`	—none
`$font-weight`	Font Weight	`Weight`	`normal`
`$font-style`	Font Style	`Style`	`normal`

Example

@include font-face('Museo', 'museo-sans-500');

Output

@font-face {
  font-family: "Museo";
  src: url("museo-sans-500.woff") format("woff"), url("museo-sans-500.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

font-size

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

Description

Mixin that includes fallback px declaration and calculated rem value.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	the value in pixel you want to convert	`Size`	—none

Example

.foo {
   @include font-size(12);
}

Output

.foo {
     font-size: 12px;
     font-size: 0.75rem;
 }

position

@mixin position($type: relative, $top: null, $right: null, $bottom: null, $left: null) { ... }

Description

This mixin sets the position of an element.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$type`	absolute, relative, fixed	`Type`	`relative`
`$top`	top	`Top`	`null`
`$right`	right	`Right`	`null`
`$bottom`	bottom	`Bottom`	`null`
`$left`	left	`Left`	`null`

Example

.foo {
   @include position(absolute, null null 10px 15px);
}

Output

.foo {
     position: absolute;
     bottom: 10px;
     left: 15px;
 }

rem-fallback

@mixin rem-fallback($property, $px-values) { ... }

Description

This mixin coverts px units to rem with fallback.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$property`	css property	`Property`	—none
`$px-values`	pixel values	`Pixel values`	—none

Example

.el {
    @include('font-size', 16px);
}

Output

.el {
    font-size: 16px;
    font-size: 1rem;
}

Requires

[variable] base-font-size

size

@mixin size($width, $height: $width) { ... }

Description

Mixin to size an element. This mixin sets width and height for an element.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$width`	Width	`Width`	—none
`$height`	Height	`Height`	`$width`

Example

.foo {
  @include size(100px);
}

Output

.foo {
  width: 100px;
  height: 100px;
}

Example

.bar {
  @include size(400px, 300px);
}

Output

.bar {
  width: 400px;
  height: 300px;
}

triangle

@mixin triangle($direction: down, $color: #242424, $size: 1em) { ... }

Description

Mixin for creating triangles. This mixin creates triangles should be used on a pseudo element.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$direction`	triangle direction (up, down, left, right)	`String`	`down`
`$color`	triangle color	`Color`	`#242424`
`$size`	triangle size	`Number`	`1em`

Example

.foo {
   @include triangle(down, 1em, #4fade3);
}

Output

.foo {
     top: 100%;
     left: 1em;
     position: absolute;
     width: 0;
     height: 0;
     content: '';
     z-index: 2;
     border-top: 1.5em solid #3498db;
     border-left: 1em solid transparent;
     border-right: 1em solid transparent;
 }

variables

colors

$colors: (
    ablack: (
        base: #000
    ),
    awhite: (
        base: #fff
    ),
    ablue: (
        base: #00a8de,
        darker: #007398,
        dark: #008bb8,
        light: #6bcbf2,
        lighter: #bfefff
    ),
    agreen: (
        base: #70cf36,
        darker: #468222,
        dark: #549c29,
        light: #96d96e,
        lighter: #c8efb0
    ),
    aorange: (
        base: #ff8f43,
        darker: #e15b00,
        dark: #fb7419,
        light: #ffb480,
        lighter: #ffd7bb
    ),
    agray: (
        base: #808080,
        darker: #242424,
        dark: #4d4d4d,
        light: #b3b3b3,
        lighter: #dfdfdf
    )
) !default;

Description

Default color map.

Type

Map

Used by

[function] color
[function] color

breakpoints

$breakpoints: (
    thin: 20em,
    normal: 46.875em,
    wide: 73.125em,
    full: 100em
) !default;

Description

Default breakpoints.

Type

Map

Map structure

map keyName	map keyDescription	map keyType	map keyValue
`thin`	Thinnest breakpoint setting for breakpoint mixin.	`Breakpoint`	`20em`
`normal`	Medium breakpoint setting for breakpoint mixin.	`Breakpoint`	`46.875em`
`wide`	Widest breakpoint setting for breakpoint mixin.	`Breakpoint`	`73.125em`
`full`	Widest breakpoint setting for breakpoint mixin.	`Breakpoint`	`100em`

Used by

[mixin] breakpoint
[mixin] breakpoint

row-width

$row-width: 100% !default;

Description

Default max-width for container mixin.

Type

String

gutter-width

$gutter-width: 1.5em !default;

Description

Default gutter for column mixin.

Type

String

border-radius

$border-radius: .375em !default;

Description

Default radius for border-radius mixin.

Type

String

Used by

[mixin] border-radius

border

$border: 1px solid #000 !default;

Description

Default border for border mixin.

Type

String

z-index

$z-index: (
    bump: 10,
    dropdown: 100,
    overlay: 200,
    modal: 300,
    trump: 1000
);

Description

Default z-index values.

Type

Map

Map structure

map keyName	map keyDescription	map keyType	map keyValue
`bump`	lowest z-index.	`Z-index`	`10`
`dropdown`	z-index of 100.	`Z-index`	`100`
`overlay`	z-index of 200.	`Z-index`	`200`
`modal`	z-index of 300.	`Z-index`	`300`
`trump`	z-index of 1000.	`Z-index`	`1000`

Used by

[function] z-index
[function] z-index
[function] z-index

base-font-size

$base-font-size: 16px;

Description

Default border for border mixin.

Type

String

Used by

[mixin] rem-fallback

bem

mixins

element (aliased as e )

Description

Parameters

Content

Example

Used by

modifier (aliased as m )

Description

Parameters

Content

Example

Used by

e (alias for element)

m (alias for modifier)

grid

mixins

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Content

Example

Requires

utility

functions

Description

Parameters

Example

Requires

Description

Parameters

Example

Description

Parameters

Returns

Description

Parameters

Example

Requires

mixins

Description

Parameters

Example

Requires

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Example

Requires

Description

Parameters

Example

Description

Parameters

Example

variables

variables

element (aliased as `e` )

modifier (aliased as `m` )

e (alias for `element`)

m (alias for `modifier`)