General

functions

[private] bem-separator

@function bem-separator($object) { ... }

Description

Get the the separator used between an element or a modifier for the BEM convention

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$object`	Accepted values: `element` or `modifier`	`String`	—none

Used by

[mixin] bem-standard

set-text-from-color

@function set-text-from-color($color) { ... }

Description

Return a dark color or a light color based on the color given. This function can be used when wanting to dynamically set the font-color based on the background color.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$color`	The background color you want to get a font color for	`Color`	—none

Returns

Hex —

A light color for a dark background or a dark color for a light background

get-next-key

@function get-next-key($map, $key) { ... }

Description

Get the next key in a map. This function will return null if the key provided is the last key in the map.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$map`	The target map we will be looking through	`Map`	—none
`$key`	The key where it's following key needs to be found	`String`	—none

Example

Usage

$map: (
  foo: 1,
  bar: 2,
  qux: 3
);

$next-key: get-next-key($map, bar); // "qux"

mixins

[private] bem-standard

@mixin bem-standard($object, $elements) { ... }

Description

Generate the appropriate CSS to follow the BEM convention.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$object`	Accepted values: `element` or `modifier`	`String`	—none
`$elements`	The list of element(s) we'll be creating the CSS structure for	`List`	—none

Content

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

Requires

[function] bem-separator

Used by

[mixin] element
[mixin] modifier

element

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

Description

Create a Block Element following the BEM naming scheme

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$elements`	A single element's name or an argument list of elements	`String` or `Argument list`	—none

Content

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

Example

Usage

.foo {
    @include element('header') {
        display: block;
    }

    @include element('body', 'footer') {
        display: inline-block;
    }
}

Output

.foo .foo__header {
    display: block;
}
.foo .foo__body, .foo .foo__footer {
    display: inline-block;
}

Requires

[mixin] bem-standard

modifier

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

Description

Create a Block Modifier following the BEM naming scheme

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$modifiers`	A single modifier's name or an argument list of modifiers	`String` or `Argument list`	—none

Content

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

Example

Usage

.bar {
    @include modifier('quarter') {
        display: inline-block;
    }

    @include modifier('full', 'half') {
        display: block;
    }
}

Output

.bar .bar--quarter {
    display: inline-block;
}
.bar .bar--full, .bar .bar--half {
    display: block;
}

Requires

[mixin] bem-standard

object

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

Description

Objects abstract out the repetitive, shared, and purely structural aspects of a UI into reusable objects. This means that things like layout, wrappers and containers, the Media Object, etc. can all exist as non-cosmetic styles that handle the skeletal aspect of a lot of UI components, without ever actually looking like designed ‘things’.

Parameters

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

Content

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

component

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

Description

Components are finite, discrete, implementation-specific parts of our UI that most people (users, designers, developers, the business) would be able to identify: This is a button; This is the date picker; etc.

Parameters

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

Content

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

utility

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

Description

Utilities are complete single responsibility rules which have a very specific and targeted task. It is also quite common for these rules’ declarations to carry !important so as to guarantee they beat other less specific ones. They do one thing in a very heavy-handed and inelegant way. They are to be used as a last resort when no other CSS hooks are available, or to tackle completely unique circumstances, e.g. using .u-text-center to centrally align one piece of text once and once only. They are only one step away from inline styles, so should be used sparingly.

Parameters

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

Content

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

theme

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

Description

When we work with Stateful Themes (that is to say, themes that we toggle on and off) we normally do so by adding a class to the body element. Examples of this approach to theming include style- switchers (a user can toggle between different themes) and sub-sections of a site (all blog posts have one theme colour, all news pages have another theme colour, etc.). We simply add a class high up the DOM which then invokes that theme for that particular page.

Parameters

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

Content

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

scope

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

Description

Scoped contexts in CSS solve a very specific and particular problem: please be entirely certain that you actually have this problem before employing Scopes, because they can be misused and end up leading to actively bad CSS.

Oftentimes it can be useful to set up a brand new styling context for a particular section of your UI. A perfect example of this is areas of user-generated content, where some long-form/prose HTML has come from a CMS. The styling of this kind of content usually differs from the more app-like UI around it. You may have a class-heavy UI architecture to provide complex pieces of design like navigations, buttons, modals, etc., and inside all of this you may have a simple blog post which is populated via a CMS where the user writes plain text and cannot add any classes or complexity.

