atoms: buttons

variables

a-button-radius

$a-button-radius: 0.25rem !default;
View source

Description

Button border radius

Used by

a-button-colors

$a-button-colors: (
    default: (
        bg: map-get($glob-color, brand), 
        hover: darken( map-get($glob-color, brand), 15%),
        focus: darken( map-get($glob-color, brand), 15%)
    ),
    secondary: (
        bg: map-get($glob-color, grey1),
        hover: darken( map-get($glob-color, grey1), 10%),
        focus: darken( map-get($glob-color, grey1), 10%)
    )
) !default;
View source

Description

Button colors map

Type

Map

Used by

a-button-size

$a-button-size: (
    default: (
        fs: base,
        pad: 15px,
        height: 6,
        bor-wid: 0
    ),
    large: (
        fs: hecto,
        pad: 20px,
        height: 8,
        bor-wid: 0
    )
) !default;
View source

Description

Button sizes map

Type

Map

Used by

font-family

$font-family: 'Open Sans', serif !default;
View source

Description

Main font family

Type

Font family

font-family-decorative

$font-family-decorative: 'Roboto', sans-serif !default;
View source

Description

Decorative font family

Type

Font family

font-url

$font-url: 'http://fonts.googleapis.com/css?family=Roboto:100,700|Open+Sans:300italic,700italic,400,700' !default;
View source

Description

Google font url

Type

String

mixins

a-button-base

@mixin a-button-base() { ... }
View source

Description

Base button styles. Builds on top of Foundations button-base mixin

Parameters

None.

Requires

Used by

a-button-size

@mixin a-button-size() { ... }
View source

Description

Button sizes

Parameters

None.

Requires

Used by

a-button-colors

@mixin a-button-colors() { ... }
View source

Description

Button colors modifers

Parameters

None.

Requires

Used by

a-button-hollow

@mixin a-button-hollow() { ... }
View source

Description

Hollow button

Parameters

None.

Requires

a-button-flat

@mixin a-button-flat() { ... }
View source

Description

Hollow button

Parameters

None.

Requires

a-button

@mixin a-button() { ... }
View source

Description

Adds all styles for a button. For more granular control over styles or if you want to use a custom class name, use the individual button mixins.

Parameters

None.

Requires

color

variables

glob-color

$glob-color: (
  grey1: #ECEFF1,
  grey2: #CFD8DC,
  grey3: #78909C,
  grey4: #455A64,
  dark: #263238,
  light:#FFFFFF,
  brand: #3F51B5,
  accent: #B2FF59
) !default;
View source

Description

Theme colors map. If you update this variable in your theme make sure you update $glob-color-links and $glob-color-buttons maps correspondingly.

Type

Map

Map structure

Map key NameMap key DescriptionMap key TypeMap key Value
glob-color.color

Property name will be used for class names and by other components as a reference. Value should be a hex value

Color none

Used by

glob-color-aspect-ratio

$glob-color-aspect-ratio: 4.5 !default;
View source

Description

Contrast ratio used for calculating accessible text colors based on their background color. The recommended ratio is 4.5.

Type

{number}

Used by

Links

glob-text-dark

