General

functions

color

@function color($key, $map: $bm-colors) { ... }

Description

Sets a color from a given map-key

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$key`	A key from a map	`String`	—none
`$map`	A map of colors	`Map`	`$bm-colors`

Returns

String —

a color

Requires

[variable] bm-colors

em

@function em($px, $base: $bm-fontsize) { ... }

Description

Calculating em's from pixel-values. This functions accepts a font-size as a pixel-value and converts it into an em-based value.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$px`	Pixel-value, eg. 12px	`String`	—none
`$base`	The current context	`String`	`$bm-fontsize`

Returns

Number —

Fontsize in em

Example

em-function

h1 {
  font-size: em(18px) // equals 1.125em
}

h1 span {
  font-size: em(12px, 18px) // equals 0.66667em
}

Requires

[variable] bm-fontsize

z

@function z($layer, $map: $bm-z-indexes) { ... }

Description

Get a z-index value from a layer name

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$layer`	Layer's name	`String`	—none
`$map`	Map of z-indexes and there values	`Map`	`$bm-z-indexes`

Returns

Number —

The z-index as a Number

Throws

There is no layer named #{$layer} in $z-indexes.

Requires

[variable] bm-z-indexes

strip-unit

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

Description

Remove (any) unit from any value

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	A value and its unit, e.g. 12px	`String`	—none

Returns

Number —

A unitless Number

ensure-pixel-unit

@function ensure-pixel-unit() { ... }

Description

Make sure a value is a pixel-unit

Parameters

None.

Used by

[mixin] set-font

variables

bm-colors

$bm-colors: (
  primary: $bm-primary,
  secondary: $bm-secondary
);

Description

Colormap to organize project-colors

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`key`	Placeholder for project-colors	`String`	—none
`value`	A color-value mapped to the key	`Color`	—none

Used by

[function] color

bm-small

$bm-small: 320px;

Description

Default breakpoint for small devices

Type

Number

bm-medium

$bm-medium: 768px;

Description

Default breakpoint for medium devices, such as small tablets in portrait mode

Type

Number

bm-large

$bm-large: 1024px;

Description

Default breakpoint for large devices, mostly smaller laptop screens oder split-screen use-cases

Type

Number

bm-big

$bm-big: 1280px;

Description

Default breakpoint for big devices, standard laptop screens

Type

Number

bm-huge

$bm-huge: 1440px;

Description

Default breakpoint for huge screen-sizes, HD-Desktops oder large laptops

Type

Number

bm-columns

$bm-columns: 12;

Description

Default amount of columns to use by $susy

Type

Number

Used by

[variable] susy

bm-page-width

$bm-page-width: 1200px;

Description

The default page-width

Type

Number

bm-column-width

$bm-column-width: 80px;

Description

Default column-width in pixels for usage with $susy

Type

Number

Used by

[variable] susy

bm-gutter-width

$bm-gutter-width: 20px;

Description

Default gutter-width in pixels for usage with $susy

Type

Number

Used by

[variable] susy

susy

$susy: (
  columns: $bm-columns,
  column-width: $bm-column-width,
  gutters: $bm-gutter-width / $bm-column-width,
  math: fluid,
  output: float,
  gutter-position: inside-static,
);

Description

Susy-Grid-Setup Initializes a custom Susy-Configuration to create a grid.

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`key`	Setting-keywords that are required by Susy to build a grey	`String`	—none
`value`	A value mapped to the settings	`String` or `Number`	—none

Requires

[variable] bm-columns
[variable] bm-column-width
[variable] bm-gutter-width

bm-fontsize

$bm-fontsize: 16px;

Description

Default-fontsize

Type

Number

Used by

[function] em
[mixin] set-font
[variable] bm-lineheight
[placeholder] bm-text-margin

bm-lineheight

$bm-lineheight: $bm-fontsize * 1.25;

Description

Default line-height

Type

Number

Requires

[variable] bm-fontsize

Used by

[mixin] set-font

bm-font-fallback

$bm-font-fallback: Helvetica, "Helvetica Neue", Arial, sans-serif !default;

Description

Fallback font-set

Type

String

Used by

[mixin] set-font

bm-headings

$bm-headings: h1, h2, h3, h4, h5, h6;

Description

List of all headline selectors

Type

List

bm-text-blocks

$bm-text-blocks: p, ul, ol, dl;

Description

List of all (basic) text-block selectors

Type

List

bm-z-indexes

$bm-z-indexes: (
  'heaven': 9000,
  'high': 100,
  'default': 1,
  'low': -1,
  'bottomless-pit': -9999
);

Description

Z-indexes map, gathers all releveant z-layers

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`key`	Layer’s name	`String`	—none
`value`	Z value mapped to the key	`Number`	—none

Used by

[function] z

mixins

set-text-blocks

@mixin set-text-blocks($blocks) { ... }

Description

Adding vertical spacing to all text-blocks

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$blocks`	List of selectors, e.g. p, ul, ol	`List`	—none

