bem

mixins

element (aliased as e )

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

Description

Block Element

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$element

Element's name

Stringnone

Content

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

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$modifier

Modifier's name

Stringnone

Content

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

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$max-row-width

Element's width

Width100%
$center

true / false

Booleanfalse

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

Column width converted to percentage

Width1
$gutter

Gutter width

Width1

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

thin(20em) OR normal(46.875em) OR wide(73.125em) OR full(100em)

Namenone

Content

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

Example

Example

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

Output

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

Requires

utility

functions

color

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

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

Color (aorange, agreen, ablue or agray)

Colornone
$shade

Shade (base, light, lighter, dark, darker)

Shadenone

Example

Example

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

Output

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

Requires

em

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

Description

Function to convert px to ems

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$pixels

pixels to convert to em

Pixelsnone
$context

base font size

Contextbase-font-size

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$number

Number to remove unit from

Numbernone

Returns

Number

Unitless number

z-index

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

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$layer

Layer name (bump - 10, dropdown - 100, overlay - 200, modal - 300, trump- 1000)

Layernone

Example

Example

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

Output

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

Requires

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$border-radius

Border Size

Size6px

Example

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

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$border

Border

Size1px solid #000

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$direction

vertical, horizontal, both

Directionnone

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$font-name

Font Name

Fontnone
$font-file

Font File

Urlnone
$font-weight

Font Weight

Weightnormal
$font-style

Font Style

Stylenormal

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

the value in pixel you want to convert

Sizenone

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$type

absolute, relative, fixed

Typerelative
$top

top

Topnull
$right

right

Rightnull
$bottom

bottom

Bottomnull
$left

left

Leftnull

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$property

css property

Propertynone
$px-values

pixel values

Pixel valuesnone

Example

Example

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

Output

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

Requires

size

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

Description

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

Width

Widthnone
$height

Height

Height$width

Example

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$direction

triangle direction (up, down, left, right)

Stringdown
$color

triangle color

Color#242424
$size

triangle size

Number1em

Example

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

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

breakpoints

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

Description

Default breakpoints.

Type

Map

Map structure

map keyNamemap keyDescriptionmap keyTypemap keyValue
thin

Thinnest breakpoint setting for breakpoint mixin.

Breakpoint20em
normal

Medium breakpoint setting for breakpoint mixin.

Breakpoint46.875em
wide

Widest breakpoint setting for breakpoint mixin.

Breakpoint73.125em
full

Widest breakpoint setting for breakpoint mixin.

Breakpoint100em

Used by

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

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 keyNamemap keyDescriptionmap keyTypemap keyValue
bump

lowest z-index.

Z-index10
dropdown

z-index of 100.

Z-index100
overlay

z-index of 200.

Z-index200
modal

z-index of 300.

Z-index300
trump

z-index of 1000.

Z-index1000

Used by

base-font-size

$base-font-size: 16px;

Description

Default border for border mixin.

Type

String

Used by