$glob-text-dark: (
  prime: rgba(#000000, .87),
  secondary: rgba(#000000, .54),
  heading: rgba(#000000, .87),
  subHeading: rgba(#000000, .54),
  border: rgba(#000000, .12),
  disabled: rgba(#000000, .38),
  icon: rgba(#000000, .54),
  logo: darken(map-get($glob-color, brand), 10)
) !default;
View source

Description

Dark text on a light background settings

Map structure

key Namekey Descriptionkey Typekey Value
glob-text-dark.prime

Primary dark text color

Hex none
glob-text-dark.secondary

Secondary dark text color

Hex none
glob-text-dark.heading

Heading dark text color

Hex none
glob-text-dark.border

Dark Border color

Hex none
glob-text-dark.icon

Dark icon color

Hex none

Used by

glob-text-light

$glob-text-light: (
  prime: rgba(#FFFFFF, 1),
  secondary: rgba(#FFFFFF, .70),
  heading: rgba(#FFFFFF, 1),
  subHeading: rgba(#FFFFFF, .70),
  border: rgba(#FFFFFF, .12),
  disabled: rgba(#FFFFFF, .50),
  icon: rgba(#FFFFFF, 0.9),
  logo: lighten(map-get($glob-color, brand), 2)
) !default;
View source

Description

Light text on a dark background settings

Map structure

key Namekey Descriptionkey Typekey Value
glob-text-light.prime

Primary light text color

Hex none
glob-text-light.secondary

Secondary light text color

Hex none
glob-text-light.heading

Heading light text color

Hex none
glob-text-light.border

Light Border color

Hex none
glob-text-light.icon

Light icon color

Hex none

Used by

mixins

bg-color

@mixin bg-color($settingsMap, $settingsMap.color: brand, $settingsMap.bgAlpha: 1, $settingsMap.textColor: true, $settingsMap.border: true, $settingsMap.heading: true) { ... }
View source

Description

Sets background color of element and defines text, button, links and border colors of child elements.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$settingsMap noneMap none
$settingsMap.color

Background color of element. YOu can either specify an name from $glob-color map or pass a hex code

Keyword or Hexbrand
$settingsMap.bgAlpha

Background opacity

Number1
$settingsMap.textColor

Set text color on child elements

Booleantrue
$settingsMap.border

Set border color on child elements

Booleantrue
$settingsMap.heading

Set heading color on child elements

Booleantrue

Example

.className { @include bg-color((color: #fff)); } // Using hex code
.className { @include bg-color((color: brand)); } // Using color name

Requires

Used by

u-bg-colors

@mixin u-bg-colors($color-list: brand, accent, dark, light, grey1) { ... }
View source

Description

Background color utility classes Default generated classes:

  • u-bg--brand
  • u-bg--accent
  • u-bg--dark
  • u-bg--light

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color-list

Back colors to be used. Keyword should be a name in $glob-color map

Keywordbrand, accent, dark, light, grey1

Requires

gradient-horizontal

@mixin gradient-horizontal($start-color, $end-color, $start-percent, $end-percent) { ... }
View source

Description

Horizontal gradient, from left to right Creates two color stops, start and end, by specifying a color and position for each color stop. Color stops are not available in IE9 and below.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$start-color

Start Color

Hex none
$end-color

End color

Hex none
$start-percent

Start percent

Percentage none
$end-percent

End percent

Percentage none

Example

.className { @include gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%); }

gradient-vertical

@mixin gradient-vertical($start-color, $end-color, $start-percent, $end-percent) { ... }
View source

Description

Vertical gradient, from top to bottom Creates two color stops, start and end, by specifying a color and position for each color stop. Color stops are not available in IE9 and below.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$start-color

Start Color

Hex none
$end-color

End color

Hex none
$start-percent

Start percent

Percentage none
$end-percent

End percent

Percentage none

Example

.className { @include gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%); }

functions

text-color

@function text-color($color, $txt-type) { ... }
View source

Description

Returns a dark or light text color dependinfg on the specified background color.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The background color the text will sit on. Can pass a hex code or name of color e.g brand, accent, dark etc.

Hex or String none
$txt-type

{string} [prime] - Indicates importance/ purpose of text. Options: prime, secondary, disabled, icons, dividers or links

none

Example

.className { color: get-txt-colour( #ffffff ); } // Using hex code
.className { color: get-txt-colour( accent, secondary ); } // Using color name

Requires

Used by

contrast_ratio

@function contrast_ratio() { ... }
View source

Parameters

None.

Requires

Used by

Links

pow

@function pow() { ... }
View source

Parameters

None.

Used by

Links

color_luminance

@function color_luminance() { ... }
View source

Parameters

None.

Requires

Used by

Links

mapValue

@function mapValue($map, $mapValue) { ... }
View source

Description

Get map name by value

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Name of the map to search

Keword none
$mapValue

The value you are searching for

Keyword none

Example

mapValue( $glob-color: #ffffff ) // => `light`

Used by

global variables

variables

glob-body-color

$glob-body-color: light !default;
View source

Description

Body background color

Type

{keyword}

glob-site-width

$glob-site-width: 1350px !default;
View source

Description

Max site Width

Type

{number}

molecule: card

variables

m-card-color

$m-card-color: light !default;
View source

Description

Card color

Type

Shadow

m-card-shadow

$m-card-shadow: $glob-shadow-l1 !default;
View source

Description

Card shadow

Type

Shadow

m-card-shadow-hover

$m-card-shadow-hover: $glob-shadow-l4 !default;
View source

Description

Card hover shadow

Type

Shadow

m-card-radius

$m-card-radius: 3px !default;
View source

Description

Card radius

Type

Number

molecule: search

variables

m-search-styles

$m-search-styles: (
    default: (
        style: flat
    ),
    material: (
        style: material
    )
) !default;
View source

Description

Search style map

Type

Map

molecule: tile

variables

m-tile-shadow-hover

$m-tile-shadow-hover: $glob-shadow-l4 !default;
View source

Description

Tile hover shadow

Type

Shadow

organism: drawer

variables

o-drawer-width

$o-drawer-width: 250px;
View source

Description

Drawer Width

Type

Map

organism: header

variables

o-header-height

$o-header-height: 13;
View source

Description

Header height

Type

Number

o-header-transparent-height

$o-header-transparent-height: 18;
View source

Description

Transarent Header height

Type

Number

organism: page section

variables

o-section-maxWidth

$o-section-maxWidth: 100% !default;
View source

Description

Max width

Type

Number

o-section-tint-color

$o-section-tint-color: darken(map-get($glob-color, brand), 40) !default;
View source

Description

Background tint color

Type

Color

o-section-tint-strong-color

$o-section-tint-strong-color: darken(map-get($glob-color, brand), 40) !default;
View source

Description

Background strong tint color

Type

Color

o-section-tint-light-color

$o-section-tint-light-color: lighten(map-get($glob-color, brand), 40) !default;
View source

Description

Background Light tint color

Type

Color

theme: bright

variables

glob-color

$glob-color: (
  grey1: #F5F5F5,
  grey2: #E0E0E0,
  grey3: #9E9E9E,
  grey4: #424242,
  dark: #212121,
  light:#FFFFFF,
  brand: #ffb300,
  accent: #40c4ff
);
View source

Description

Theme colors map.

Type

{map}

font-url

$font-url: 'http://fonts.googleapis.com/css?family=Josefin+Sans:700|Amatic+SC:700';
View source

Description

Google font url

Type

String

font-family

$font-family: 'Josefin Sans', serif;
View source

Description

Main font family

Type

Font family

font-family-decorative

$font-family-decorative: 'Amatic SC', serif;
View source

Description

Decorative font family

Type

Font family

default-baseline-reset

$default-baseline-reset: (
  deci:  ( (4, 0px, 0) , (4, 1px, 0)  , (3, 0px, 0)  ),
  base:  ( (4, 0px, 0) , (4, 0px, 0)  , (4, 1px, 0)  ),
  deca:  ( (4, 0px, 0) , (4, 5px, 0)  , (4, 0px, 0)  ),
  hecto: ( (4, 5px, 0) , (5, 0px, 0)  , (5, 1px, 0)  ),
  kilo:  ( (4, 5px, 0) , (6, 1px, 0)  , (6, 1px, 0)  ),
  mega:  ( (4, 4px, 0) , (6, 5px, 0)  , (7, 2px, 0)  ),
  giga:  ( (5, 1px, 0) , (8, 2px, 0)  , (12, 1px, 0)  ),
  tera:  ( (6, 3px, 0) , (9, 2px, 0)  , (14, 0px, 0) ),
  peta:  ( (6, 2px, 0) , (10, 2px, 0) , (15, 1px, 0) ),
  exa:   ( (6, 2px, 0) , (13, 0px, 0) , (17, 1px, 0) )
);
View source

Description

Baseline rest

default-type-scale-settings

$default-type-scale-settings: (
  scale-keys    : (base, deca, hecto, kilo, mega, giga, tera, peta, exa),
  neg-scale-keys: (deci),
  font-sizes    : (1rem, 1rem, 1rem),
  scales        : (1.067, 1.2, 1.36),
  baseline-size : (0.75rem, 0.75rem, 0.75rem),
);
View source

Description

BaselineCalc Settings

theme: dark

variables

glob-color

$glob-color: (
  grey1: #757575,
  grey2: #757575,
  grey3: #616161,
  grey4: #212121,
  dark: #BDBDBD,
  light:rgb(15, 15, 15),
  brand: #ffb300,
  accent: #FFD180
);
View source

Description

Theme colors map.

Type

{map}

m-card-color

$m-card-color: #191919;
View source

Description

Card color

Type

Color

font-url

$font-url: 'http://fonts.googleapis.com/css?family=Alice|Playfair+Display:400,700';
View source

Description

Google font url

Type

String

font-family

$font-family: 'Alice', serif;
View source

Description

Main font family

Type

Font family

font-family-decorative

$font-family-decorative: 'Playfair Display', serif;
View source

Description

Decorative font family

Type

Font family

Ungrouped

variables

glob-heading-weight

$glob-heading-weight: normal !default;
View source

Description

Global heading font weight.

type-scale

$type-scale: build-type-scale() !global;
View source

Description

Build Type Scale

Used by

default-baseline-breakpoints

$default-baseline-breakpoints: (
  medium: map-get($breakpoints, medium),
  large: map-get($breakpoints, large)
) !default;
View source

Description

Baseline Breakpoints

default-baseline-reset

$default-baseline-reset: (
  deci:  ( (4, 0px, 0) , (4, 1px, 0)  , (3, 0px, 0)  ),
  base:  ( (4, 0px, 0) , (4, 0px, 0)  , (4, 1px, 0)  ),
  deca:  ( (4, 0px, 0) , (4, 5px, 0)  , (4, 0px, 0)  ),
  hecto: ( (4, 5px, 0) , (5, 0px, 0)  , (5, 1px, 0)  ),
  kilo:  ( (4, 5px, 0) , (6, 1px, 0)  , (6, 1px, 0)  ),
  mega:  ( (4, 4px, 0) , (6, 5px, 0)  , (7, 2px, 0)  ),
  giga:  ( (5, 1px, 0) , (8, 2px, 0)  , (8, 1px, 0)  ),
  tera:  ( (6, 3px, 0) , (9, 2px, 0)  , (11, 0px, 0) ),
  peta:  ( (6, 2px, 0) , (10, 2px, 0) , (13, 1px, 0) ),
  exa:   ( (6, 2px, 0) , (13, 0px, 0) , (17, 1px, 0) )
) !default;
View source

Description

Baseline rest

default-type-scale-settings

$default-type-scale-settings: (
  scale-keys    : (base, deca, hecto, kilo, mega, giga, tera, peta, exa),
  neg-scale-keys: (deci),
  font-sizes    : (1rem, 1rem, 1rem),
  scales        : (1.067, 1.2, 1.25),
  baseline-size : (0.75rem, 0.75rem, 0.75rem),
) !default;
View source

Description

BaselineCalc Settings

functions

line-height

@function line-height() { ... }
View source

Description

Get line height

Parameters

None.

Requires

baseline-val

@function baseline-val($brk-point: default) { ... }
View source

Description

Returns single Baseline value for specified breakpoint

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$brk-point

Breakpoint value . i.e Default, Phone etc.

Keyworddefault

Example

baseline-val('default');

Requires

map-deep-get

@function map-deep-get($map, $keys...) { ... }
View source

Description

Extend the native Sass functions an allows us to easly get deep, nester map values.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map

Map none
$keys

Key chain

Arglist none

Returns

Map

Desired value

Used by

Author

  • Hugo Giraudel

map-deep-set

@function map-deep-set($map, $keys, $value) { ... }
View source

Description

Deep set function to set a value in nested maps

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map

Map none
$keys

Key chaine

List none
$value

Value to assign

Any none

Returns

Map

Throws

  • Key #{$key} doesn

Author

  • Hugo Giraudel

create-scale-maps

@function create-scale-maps($scaleSize) { ... }
View source

Description

Main Scale Function Creates the responsive scale maps and returns map of maps. Base map needs to attached to GLOBAL $type-scale before executing this function Function Execution Steps:

  1. Store settings values
  2. Create GLOBAL $type-scale map, we will add to this as the function progresses
  3. Build Breakpoints Map
  4. Build Baseline refrence map
  5. Build Type Scale Maps using create-scale-maps()

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$scaleSize

Determines whether the scale should scale up or scale down fro smaller font sizes

Boolean none

Example

create-scale-maps($scaleSize)

Requires

Used by

build-type-scale

@function build-type-scale() { ... }
View source

Description

Build Type Scale

Parameters

None.

Requires

Used by

mixins

baseline-calc

@mixin baseline-calc($propMap) { ... }
View source

Description

Helps calculate the baseline val for multiple css properties. Will return the media querries for each respposve basleine value meaning you dont have to type out multuple media querries. Returns css properties inside each breakpoint, each prop value pased is multiplied by baseline size

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$propMap

Map of CSS propertiys

none

Example

Requires

Used by

baseline-border

@mixin baseline-border() { ... }
View source

Description

Baseline Border

Parameters

None.

Example

baseline-border( $position: "bottom", $borderSize: 1px, $baselineOffset: 0, $type: "margin" )

Requires

basline-rest

@mixin basline-rest($settings-list, $settings-list.ListVal1, $settings-list.ListVal2) { ... }
View source

Description

Forces text to sit on baseline by adding padding-top and adds margin bottom so proceeding elements are not disturbed Adds top padding and margin bottom so text sits directly ontop of baseline

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$settings-list

Nestted collection of lists.

none
$settings-list.ListVal1

Line height,

none
$settings-list.ListVal2

Padding top,

none

Example

Requires

Used by

font-sizes

@mixin font-sizes($scale-key) { ... }
View source

Description

Returns the responsive font-sizes for the specified $scale-key

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$scale-key

Scale Key name

Keyword none

Example

Requires

Used by

show-baseline

@mixin show-baseline() { ... }
View source

Description

Grid Overlay Provides a absolutely positioned baseline grid overlay. This element should be auto generated using the baselineGrid.js methods. The grid overlay is optional, you may want to only include it in a dev build.

Parameters

None.

Example

#### `@include show-baseline()`;

Requires

baseline-type-utils

@mixin baseline-type-utils() { ... }
View source

Description

Create utility classes for font scale

Parameters

None.

Requires

u-spacing

@mixin u-spacing($spacing-unit: 10px, $spacing-unit: 10, $responsive: true, $autoClasses: true, $settings: (mb: 'margin-bottom', mt: 'margin-top', pb: 'padding-bottom', pt: 'padding-top')) { ... }
View source

Description

Vertical spacing utility classes Class name follows: u-[margin/padding - top/bottom]--[Basline Multilpier] Example output: .u-mb--2

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$spacing-unit

The base value to use when calculating the spacing modifiers.

Unit10px
$spacing-unit

The number of spacing modifiers to create. i.e If the value is 5, the folloiwng classes would be gnenerated u-mr--1, u-mr--2 ... u-mr--5.

Number10
$responsive

Generate responsive versions of the spacing utils. Responsive utilities are prefixed with BEMIT stile @ flag .i.e .u-mb--2@phablet

Booleantrue
$autoClasses

Generate auto spacing utilities i.e margin-right: auto;

Booleantrue
$settings

Map name will be applied to the generated class name. Map value must be css property

Map(mb: 'margin-bottom', mt: 'margin-top', pb: 'padding-bottom', pt: 'padding-top')

Requires

type-scale

@mixin type-scale() { ... }
View source

Description

Create baseline grid object

Parameters

None.

Requires