Requires

[placeholder] bm-text-margin

set-headings

@mixin set-headings($headings, $blocks) { ... }

Description

Clearing vertical spacing between headlines and text-blocks to avoid "double-margins".

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$headings`	List of headline-selectors, e.g. h1, h2, h3, h4	`List`	—none
`$blocks`	List of text-block-selectors, e.g. p, ul, ol	`List`	—none

Requires

[placeholder] bm-reset-margin-top

set-font

@mixin set-font($font: $bm-font-fallback, $fontsize, $lineheight, $fallback: $bm-font-fallback) { ... }

Description

Initializing default font-size and line-height to an element. This mixin is intended to be applied to a root element, such as body or html

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font`	A custom font that is applied, e.g. "Comic Sans"	`String`	`$bm-font-fallback`
`$fontsize`	A fontsize-value in pixel	`Number`	—none
`$lineheight`	A line-height-value in pixel	`Number`	—none
`$fallback`	A font-fallback to make sure everything looks nice in its default-state	`String`	`$bm-font-fallback`

Requires

[function] ensure-pixel-unit
[variable] bm-font-fallback
[variable] bm-fontsize
[variable] bm-lineheight

size

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

Description

Helper to size an element

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$width`	The elements width	`Length`	—none
`$height`	The elements height	`Length`	`$width`

opacity

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

Description

Helper to set opacity with legacy-fallback

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$opacity`	The opacity that is applied to the element	`Number`	—none

page-init

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

Description

Helper to initalize a proper viewport and text-rendering.

overflow-y: scroll; - forcing scrollbars to be visible, prevents weird flickering
min-height: 100%; - making sure the page fills at least the initial viewport

Parameters

None.

clearfix

@mixin clearfix() { ... }

Description

Helper to clear inner floats

Parameters

None.

Author

Nicolas Gallagher

vanish

@mixin vanish() { ... }

Description

Helper to make something disappear

Parameters

None.

position

@mixin position($position, $args) { ... }

Description

Helper to deal with positions and its values (top, bottom, right, left)

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$position`	The targets position, e.g. absolute	`String`	—none
`$args`	List of properties and their values, e.g. top 1em right 10%	`List`	—none

Example

Setting an element with an absolute position and some values

@include position(absolute, top 10px, left 10px);

Used by

[mixin] absolute
[mixin] fixed
[mixin] relative

absolute

@mixin absolute($args) { ... }

Description

Shortcut-Mixin for absolute positioning

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$args`	List of properties and their values, e.g. top 1em right 10%	`List`	—none

Requires

[mixin] position

Used by

[mixin] fill-abs
[mixin] centered
[mixin] vertical-centered
[mixin] horizontal-centered

fixed

@mixin fixed($args) { ... }

Description

Shortcut-Mixin for fixed positioning

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$args`	List of properties and their values, e.g. top 1em right 10%	`List`	—none

Requires

[mixin] position

relative

@mixin relative($args) { ... }

Description

Shortcut-Mixin for relative positioning

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$args`	List of properties and their values, e.g. top 1em right 10%	`List`	—none

Requires

[mixin] position

fill-abs

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

Description

Helper to make an Element fill up all of its available space

Parameters

None.

Requires

[mixin] absolute

centered

@mixin centered() { ... }

Description

Helper to center something

Parameters

None.

Requires

[mixin] absolute

vertical-centered

@mixin vertical-centered() { ... }

Description

Helper for vertical centering

Parameters

None.

Requires

[mixin] absolute

horizontal-centered

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

Description

Helper for horizontal centering

Parameters

None.

Requires

[mixin] absolute

placeholders

bm-reset-margin-top

%bm-reset-margin-top { ... }

Description

Helper to reset the top margin

Used by

[mixin] set-headings

bm-text-margin

%bm-text-margin { ... }

Description

Helper to set top and bottom margin on elements

Requires

[variable] bm-fontsize

Used by

[mixin] set-text-blocks

General

functions

Description

Parameters

Returns

Requires

Description

Parameters

Returns

Example

Requires

Description

Parameters

Returns

Throws

Requires

Description

Parameters

Returns

Description

Parameters

Used by

variables

Description

Type

Map structure

Used by

Description

Type

Description

Type

Description

Type

Description

Type

Description

Type

Description

Type

Used by

Description

Type

Description

Type

Used by

Description

Type

Used by

Description

Type

Map structure

Requires

Links

Description

Type

Used by

Description

Type

Requires

Used by

Description

Type

Used by

Description

Type

Description

Type

Description

Type

Map structure

Used by

mixins

Description

Parameters

Requires

Description

Parameters

Requires

Description

Parameters