Parameters

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

Content

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

is

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

Description

Short-lived or temporary states of the UI that need styling accordingly.

When looking at a piece of interactive UI (e.g. a modal overlay) through developer tools, we’ll probably spend some time toggling things on and off. Being able to see classes like .is-open appear and disappear in the DOM is a highly readable and very obvious way of learning about state

Parameters

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

Content

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

has

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

Parameters

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

Content

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

See

[mixin] is

javascript

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

Description

JavaScript namespaces are pretty common now, and most people tend to use them. The idea is that—in order to properly separate our concerns—we should never have styling and behaviour bound to the same hooks. To bind both technologies onto the same hook means we can’t have one without the other: our UI becomes all- or-nothing, which makes it very opinionated and inflexible.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	Javascript class' name	`String`	—none

Content

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

fa-perfect-alignment

@mixin fa-perfect-alignment() { ... }

Description

Perfectly center a Font Awesome icon both horizontally and vertically

Parameters

None.

Used by

[mixin] set-circular-size

TODO's

If SASS ever officially supports @extends inside of @media queries, then this should be a placeholder. See SASS issue #1050

set-circular-size

@mixin set-circular-size($size) { ... }

Description

Create a circle around a Font Awesome icon

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	The size of the circle	`Number [unit]`	—none

Requires

[mixin] fa-perfect-alignment

view-container

@mixin view-container() { ... }

Description

Creates a flex box container available to specified viewsize and smaller screen sizes that will contain flex children

Parameters

None.

view-columns

@mixin view-columns($viewSize, $columns) { ... }

Description

A mixin specify the amount of columns an element should take up

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$viewSize`	Accepted values: xs, sm, md, lg, xl, xxl	`String`	—none
`$columns`	Specifies the number of columns an element should span.	`Number [unitless]`	—none

Example

SCSS Equivalent

@include span-columns($columns);

Requires

[mixin] respond-up

respond-only-to

@mixin respond-only-to($media_list...) { ... }

Description

Similar to respond-to(), this mixin will restrict the content to only the specified Breakpoint and will not apply to a larger Breakpoint. This mixin will take Breakpoints with no larger or smaller Breakpoints and handle them appropriately with an efficient media query.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$media_list`	Breakpoints that will be individually targeted	`Arglist`	—none

Content

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

Example

Usage

.phablets-only {
    @include respond-only-to(sm) {
        display: block;
    }
}

CSS Output

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .phablets-only {
        display: block;
    }
}

Used by

[mixin] __set-visible

respond-from

@mixin respond-from($start, $end) { ... }

Description

The specified content will be applied only to a specific range. If the start Breakpoint is xs, then it will automatically use only the max-width.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$start`	The Breakpoint the media query will be applied from	`Breakpoint`	—none
`$end`	The Breakpoint the media query will be applied to	`Breakpoint`	—none

Content

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

Example

Usage

.xs-to-md {
    @include respond-from(xs, md) {
        display: block;
    }
}

CSS Output

@media only screen and (max-width: 992px) {
    .xs-to-md {
        display: block;
    }
}

respond-up

@mixin respond-up($media) { ... }

Description

Have the specified content inside of the mixin respond to the specified Breakpoint and larger. BZiON is mobile-first so everything applied to a phone will be reflected on a desktop.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$media`	The Breakpoint (and larger) that will have the specified CSS rules applied to	`Breakpoint`	—none

Content

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

Example

Usage

.phablet-and-larger {
    @include respond-up(sm) {
        display: block;
    }
}

CSS Output

@media only screen and (min-width: 480px) {
    .phablet-and-larger {
        display: block;
    }
}

Used by

[mixin] view-columns
[placeholder] container
[mixin] make-margin

theme-specific

@mixin theme-specific($rule, $variable, $function: "", $nth: 0, $args...) { ... }

Description

This function loops through all of the available themes and generates the appropriate CSS based on the theme definition

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$rule`	The CSS keyword that will be effected based on the theme	`String`	—none
`$variable`	The name of the key used in the theme map	`String`	—none
`$function`	The name of the function that will be called with `call()`	`String`	`""`
`$nth`	The index that the value will belong in with respect to the `call()` function	`Number [unitless]`	`0`
`$args`	The arguments that will be passed to the `call()` function	`Arglist`	—none

Example

a {
    @include theme-specific("color", "hyperlink");
}

.t-light a {
    color: blue;
}

.t-dark a {
    color: yellow;
}

Usage with w/function call

a {
    @include theme-specific("color", "link-color", darken, 1, 15%);
}

Pseudo code of previous example

a {
    // We use index 1 because the fetched value is the first argument in the function call
    color: darken(<'link-color' value @ index 1>, 15%);
}

autoMarginBottom

@mixin autoMarginBottom($margin: 30px) { ... }

Description

Automatically set the margin-bottom of an element to a specified value but have the last type of that element to have margin bottom 0

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$margin`	The margin bottom that will be used	`Number [unit]`	`30px`

Used by

[mixin] make-margin

make-margin

@mixin make-margin() { ... }

Description

Automatically set the margin bottom of an element to the global setting and set the last child to have no margin bottom on the specified views

Parameters

None.

Requires

[mixin] respond-up
[mixin] autoMarginBottom

[private] __set-visible

@mixin __set-visible($hide, $min, $max) { ... }

Description

Set the visibility of a specific element to be visible or hidden based on the screen width. An element will only be visible when the screen is at the specified width. For example, if you have an element only be visible on xs, you would set the minimum and maximum screen size a phone would have. You can use pre-defined values such as $phone-min-size and $phone-max-size to stay consistent with the project. This function should not be accessed directly and instead should only be used through convenience mixins.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$hide`	Whether you want to hide or display the specified element in the specified screen width. True to display the element only on the specified screen size.	`Boolean`	—none
`$min`	The minimum size a screen should have in order for the specified element to be displayed	`Number [unit]`	—none
`$max`	(Optional) The maximum size a screen should have in order for the specified element to be displayed. If no maximum or 0 is specified, then the element will be displayed on a screen size at least `$min` in width.	`Number [unit]`	—none

Requires

[mixin] respond-only-to

Used by

[mixin] invisible
[mixin] visible

invisible

@mixin invisible($media) { ... }

Description

A mixin that will hide the specified element

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$media`	Accepted view sizes: `phones`, `phablets`, `tablets`	`String`	—none

Example

.hide-desktop-only {
    @include invisible(lg);
}

Requires

[mixin] __set-visible

visible

@mixin visible($media) { ... }

Description

A mixin that will make the specified element

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$media`	Accepted view sizes: `phones`, `phablets`, `tablets`	`String`	—none

Example

.display-phone-only {
    @include visible(xs);
}

Requires

[mixin] __set-visible

placeholders

fa-fw

%fa-fw { ... }

Description

A magic placeholder for Font Awesome icons to have a fixed width. This uses the same code as Font Awesome's .fa-fw class but is available as a placeholder to be used in SASS

clearfix

%clearfix { ... }

Description

A placeholder for the infamous "clearfix" hack to fix floats

margin-center

%margin-center { ... }

Description

A placeholder that will automatically horizontally center a block element

Used by

[placeholder] container

no-padding-ul

%no-padding-ul { ... }

Description

A placeholder that will remove the left padding of an element. This placeholder is intended to easily remove the padding of ul or ol elements.

container

%container { ... }

Description

The master width of the website that is set through $Settings-Global-Width in _base.scss. Because this project is mobile responsive, any view sizes smaller than a desktop will have 100% width.

Requires

[mixin] respond-up
[placeholder] margin-center

General

functions

[private] bem-separator

Description

Parameters

Used by

Links

Description

Parameters

Returns

Description

Parameters

Example

mixins

[private] bem-standard

Description

Parameters

Content

Requires

Used by

Links

Description

Parameters

Content

Example

Requires

Description

Parameters

Content

Example

Requires

Description

Parameters

Content

Description

Parameters

Content

Description

Parameters

Content

Description

Parameters

Content

Description

Parameters

Content

Description

Parameters

Content

Parameters

Content

See

Description

Parameters

Content

Description

Parameters

Used by

TODO's

Description

Parameters

Requires

Description

Parameters

Description

Parameters

Example

Requires

Description

Parameters

Content

Example

Used by

Description

Parameters

Content

Example

Description

Parameters

Content