Bolt Design System

Edit on Github

Sass Docs

Settings: border

$bolt-border-radius-values [map]

Bolt's definition of border-radius scale. Used within 'export-data()' to JSON.

Code

$bolt-border-radius-values: ( small: 3px, large: 0.75em, full: 100em );

Source

_settings-border-radius.scss:14

01-settings/settings-border-radius/_settings-border-radius.scss
View on GitHub

Author

Mike Mai

Settings: breakpoints

$bolt-breakpoints [map]

Major breakpoints used globally in Bolt.

Code

$bolt-breakpoints: ( xxsmall: 320px, xsmall: 400px, small: 600px, medium: 800px, large: 1000px, xlarge: 1200px, xxlarge: 1400px, xxxlarge: 1920px );

Source

_settings-breakpoints.scss:9

01-settings/settings-breakpoints/_settings-breakpoints.scss
View on GitHub

Author

Salem Ghoweri

$mq-breakpoints

A duplicate of $bolt-breakpoints - used within mq()

Code

$mq-breakpoints: $bolt-breakpoints;

Source

_settings-breakpoints.scss:22

01-settings/settings-breakpoints/_settings-breakpoints.scss
View on GitHub

Author

Salem Ghoweri

Settings: colors

$bolt-color-default

Bolt default color var.

Code

$bolt-color-default: 'base';

Source

_settings-colors.scss:11

01-settings/settings-colors/_settings-colors.scss
View on GitHub

$bolt-brand-colors [map]

Bolt Brand Colors - merged into $bolt-colors map

Code

$bolt-brand-colors: ( 'indigo': ( 'xdark': hsl(233, 71%, 8%), 'dark': hsl(233, 47%, 16%), 'base': hsl(233, 47%, 23%), 'light': hsl(233, 33%, 49%), 'xlight': hsl(233, 73%, 81%), ), 'yellow': ( 'xdark': hsl(43, 100%, 20%), 'dark': hsl(43, 82%, 50%), 'base': hsl(43, 100%, 65%), 'light': hsl(43, 100%, 80%), 'xlight': hsl(43, 100%, 90%), ), 'teal': ( 'xdark': hsl(180, 100%, 10%), 'dark': hsl(180, 82%, 22%), 'base': hsl(180, 100%, 30%), 'light': hsl(180, 45%, 64%), 'xlight': hsl(180, 48%, 81%), ), 'orange': ( 'xdark': hsl(15, 100%, 20%), 'dark': hsl(15, 82%, 39%), 'base': hsl(15, 82%, 50%), 'light': hsl(15, 100%, 70%), 'xlight': hsl(15, 100%, 85%), ), 'gray': ( 'xdark': hsl(233, 6%, 19%), 'dark': hsl(233, 5.3%, 38%), 'base': hsl(233, 5.7%, 57.6%), 'light': hsl(233, 20%, 90%), 'xlight': hsl(233, 23%, 97%), ), 'black': ( 'base': hsl(225, 8%, 9%), ), 'white': ( 'base': hsl(0, 0%, 100%), ), );

Source

_settings-colors.scss:15

01-settings/settings-colors/_settings-colors.scss
View on GitHub

$bolt-status-colors [map]

Bolt Status Colors - merged into $bolt-colors map

Code

$bolt-status-colors: ( 'blue': ( 'dark': hsl(201, 100%, 25%), 'base': hsl(201, 100%, 35%), 'light': hsl(201, 100%, 92%), ), 'success': ( 'dark': rgb(37, 41%, 25%), 'base': hsl(123, 41%, 35%), 'light': hsl(123, 41%, 90%), ), 'error': ( 'dark': hsl(6, 76%, 35%), 'base': hsl(6, 76%, 40%), 'light': hsl(6, 80%, 90%), ), 'warning': ( 'dark': hsl(51, 80%, 45%), 'base': hsl(51, 80%, 55%), 'light': hsl(51, 80%, 90%), ), );

Source

_settings-colors.scss:61

01-settings/settings-colors/_settings-colors.scss
View on GitHub

Bolt Social Colors - merged into $bolt-colors map

$bolt-social-colors: ( 'social': ( 'facebook': hsl(222, 46%, 42%), 'twitter': hsl(196, 100%, 46%), 'linkedin': hsl(201, 96%, 36%), ), );

Source

_settings-colors.scss:86

01-settings/settings-colors/_settings-colors.scss
View on GitHub

$bolt-colors [map]

All Bolt Colors - used within bolt-color @mixin and @function

Code

$bolt-colors: map-merge( map-merge($bolt-brand-colors, $bolt-status-colors), $bolt-social-colors );

Source

_settings-colors.scss:98

01-settings/settings-colors/_settings-colors.scss
View on GitHub

Settings: global

$bolt-base-font-size--min

Global Default Min Base Font Size

Code

$bolt-base-font-size--min: 15px;

Source

_settings-global.scss:18

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-base-font-size--max

Global Default Max Base Font Size

Code

$bolt-base-font-size--max: 18px;

Source

_settings-global.scss:20

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-fonts--subset-loaded-class

Async Default font subset loaded class.

Code

$bolt-fonts--subset-loaded-class: 'js-fonts-subset-loaded';

Source

_settings-global.scss:24

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-fonts--loaded-class

Async Default font loaded class.

Code

$bolt-fonts--loaded-class: 'js-fonts-loaded';

Source

_settings-global.scss:26

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-shadow-color

Bolt shadow color

Code

$bolt-shadow-color: bolt-color(black);

Source

_settings-global.scss:31

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-shadow--small

Bolt small shadow

Code

$bolt-shadow--small: 0 2px 0.15rem rgba($bolt-shadow-color, 0.3);

Source

_settings-global.scss:33

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-shadow--medium

Bolt medium shadow

Code

$bolt-shadow--medium: 0 0.15rem 0.3rem rgba($bolt-shadow-color, 0.35);

Source

_settings-global.scss:35

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-shadow--large

Bolt large shadow

Code

$bolt-shadow--large: 0 0.35rem 0.6rem rgba($bolt-shadow-color, 0.18);

Source

_settings-global.scss:37

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-border-width

Bolt border width

Code

$bolt-border-width: 1px;

Source

_settings-global.scss:41

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-border-style

Bolt border style

Code

$bolt-border-style: solid;

Source

_settings-global.scss:43

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-border-color

Bolt border color

Code

$bolt-border-color: rgba(bolt-color(gray), 0.2);

Source

_settings-global.scss:45

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-border-radius

Bolt border radius

Code

$bolt-border-radius: 3px;

Source

_settings-global.scss:47

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-transition

Bolt transition

Code

$bolt-transition: ease-in-out 200ms;

Source

_settings-global.scss:51

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-transition-ease

Bolt transition ease

Code

$bolt-transition-ease: ease-in-out;

Source

_settings-global.scss:53

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-transition-timing

Bolt transition timing

Code

$bolt-transition-timing: 200ms;

Source

_settings-global.scss:55

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-translate-none

Bolt translate none effect

Code

$bolt-translate-none: translate3d(0, 0, 0);

Source

_settings-global.scss:59

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-translate-raised--small

Bolt translate raised small effect

Code

$bolt-translate-raised--small: translate3d(0, -1px, 0);

Source

_settings-global.scss:61

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-translate-raised--medium

Bolt translate raised medium effect

Code

$bolt-translate-raised--medium: translate3d(0, -0.125rem, 0);

Source

_settings-global.scss:63

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-translate-raised--large

Bolt translate raised large effect

Code

$bolt-translate-raised--large: translate3d(0, -0.25rem, 0);

Source

_settings-global.scss:65

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-global-link-hover-opacity

Bolt default global link hover opacity

Code

$bolt-global-link-hover-opacity: bolt-opacity(80);

Source

_settings-global.scss:70

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-global-link-active-opacity

Bolt default global link active opacity

Code

$bolt-global-link-active-opacity: bolt-opacity(60);

Source

_settings-global.scss:72

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-global-border-opacity

Bolt default global border opacity

Code

$bolt-global-border-opacity: bolt-opacity(20);

Source

_settings-global.scss:75

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-global-border-color

Bolt default global border color

Code

$bolt-global-border-color: bolt-color(gray);

Source

_settings-global.scss:77

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-global-button-hover-mix

Bolt default global button hover mix %

Code

$bolt-global-button-hover-mix: 15%;

Source

_settings-global.scss:80

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-global-button-hover-color

Bolt default global button hover color

Code

$bolt-global-button-hover-color: bolt-color(white);

Source

_settings-global.scss:82

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-global-button-active-mix

Bolt default global button active mix %

Code

$bolt-global-button-active-mix: 25%;

Source

_settings-global.scss:84

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-global-button-active-color

Bolt default global button active color

Code

$bolt-global-button-active-color: bolt-color(black);

Source

_settings-global.scss:86

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-block-elements-list

Bolt's definition of block level elements.

Code

$bolt-block-elements-list: 'p', 'pre', 'blockquote', 'table', 'ol', 'ul', 'dl', 'fieldset', 'legend', 'details', 'summary', 'hr', 'address';

Source

_settings-global.scss:94

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-all-block-elements

Bolt's definition of all unquoted block level elements.

Code

$bolt-all-block-elements: $bolt-unquoted-block-elements-list;

Source

_settings-global.scss:115

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-heading-elements-list

Bolt's definition of heading elements.

Code

$bolt-heading-elements-list: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6';

Source

_settings-global.scss:123

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-all-heading-elements

Bolt's definition of all unquoted heading elements.

Code

$bolt-all-heading-elements: $bolt-unquoted-heading-elements-list;

Source

_settings-global.scss:137

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$_bolt-custom-block-elements

Quoted custom block elements used to globally collect group generic styles. Elements registered via @mixin bolt-register-element.

Code

$_bolt-custom-block-elements: ();

Source

_settings-global.scss:148

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$_bolt-custom-inline-elements

Quoted custom inline elements used to globally collect group generic styles. Elements registered via @mixin bolt-register-element.

Code

$_bolt-custom-inline-elements: ();

Source

_settings-global.scss:151

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$_bolt-custom-inline-block-elements

Quoted custom inline-block elements used to globally collect group generic styles. Elements registered via @mixin bolt-register-element.

Code

$_bolt-custom-inline-block-elements: ();

Source

_settings-global.scss:154

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-all-custom-block-elements

All (unquoted) custom block elements used to globally collect group generic styles

Code

$bolt-all-custom-block-elements: ();

Source

_settings-global.scss:158

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-all-custom-inline-block-elements

All (unquoted) custom inline-block elements used to globally collect group generic styles

Code

$bolt-all-custom-inline-block-elements: ();

Source

_settings-global.scss:160

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

$bolt-all-custom-inline-elements

All (unquoted) custom inline elements used to globally collect group generic styles

Code

$bolt-all-custom-inline-elements: ();

Source

_settings-global.scss:162

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

@mixin bolt-register-element

Code

@mixin bolt-register-element($element, $element-type) { @if ($element-type != 'inline' and $element-type != 'inline-block' and $element-type != 'block'){ @error 'Please register your #{$element} element as either an inline, inline-block or block.'; } // @TODO: find a way to dynamically assign the right list to this @if ($element-type == 'inline') { $_bolt-custom-inline-elements: append($_bolt-custom-inline-elements, $element) !global; } @else if ( $element-type == 'block') { $_bolt-custom-block-elements: append($_bolt-custom-block-elements, $element) !global; } @else if ( $element-type == 'inline-block') { $_bolt-custom-inline-block-elements: append($_bolt-custom-inline-block-elements, $element) !global; } }

Params

Name	Type	Description	Default
$element	`string`	The custom element to register	(None)
$element-type	`string`	Three different types available: inline, inline-block (which may be rendered as inline-flex), and block	(None)

Example SCSS: Utility Mixin

@include bolt-register-element('bolt-ordered-list', 'block');

Throws

Please register your #{$element} element as either an inline, inline-block or block.

Source

_settings-global.scss:170

01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai

Settings: layout

$bolt-z-indexes [map]

Z-Index Settings

Code

$bolt-z-indexes: ( sets: ( fab: 300, modal: 200, modalBG: 180, navFixed: 160, tooltip: 140, popover: 120, nav: 100, contentTop: 80, content: 60, contentBottom: 40, backgroundTop: 20, background: 0, backgroundBottom: -20, ), );

Source

_settings-z-index.scss:14

01-settings/_settings-z-index.scss
View on GitHub

$bolt-spacing-gutter

Bolt gutter spacing value

Code

$bolt-spacing-gutter: 2rem;

Source

_settings-spacing.scss:12

01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai

$bolt-spacing-leading

Bolt default leading spacing value

Code

$bolt-spacing-leading: 1.65;

Source

_settings-spacing.scss:14

01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai

$bolt-spacing-squished

Bolt squished spacing value

Code

$bolt-spacing-squished: 0.5;

Source

_settings-spacing.scss:16

01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai

$bolt-spacing-stretched

Bolt stretched spacing value

Code

$bolt-spacing-stretched: 1.5;

Source

_settings-spacing.scss:18

01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai

$bolt-spacing-values [map]

Bolt's definition of spacing scale. Used within 'export-data()' to JSON.

Code

$bolt-spacing-values: ( '': 1, 'xxsmall': 0.125, 'xsmall': 0.25, 'small': 0.5, 'medium': 1, 'large': 2, 'xlarge': 4, 'xxlarge': 8, );

Source

_settings-spacing.scss:22

01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai

$bolt-spacing-properties [map]

Bolt's definition of available spacing properties.

Code

$bolt-spacing-properties: ('padding', 'margin');

Source

_settings-spacing.scss:37

01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai

$bolt-spacing-directions [map]

Bolt's definition of spacing directions.

Code

$bolt-spacing-directions: ('', 'top', 'right', 'bottom', 'left');

Source

_settings-spacing.scss:41

01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai

$bolt-spacing-types [map]

Bolt's definition of spacing types.

Code

$bolt-spacing-types: ('', 'squished', 'stretched');

Source

_settings-spacing.scss:45

01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai

Settings: opacity

$bolt-opacities [map]

Bolt's opacity scale. The keys in this array are the opacity value names and not necessarily numeric. For example, a valid key could be "semi-transparent". However, the values in this array must be valid numeric values for the CSS 'opacity' property.

Code

$bolt-opacities: ( 0: 0, 20: .2, 40: .4, 60: .6, 80: .8, 100: 1 );

Source

_settings-opacity.scss:14

01-settings/settings-opacity/_settings-opacity.scss
View on GitHub

Author

Remy Denton

Settings: shadows

@function bolt-get-shadows-map

Helper function to return $bolt-shadows map

Code

@function bolt-get-shadows-map($base-color: rgb(6, 10, 36)) { $bolt-shadows: ( 'sets': ( //'b1': ( // 'base': 'inset 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 2px rgba(0,0,0,0.24)', // 'lifted': '' //), 'level-10': ( 'base': '0 1px 2px 1px #{transparentize($base-color, .92)}', 'raised': '' ), 'level-20': ( 'base': '0 1px 4px 1px #{transparentize($base-color, .90)}, 0 5px 10px 0 #{transparentize($base-color, .92)}', 'raised': '0 1px 8px 1px #{transparentize($base-color, .82)}, 0 5px 10px 1px #{transparentize($base-color, .85)}, 0 15px 30px 0 #{transparentize($base-color, .84)}' ), 'level-30': ( 'base': '0 8px 15px 1px #{transparentize($base-color, .90)}, 0 18px 24px 1px #{transparentize($base-color, .88)}', 'raised': '0 8px 15px 1px #{transparentize($base-color, .90)}, 0 24px 36px 1px #{transparentize($base-color, .82)}, 0 35px 50px 0 #{transparentize($base-color, .75)}' ), 'level-40': ( 'base': '0 10px 20px 1px #{transparentize($base-color, .90)}, 0 24px 36px 1px #{transparentize($base-color, .82)}', 'raised': '0 10px 20px 1px #{transparentize($base-color, .90)}, 0 36px 49px 1px #{transparentize($base-color, .80)}, 0 45px 65px 0 #{transparentize($base-color, .70)}' ), 'level-50': ( 'base': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 40px 48px 1px #{transparentize($base-color, .75)}', 'raised': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 50px 70px 1px #{transparentize($base-color, .80)}, 0 55px 80px 0 #{transparentize($base-color, .70)}' ), 'level-60': ( 'base': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 50px 60px 1px #{transparentize($base-color, .60)}', 'raised': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 70px 80px 1px #{transparentize($base-color, .80)}, 0 80px 120px 0 #{transparentize($base-color, .65)}' ), 'level-70': ( 'base': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 80px 90px 1px #{transparentize($base-color, .60)}', 'raised': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 110px 130px 1px #{transparentize($base-color, .75)}, 0 130px 150px 0 #{transparentize($base-color, .65)}' ) ) ) !default; @return $bolt-shadows; }

Params

Name	Type	Description	Default
$base-color	`color`	The base shadow color (with the 'transparentize' filter applied)	`rgb(6, 10, 36)`

Example SCSS: Get the shadow 'sets'

$shadows: map-get(bolt-get-shadows-map(), 'sets');

Returns

map – Returns sass map of all shadow levels 'base' and 'raised' variations

Source

_settings-shadow.scss:17

01-settings/settings-shadow/_settings-shadow.scss
View on GitHub

$bolt-shadows

Variable containing default $bolt-shadows map - utility class and sets. Used within 'export-data()' to JSON.

Code

$bolt-shadows: bolt-get-shadows-map();

Source

_settings-shadow.scss:58

01-settings/settings-shadow/_settings-shadow.scss
View on GitHub

Settings: typography

$bolt-font-family--japanese

Bolt's definition of a Japanese specific font-stack.

Code

$bolt-font-family--japanese: -apple-system, BlinkMacSystemFont, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳゴシック', 'MS Gothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;

Source

_settings.lang-ja.scss:16

01-settings/00-settings-lang/_settings.lang-ja.scss
View on GitHub

$bolt-font-family--sans-fallback

Default sans-serif fallback font stack containing [1] maps to the system UI font and [2] known system UI fonts. Used within the $bolt-font-families map.

Code

$bolt-font-family--sans-fallback: -apple-system, BlinkMacSystemFont, /* [1] */ 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', /* [2] */ 'Helvetica Neue', sans-serif;

Source

_settings-font-family.scss:18

01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai

$bolt-font-family--serif

Default serif font stack. Used within the $bolt-font-families map.

Code

$bolt-font-family--serif: 'Georgia', serif;

Source

_settings-font-family.scss:25

01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai

$bolt-font-family--mono-fallback

Default monospace fallback font stack. Used within the $bolt-font-families map.

Code

$bolt-font-family--mono-fallback: monospace, monospace;

Source

_settings-font-family.scss:29

01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai

$bolt-font-family--sans

Default sans-serif font stack. Used within the $bolt-font-families map.

Code

$bolt-font-family--sans: 'Open Sans', 'Helvetica Neue', sans-serif;

Source

_settings-font-family.scss:38

01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai

$bolt-font-family--sans-subset

Default sans-serif subset font stack. Used within the $bolt-font-families map.

Code

$bolt-font-family--sans-subset: 'OpenSansSubset', 'Helvetica Neue', sans-serif;

Source

_settings-font-family.scss:43

01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai

$bolt-font-family--mono

Default monospace font stack. Used within the $bolt-font-families map.

Code

$bolt-font-family--mono: monospace, monospace;

Source

_settings-font-family.scss:47

01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai

$bolt-font-families [map]

Bolt's definition of body, heading, and code text.

Code

$bolt-font-families: ( font-families: ( body: ( fallback-font: $bolt-font-family--sans-fallback, custom-font: $bolt-font-family--sans, loaded-class: $bolt-fonts--loaded-class ), bodySubset: ( fallback-font: $bolt-font-family--sans-fallback, custom-font: $bolt-font-family--sans-subset, loaded-class: $bolt-fonts--subset-loaded-class ), heading: ( fallback-font: $bolt-font-family--sans-fallback, custom-font: $bolt-font-family--sans, loaded-class: $bolt-fonts--loaded-class ), code: ( fallback-font: $bolt-font-family--mono-fallback, custom-font: $bolt-font-family--mono, loaded-class: $bolt-fonts--loaded-class ) ) );

Source

_settings-font-family.scss:57

01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai

$bolt-font-size--small-bp

Small breakpoint font-size

Code

$bolt-font-size--small-bp: bolt-rem(bolt-breakpoint(xxsmall));

Source

_settings-font-size.scss:10

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-size--medium-bp

Medium breakpoint font-size

Code

$bolt-font-size--medium-bp: bolt-rem(bolt-breakpoint(medium));

Source

_settings-font-size.scss:12

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-size--xxxlarge--max

Default XXX Large Max font-size. Used within $bolt-font-sizes map.

Code

$bolt-font-size--xxxlarge--max: 3.083rem;

Source

_settings-font-size.scss:20

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-size--xxxlarge--min

Default XXX Large Min font-size. Used within $bolt-font-sizes map.

Code

$bolt-font-size--xxxlarge--min: 2.275rem;

Source

_settings-font-size.scss:23

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-size--xxlarge

Default XX Large font-size. Used within $bolt-font-sizes map.

Code

$bolt-font-size--xxlarge: 1.781rem;

Source

_settings-font-size.scss:26

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-size--xlarge

Default X Large font-size. Used within $bolt-font-sizes map.

Code

$bolt-font-size--xlarge: 1.417rem;

Source

_settings-font-size.scss:29

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-size--large

Default Large font-size. Used within $bolt-font-sizes map.

Code

$bolt-font-size--large: 1.111rem;

Source

_settings-font-size.scss:32

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-size--medium

Medium font-size. Used within $bolt-font-sizes map.

Code

$bolt-font-size--medium: 1rem;

Source

_settings-font-size.scss:35

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-size--small

Small font-size. Used within $bolt-font-sizes map.

Code

$bolt-font-size--small: 0.9rem;

Source

_settings-font-size.scss:38

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-size--xsmall

X Small font-size. Used within $bolt-font-sizes map.

Code

$bolt-font-size--xsmall: 0.8rem;

Source

_settings-font-size.scss:41

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-line-height--xxxlarge

Default XXX Large line-height. Used within $bolt-font-sizes map.

Code

$bolt-line-height--xxxlarge: 1.14;

Source

_settings-font-size.scss:45

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-line-height--xxlarge

Default XX Large line-height. Used within $bolt-font-sizes map.

Code

$bolt-line-height--xxlarge: 1.31;

Source

_settings-font-size.scss:48

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-line-height--xlarge

Default X Large line-height. Used within $bolt-font-sizes map.

Code

$bolt-line-height--xlarge: 1.35;

Source

_settings-font-size.scss:51

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-line-height--large

Default Large line-height. Used within $bolt-font-sizes map.

Code

$bolt-line-height--large: 1.45;

Source

_settings-font-size.scss:54

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-line-height--medium

Default Medium line-height. Used within $bolt-font-sizes map.

Code

$bolt-line-height--medium: 1.65;

Source

_settings-font-size.scss:57

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-line-height--small

Default Small line-height. Used within $bolt-font-sizes map.

Code

$bolt-line-height--small: 1.51;

Source

_settings-font-size.scss:60

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-line-height--xsmall

Default X Small line-height. Used within $bolt-font-sizes map.

Code

$bolt-line-height--xsmall: 1.45;

Source

_settings-font-size.scss:63

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-line-height--tight

Default Tight line-height. Used within $bolt-font-sizes map.

Code

$bolt-line-height--tight: 1.111;

Source

_settings-font-size.scss:66

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-sizes [map]

Bolt's definition of all options of possible text sizes.

Code

$bolt-font-sizes: ( font-sizes: ( xxxlarge: ( font-size: ( $bolt-font-size--small-bp: $bolt-font-size--xxxlarge--min, $bolt-font-size--medium-bp: $bolt-font-size--xxxlarge--max ), line-height: ( regular: $bolt-line-height--xxxlarge, tight: $bolt-line-height--tight ), ), xxlarge: ( font-size: $bolt-font-size--xxlarge, line-height: ( regular: $bolt-line-height--xxlarge, tight: $bolt-line-height--tight ) ), xlarge: ( font-size: $bolt-font-size--xlarge, line-height: ( regular: $bolt-line-height--xlarge, tight: $bolt-line-height--tight ) ), large: ( font-size: $bolt-font-size--large, line-height: ( regular: $bolt-line-height--large, tight: $bolt-line-height--tight ) ), medium: ( font-size: $bolt-font-size--medium, line-height: ( regular: $bolt-line-height--medium, tight: $bolt-line-height--tight ) ), small: ( font-size: $bolt-font-size--small, line-height: ( regular: $bolt-line-height--small, tight: $bolt-line-height--tight ) ), xsmall: ( font-size: $bolt-font-size--xsmall, line-height: ( regular: $bolt-line-height--xsmall, tight: $bolt-line-height--tight ) ) ) );

Source

_settings-font-size.scss:73

01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai

$bolt-font-weight--regular

Default regular font weight

Code

$bolt-font-weight--regular: 400;

Source

_settings-font-weight.scss:12

01-settings/settings-font-weight/_settings-font-weight.scss
View on GitHub

Author

Mike Mai

$bolt-font-weight--semibold

Default semibold font weight

Code

$bolt-font-weight--semibold: 600;

Source

_settings-font-weight.scss:15

01-settings/settings-font-weight/_settings-font-weight.scss
View on GitHub

Author

Mike Mai

$bolt-font-weight--bold

Default bold font weight

Code

$bolt-font-weight--bold: 800;

Source

_settings-font-weight.scss:18

01-settings/settings-font-weight/_settings-font-weight.scss
View on GitHub

Author

Mike Mai

$bolt-font-weights [map]

Bolt's definition of all possible options of text weights.

Code

$bolt-font-weights: ( font-weights: ( bold: $bolt-font-weight--bold, semibold: $bolt-font-weight--semibold, regular: $bolt-font-weight--regular, normal: $bolt-font-weight--regular ) );

Source

_settings-font-weight.scss:43

01-settings/settings-font-weight/_settings-font-weight.scss
View on GitHub

Author

Mike Mai

Tools: border

@function bolt-border-radius

Bolt border radius function

Code

@function bolt-border-radius($value) { @if map-has-key($bolt-border-radius-values, $value) { @return map-get($bolt-border-radius-values, $value) } @else { @error 'A value, #{$value}, was passed into bolt-border-radius() that is not defined in $bolt-border-radius-values'; } }

Params

Name	Type	Description	Default
$value	`string`		(None)

Example SCSS: bolt-border-radius function

.element { border-radius: bolt-border-radius(small); }

Throws

A value, #{$value}, was passed into bolt-border-radius() that is not defined in $bolt-border-radius-values

Source

_tools-border-radius.scss:16

02-tools/tools-border-radius/_tools-border-radius.scss
View on GitHub

@mixin bolt-border-radius

Bolt border radius mixin

Code

@mixin bolt-border-radius($value) { $border-radius: map-get-deep($bolt-border-radius-values, $value); @if map-has-key($bolt-border-radius-values, $value) { border-radius: $border-radius; } @else { @error 'A value, #{$value}, was passed into @include bolt-border-radius() that is not defined in $bolt-border-radius-values'; } }

Params

Name	Type	Description	Default
$value	`string`		(None)

Example SCSS: bolt-border-radius mixin

.element { @include bolt-border-radius(small); }

Throws

A value, #{$value}, was passed into @include bolt-border-radius() that is not defined in $bolt-border-radius-values

Source

_tools-border-radius.scss:30

02-tools/tools-border-radius/_tools-border-radius.scss
View on GitHub

Tools: breakpoints

@function bolt-breakpoint

This returns the breakpoint value (with px) from $bolt-breakpoints map

Code

@function bolt-breakpoint($name) { @return map-get($bolt-breakpoints, $name); }

Params

Name	Type	Description	Default
$name	`string`	The name of the breakpoint (from within $bolt-breakpoints)	(None)

Example: SCSS

.element { @media screen and (max-width: #{bolt-breakpoint(xsmall)}) { font-size: 24px; } }

Returns

string – The breakpoint value (with px)

Source

_tools-breakpoint.scss:20

02-tools/tools-breakpoint/_tools-breakpoint.scss
View on GitHub

Author

Salem Ghoweri
Mike Mai

@mixin bolt-mq

This provides a wrapper mixin for performing bolt media queries with mq() which allows for the use of: $from (inclusive min-width boundary), $until (exclusive max-width boundary), $and (additional custom directives), $media-type (media type: screen, print, etc)

Code

@mixin bolt-mq($args...) { @include mq($args...) { @content; } }

Params

Name	Type	Description	Default
$args...		Bolt Media Query args ([breakpoint-name], $from, $until, $and, $media-type)	(None)

Example SCSS: Bolt's mq() wrapper

.element { @include bolt-mq(($until: small){ flex-direction: column; } }

Source

_tools-breakpoint.scss:39

02-tools/tools-breakpoint/_tools-breakpoint.scss
View on GitHub

Author

Salem Ghoweri
Mike Mai

@mixin bolt-poly-fluid-sizing

Generate linear interpolated size values through multiple break points

Code

@mixin bolt-poly-fluid-sizing($property, $map) { // Get the number of provided breakpoints $length: length(map-keys($map)); // Error if the number of breakpoints is < 2 @if ($length < 2) { @error 'bolt-poly-fluid-sizing() $map requires at least values'; } // Sort the map by viewport width (key) $map: bolt-map-sort($map); $keys: map-keys($map); // $map: (576px: 22px, 320px: 18px, 992px: 34px, 768px: 24px); // @include bolt-poly-fluid-sizing('font-size', $map); // Minimum size #{$property}: map-get($map, nth($keys, 1)); // Interpolated size through breakpoints @for $i from 1 through ($length - 1) { @media (min-width: nth($keys, $i)) { $value1: map-get($map, nth($keys, $i)); $value2: map-get($map, nth($keys, ($i + 1))); // If values are not equal, perform linear interpolation @if ($value1 != $value2) { #{$property}: bolt-linear-interpolation((nth($keys, $i): $value1, nth($keys, ($i + 1)): $value2)); } @else { #{$property}: $value1; } } } // Maxmimum size @media (min-width: nth($keys, $length)) { #{$property}: map-get($map, nth($keys, $length)); } }

Params

Name	Type	Description	Default
$property	`string`	A string CSS property name	(None)
$map	`map`	A Sass map of viewport unit and size value pairs	(None)

Example: SCSS

@include bolt-poly-fluid-sizing('font-size', (576px: 22px, 768px: 24px, 992px: 34px));

Throws

bolt-poly-fluid-sizing() $map requires at least values

Source

_tools-poly-fluid-sizing.scss:18

02-tools/tools-poly-fluid-sizing/_tools-poly-fluid-sizing.scss
View on GitHub

Author

Mike Mai

Tools: button reset

@mixin bolt-button-reset

Lightweight style reset for button and input elements

Code

@mixin bolt-button-reset($value) { @include bolt-padding(0); @include bolt-font-family(body); appearance: none; // override default [type=submit] button styles coming from Normalize background: none; }

Params

Name	Type	Description	Default
$value	`string`		(None)

Example SCSS: bolt-button-reset mixin

.element { @include bolt-button-reset; }

Source

_tools-button-reset.scss:15

02-tools/tools-button-reset/_tools-button-reset.scss
View on GitHub

Tools: colors

@mixin bolt-button-color

Generate different background and border color button interaction states based on the primary color passed in

Code

@mixin bolt-button-color($color) { color: bolt-text-contrast($color); border-color: mix(black, $color, 25%); background-color: $color; // &:hover { // color: bolt-text-contrast($color); // background-color: mix(black, $color, 15%); // border-color: mix(black, $color, 40%); // } // // &:focus, // &:active { // color: bolt-text-contrast($color); // background-color: mix(black, $color, 30%); // border-color: mix(black, $color, 55%); // } }

Params

Name	Type	Description	Default
$color	`color`	Used to generate button text, background, and border color	(None)

Example: SCSS

.element { @include bolt-button-color(bolt-color(success, dark)); }

Source

_tools-button-color.scss:16

02-tools/tools-button-color/_tools-button-color.scss
View on GitHub

Author

Salem Ghoweri

@function bolt-color

Helper functions for applying global color swatches stored in Sass Maps

Code

@function bolt-color($color, $tone: $bolt-color-default) { @return map-get-deep($bolt-colors, "#{$color}", $tone); }

Params

Name	Type	Description	Default
$color	`string`	Bolt color base (e.g. indigo)	(None)
$tone	`string`	Bolt color tone (e.g. light)	`$bolt-color-default`

Returns

HSL|RGB – The mapped bolt color value

Source

_tools-color-palette.scss:13

02-tools/tools-color-palette/_tools-color-palette.scss
View on GitHub

@mixin bolt-color

Mixin to return color value

Code

@mixin bolt-color($color, $tone: $bolt-color-default, $important: null) { @if $important == important { $important: !important; } /* stylelint-disable-next-line */ color: map-get-deep($bolt-colors, $color, $tone) $important; }

Params

Name	Type	Description	Default
$color	`string`	Bolt color base (e.g. indigo)	(None)
$tone	`string`	Bolt color tone (e.g. light)	`$bolt-color-default`
$important	`string`	If 'important', then !important will be added onto the declaration string value	`null`

Example SCSS: bolt-color mixin

.element { @include bolt-color(indigo, light, important); }

Source

_tools-color-palette.scss:25

02-tools/tools-color-palette/_tools-color-palette.scss
View on GitHub

Tools: layout

@mixin bolt-full-bleed

Places an element full browser width

Code

@mixin bolt-full-bleed() { position: relative; right: 50%; left: 50%; width: 100%; //fallback if vw not supported. width: 100vw; margin-top: -0.5px; //-0.5px is currently needed to patch a rendering bug in Firefox (when combined with layers being hardware accelerated) margin-right: -50vw; margin-bottom: -0.5px; //-0.5px is currently needed to patch a rendering bug in Firefox (when combined with layers being hardware accelerated) margin-left: -50vw; }

Example: SCSS

.element { @include bolt-full-bleed(); }

Source

_tools-full-bleed.scss:8

02-tools/tools-full-bleed/_tools-full-bleed.scss
View on GitHub

Author

Evan Lovely

@mixin bolt-vertical-scroll

Provides a bolt method for controlling vertical scroll (overflow)

Code

@mixin bolt-vertical-scroll() { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

Example: SCSS

.element { @include bolt-vertical-scroll(); }

Source

_tools-scrolling.scss:15

02-tools/tools-scrolling/_tools-scrolling.scss
View on GitHub

Author

Salem Ghoweri

@mixin bolt-horizontal-scroll

Provides a bolt method for controlling horizontal scroll (overflow)

Code

@mixin bolt-horizontal-scroll() { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

Example: SCSS

.element { @include bolt-horizontal-scroll(); }

Source

_tools-scrolling.scss:26

02-tools/tools-scrolling/_tools-scrolling.scss
View on GitHub

Author

Salem Ghoweri

@function _bolt-create-spacing-map

Private bolt function to generate default spacing scale, based off of the base font size

Code

@function _bolt-create-spacing-map($sizes, $char: '') { $map: (); @each $name, $value in $sizes { $keyName: $name; @if ($char != '' and $keyName != null) { $keyName: $char + $keyName; } $keyValue: $value * $bolt-spacing-gutter; $map: map-merge($map, ($keyName: $keyValue)); } @return $map; }

Params

Name	Type	Description	Default
$sizes	`list`	Sizes to iterate over	(None)
$char	`string`	String to append to $keyName setting	`''`

Example SCSS: $bolt-spacing-values not shown

$bolt-spacing-sizes: _bolt-create-spacing-map($bolt-spacing-values);

Returns

map – $map

Source

_tools-spacing.scss:15

02-tools/tools-spacing/_tools-spacing.scss
View on GitHub

Author

Salem Ghoweri

$bolt-spacing-sizes

A map created from $bolt-spacing-values

Code

$bolt-spacing-sizes: _bolt-create-spacing-map($bolt-spacing-values);

Source

_tools-spacing.scss:29

02-tools/tools-spacing/_tools-spacing.scss
View on GitHub

Author

Salem Ghoweri

@function bolt-spacing

Convenience function for pulling data from $bolt-spacing-sizes

Code

@function bolt-spacing($size) { @return map-get($bolt-spacing-sizes, nth($size, 1)); }

Params

Name	Type	Description	Default
$size	`string`	T-shirt size to pull	(None)

Example: SCSS

.element { min-height: bolt-spacing(large); }

Returns

number – A spacing unit

Source

_tools-spacing.scss:41

02-tools/tools-spacing/_tools-spacing.scss
View on GitHub

Author

Salem Ghoweri

@function bolt-v-spacing

Convert shirt sizes in baseline-optimized sizes

Code

@function bolt-v-spacing($size, $modifier: null) { @if ($modifier == 'squished') { $modifier: $bolt-spacing-squished; } @else if ($modifier == 'stretched') { $modifier: $bolt-spacing-stretched; } @else { $modifier: 1; } @return (bolt-spacing($size) / bolt-strip-unit($bolt-spacing-gutter)) * $bolt-spacing-leading * $modifier; }

Params

Name	Type	Description	Default
$size	`string`	T-shirt size	(None)
$modifier	`string`	Unit to multiply ending result by	`null`

Example: SCSS

.element { width: bolt-v-spacing(xsmall); }

Returns

number

Source

_tools-spacing.scss:58

02-tools/tools-spacing/_tools-spacing.scss
View on GitHub

Author

Salem Ghoweri

@function bolt-vertical-spacing

An alias for @function bolt-v-spacing

Code

@function bolt-vertical-spacing($size) { @return bolt-v-spacing($size); }

Params

Name	Type	Description	Default
$size	`string`	T-shirt size	(None)

Example: SCSS

.element { width: bolt-vertical-spacing(xsmall); }

Returns

number

Source

_tools-spacing.scss:79

02-tools/tools-spacing/_tools-spacing.scss
View on GitHub

Author

Salem Ghoweri

@function _bolt-collapse-directional-values

Directional-property mixins are shorthands for writing properties like the following

Code

@function _bolt-collapse-directional-values($vals) { $output: null; $a: nth($vals, 1); $b: if(length($vals) < 2, $a, nth($vals, 2)); $c: if(length($vals) < 3, $a, nth($vals, 3)); $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4))); @if $a == 0 { $a: 0; } @if $b == 0 { $b: 0; } @if $c == 0 { $c: 0; } @if $d == 0 { $d: 0; } @if $a == $b and $a == $c and $a == $d { $output: $a; } @else if $a == $c and $b == $d { $output: $a $b; } @else if $b == $d { $output: $a $b $c; } @else { $output: $a $b $c $d; } @return $output; }

Params

Name	Type	Description	Default
$vals	`List`	List of directional values	(None)

Example SCSS: Usage

.element { @include border-style(dotted null); @include margin(null 0 10px); }

Example CSS: CSS Output

.element { border-bottom-style: dotted; border-top-style: dotted; margin-bottom: 10px; margin-left: 0; margin-right: 0; }

Returns

List

Source

_tools-collapse-directionals.scss:32

02-tools/tools-spacing/libs/_tools-collapse-directionals.scss
View on GitHub

Author

Salem Ghoweri

@function _bolt-contains-falsy

Checks if a list does not contain any values.

Code

@function _bolt-contains-falsy($list) { @each $item in $list { @if not $item { @return true; } } @return false; }

Params

Name	Type	Description	Default
$list	`list`	The list to check against.	(None)

Returns

boolean

Source

_tools-contains-falsy.scss:15

02-tools/tools-spacing/libs/_tools-contains-falsy.scss
View on GitHub

Author

Salem Ghoweri

@mixin _bolt-directional-property

Output directional properties, for instance `margin`.

Code

@mixin _bolt-directional-property($prefix, $suffix, $values) { @if $important == important { $important: !important; } // Property Names $top: $prefix + '-top' + if($suffix, '-#{$suffix}', ''); $bottom: $prefix + '-bottom' + if($suffix, '-#{$suffix}', ''); $left: $prefix + '-left' + if($suffix, '-#{$suffix}', ''); $right: $prefix + '-right' + if($suffix, '-#{$suffix}', ''); $all: $prefix + if($suffix, '-#{$suffix}', ''); $values: _bolt-collapse-directional-values($values); @if _bolt-contains-falsy($values) { @if nth($values, 1) { #{$top}: nth($values, 1) $important; } @if length($values) == 1 { @if nth($values, 1) { #{$right}: nth($values, 1) $important; #{$bottom}: nth($values, 1) $important; #{$left}: nth($values, 1) $important; } } @else { @if nth($values, 2) { #{$right}: nth($values, 2) $important; } } @if length($values) == 2 { @if nth($values, 1) { #{$bottom}: nth($values, 1) $important; } @if nth($values, 2) { #{$left}: nth($values, 2) $important; } } @else if length($values) == 3 { @if nth($values, 3) { #{$bottom}: nth($values, 3) $important; } @if nth($values, 2) { #{$left}: nth($values, 2) $important; } } @else if length($values) == 4 { @if nth($values, 3) { #{$bottom}: nth($values, 3) $important; } @if nth($values, 4) { #{$left}: nth($values, 4) $important; } } } @else { #{$all}: $values $important; } }

Params

Name	Type	Description	Default
$prefix	`String`	Prefix to use	(None)
$suffix	`String`	Suffix to use	(None)
$values	`List`	List of values	(None)

Source

_tools-directional-property.scss:20

02-tools/tools-spacing/libs/_tools-directional-property.scss
View on GitHub

Author

Salem Ghoweri

@mixin bolt-z-index

Bolt Z Index mixin

Code

@mixin bolt-z-index($key: "content", $utility: false) { $indexes: map-get($bolt-z-indexes, 'sets'); $important: ''; @if $utility { $important: '!important'; } @if map-has-key($indexes, $key) { z-index: map-get($indexes, $key) #{$important}; } @else { @error 'A value, #{$key}, was passed into @include bolt-z-index() that is not defined in $bolt-z-indexes'; } }

Params

Name	Type	Description	Default
$key	`string`		`"content"`
$utility	`boolean`		`false`

Example SCSS: bolt-z-index mixin

.element { @include bolt-z-index(tooltip); }

Throws

A value, #{$key}, was passed into @include bolt-z-index() that is not defined in $bolt-z-indexes

Source

_tools-z-index.scss:16

02-tools/tools-z-index/_tools-z-index.scss
View on GitHub

@function bolt-z-index

Bolt Z Index function

Code

@function bolt-z-index($key) { $indexes: map-get($bolt-z-indexes, 'sets'); @if map-has-key($indexes, $key) { @return map-get($indexes, $key) } @else { @error 'A value, #{$key}, was passed into bolt-z-index() that is not defined in $bolt-z-indexes'; } }

Params

Name	Type	Description	Default
$key	`string`		(None)

Example SCSS: bolt-z-index function

.element { z-index: bolt-z-index('nav'); }

Throws

A value, #{$key}, was passed into bolt-z-index() that is not defined in $bolt-z-indexes

Source

_tools-z-index.scss:36

02-tools/tools-z-index/_tools-z-index.scss
View on GitHub

Tools: shadows

@mixin bolt-shadow

This outputs the correct bolt values for transform and box-shadow

Code

@mixin bolt-shadow($key: 'G', $lifted: false, $base-color: false, $utility: false) { $shadows: map-get(bolt-get-shadows-map(), 'sets'); @if $base-color { $shadows: map-get(bolt-get-shadows-map($base-color), 'sets'); } $important: ''; @if $utility { $important: '!important'; } @if not(map-has-key($shadows, $key)) { @error 'A value, #{$key}, was passed into @include bolt-shadow() that is not defined in $bolt-shadows'; } @else { @if $lifted { transform: translateY(-2px) #{$important}; box-shadow: unquote(map-get(map-get($shadows, $key), 'raised')) #{$important}; } @else { box-shadow: unquote(map-get(map-get($shadows, $key), 'base')) #{$important}; transition: all 0.3s cubic-bezier(.25,.8,.25,1) #{$important}; } } }

Params

Name	Type	Description	Default
$key	`string`	The desired shadow level (e.g. 'level-30')	`'G'`
$lifted	`boolean`	Weather or not to use the 'raised' values	`false`
$base-color	`boolean\|string`	The base shadow color (with the 'transparentize' filter applied)	`false`
$utility	`boolean`	If true, adds '!important' to declaration	`false`

Example: SCSS

.element { @include bolt-shadow('level-30', true); }

Throws

A value, #{$key}, was passed into @include bolt-shadow() that is not defined in $bolt-shadows

Source

_tools-shadow.scss:19

02-tools/tools-shadow/_tools-shadow.scss
View on GitHub

Tools: typography

@function _bolt-str-replace

A private utility function for carrying out string replacement

Code

@function _bolt-str-replace($string, $search, $replace: '') { $index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + _bolt-str-replace(str-slice($string, $index + str-length($search)), $search, $replace); } @return $string; }

Params

Name	Type	Description	Default
$string	`string`	The "needle"	(None)
$search	`string`	The "haystack"	(None)
$replace	`string`	The string value to replace	`''`

Example SCSS: Basic replace ($name not shown)

$example = _bolt-str-replace($name, ' ', '_')

Source

_tools-font-face.scss:26

02-tools/tools-font-face/_tools-font-face.scss
View on GitHub

Author

Mike Mai

@mixin bolt-font-face

Adds a correctly formatted @font-face declaration. Set at the top of the stylesheet.

Code

@mixin bolt-font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff) { $src: null; $extmods: ( eot: '?', svg: '#' + _bolt-str-replace($name, ' ', '_') ); $formats: ( otf: 'opentype', ttf: 'truetype' ); @each $ext in $exts { $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext); $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext); $src: append($src, url('#{$path}.#{$extmod}') format(quote($format)), comma); } @font-face { font-family: quote($name); font-style: $style; font-weight: $weight; src: $src; } }

Params

Name	Type	Description	Default
$name	`string`	The 'font-family' name string	(None)
$path	`string`	Path to the font files	(None)
$weight	`string`	Default font weight	`null`
$style	`string`	Default style	`null`
$exts	`string`	Default extensions	`woff2 woff`

Example: SCSS

@include bolt-font-face('Awesome_font_name, '/path/to/font/');

Source

_tools-font-face.scss:48

02-tools/tools-font-face/_tools-font-face.scss
View on GitHub

Author

Mike Mai

@mixin bolt-font-family

This returns the font-family for a specific element. Brand fonts are the default, with system fonts as the fallback.

Code

@mixin bolt-font-family($type, $is_root: false) { $fallback-font-family: map-get-deep($bolt-font-families, 'font-families', $type, 'fallback-font'); $custom-font-family: map-get-deep($bolt-font-families, 'font-families', $type, 'custom-font'); $fonts-loaded-class: map-get-deep($bolt-font-families, 'font-families', $type, 'loaded-class'); $fontFamilyNames: map-keys(map-get($bolt-font-families, 'font-families')); // get the names of all available font families (custom and fallback) font-family: $fallback-font-family; font-family: var(--bolt-font-family-#{$type}); @if $is_root == false { .#{$fonts-loaded-class} & { font-family: $custom-font-family; font-family: var(--bolt-font-family-#{$type}); } } @else { @each $fontFamilyName in $fontFamilyNames { --bolt-font-family-#{$fontFamilyName}: #{map-get-deep($bolt-font-families, 'font-families', $fontFamilyName, 'fallback-font')}; } &.#{$fonts-loaded-class} { @each $fontFamilyName in $fontFamilyNames { --bolt-font-family-#{$fontFamilyName}: #{map-get-deep($bolt-font-families, 'font-families', $fontFamilyName, 'custom-font')}; } font-family: $custom-font-family; } } }

Params

Name	Type	Description	Default
$type	`string`	Defines the font-family being used for each type of text: heading, body, or code.	(None)
$is_root	`boolean`		`false`

Example SCSS: bolt-font-family mixin

.element { @include bolt-font-family(body); }

Source

_tools-font-family.scss:17

02-tools/tools-font-family/_tools-font-family.scss
View on GitHub

Author

Mike Mai

@mixin bolt-font-kerning

This applies default font kerning styles for supporting browsers.

Code

@mixin bolt-font-kerning() { font-feature-settings: 'kern'; font-kerning: normal; // Safari 7+, Firefox 24+, Chrome 33(?) }

Example SCSS: Setting globals

*, *:before, *:after { @include bolt-font-kerning; }

Source

_tools-font-kerning.scss:18

02-tools/tools-font-kerning/_tools-font-kerning.scss
View on GitHub

Author

Mike Mai

@mixin bolt-font-size

This returns the font-size and relevant line-height for a specific element.

Code

@mixin bolt-font-size($size, $leading: regular) { $font-size: map-get-deep($bolt-font-sizes, 'font-sizes', $size, 'font-size'); @if (type-of($font-size) == 'map') { $length: length(map-keys($font-size)); @if ($length < 2) { font-size: nth($font-size, 2); } @else { @include bolt-poly-fluid-sizing('font-size', $font-size); } } @else { font-size: $font-size; } @if ($leading != '' and $leading != null) { @if (type-of($leading) == number) { $leading: $leading; } @else if (type-of($leading) == string) { $leading: map-get-deep($bolt-font-sizes, 'font-sizes', $size, 'line-height', $leading); } @if (type-of($leading) == 'map') { $length: length(map-keys($leading)); @if ($length < 2) { line-height: nth($leading, 2); } @else { @debug $leading; @include bolt-poly-fluid-sizing('line-height', $leading); } } @else { line-height: $leading; } } }

Params

Name	Type	Description	Default
$size	`string`	Defines the size of the text: xsmall, small, base, medium, large, xlarge, or xxlarge.	(None)
$leading	`string`	Defines the line-height of the text: regular or tight.	`regular`

Example: SCSS

.element { @include bolt-font-size(large); }

Source

_tools-font-size.scss:18

02-tools/tools-font-size/_tools-font-size.scss
View on GitHub

Author

Mike Mai

@mixin bolt-font-weight

This returns the font-weight for a specific element.

Code

@mixin bolt-font-weight($weight) { $font-weight: map-get-deep($bolt-font-weights, 'font-weights', $weight); font-weight: $font-weight; }

Params

Name	Type	Description	Default
$weight	`string`	Defines the weight of the text: bold, semi-bold, regular, or normal.	(None)

Example SCSS: Mixin

.element { @include bolt-font-weight(bold); }

Example CSS: Output

.element { font-weight: 800; }

Source

_tools-font-weight.scss:20

02-tools/tools-font-weight/_tools-font-weight.scss
View on GitHub

Author

Mike Mai

@function bolt-text-contrast

Determines the correct color (black or white) to return, given the color passed in

Code

@function bolt-text-contrast($color) { @if bolt-theme-tone($color) == "dark" { @return bolt-color(white); } @else { @return bolt-color(black); } }

Params

Name	Type	Description	Default
$color	`color`	The color to check against	(None)

Example SCSS: $primary-background-default not shown

.element:hover { color: bolt-text-contrast($primary-background-default); }

Returns

color – Either 'black' or 'white'

Source

_tools-text-contrast.scss:17

02-tools/tools-text-contrast/_tools-text-contrast.scss
View on GitHub

Author

Salem Ghoweri

@mixin bolt-uppercase

Provides a bolt method for transforming text to uppercase

Code

@mixin bolt-uppercase() { text-transform: uppercase; letter-spacing: 0.1rem; }

Example: SCSS

.element { @include bolt-uppercase(); }

Source

_tools-uppercase.scss:15

02-tools/tools-uppercase/_tools-uppercase.scss
View on GitHub

Author

Salem Ghoweri

Tools: utilities

@mixin bolt-if-browser-supports-display-contents

Just checking "@supports (display: contents)" isn't enough to know that a browser supports it FULLY. So, we check support for both "display: contents" and "caret-color" (which has similar browser support) -- if a browser fails either check, it gets the cross-browser fallback instead.

Code

@mixin bolt-if-browser-supports-display-contents() { @supports (display: contents) and (caret-color: red) { @content; } }

Example: SCSS

.element { @include bolt-if-browser-supports-display-contents { .element__item { @media screen and (max-width: #{bolt-breakpoint(xsmall)}) { display: contents; } } } }

Source

_tools-browser-support.scss:27

02-tools/tools-browser-support/_tools-browser-support.scss
View on GitHub

Author

Remy Denton

@mixin bolt-clearfix

Provides the ability to add a proper clearfix

Code

@mixin bolt-clearfix($important: null) { @if $important == important { $important: !important; } &:before, &:after { content: ' ' $important; display: table $important; } &:after { clear: both $important; } }

Params

Name	Type	Description	Default
$important	`boolean`	Set true to add "!important"	`null`

Example: SCSS

.element { @include bolt-clearfix(); }

Source

_tools-clearfix.scss:16

02-tools/tools-clearfix/_tools-clearfix.scss
View on GitHub

Author

Salem Ghoweri

@mixin bolt-ie11-only

Define CSS that only targets Internet Explorer 11.

Code

@mixin bolt-ie11-only() { @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { @content; } }

Example: SCSS

.element { @include bolt-ie11-only { display: block; } }

Source

_tools-ie11-only.scss:17

02-tools/tools-ie11-only/_tools-ie11-only.scss
View on GitHub

Author

Mike Mai

@function bolt-linear-interpolation

Calculate the definition of a line between two points

Code

@function bolt-linear-interpolation($map) { $keys: map-keys($map); @if (length($keys) != 2) { @error 'linear-interpolation() $map must be exactly 2 values'; } // The slope $m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1))) / ( nth($keys, 2) - nth($keys, 1)); // The y-intercept $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1); // Determine if the sign should be positive or negative $sign: '+'; @if ($b < 0) { $sign: '-'; $b: abs($b); } @return calc(#{$m * 100}vw #{$sign} #{$b}); }

Params

Name	Type	Description	Default
$map	`map`	A SASS map of viewport widths and size value pairs	(None)

Example: SCSS

font-size: bolt-linear-interpolation((320px: 18px, 768px: 26px));

Returns

Number – A linear equation as a calc() function

Throws

linear-interpolation() $map must be exactly 2 values

Source

_tools-linear-interpolation.scss:17

02-tools/tools-linear-interpolation/_tools-linear-interpolation.scss
View on GitHub

Author

Mike Mai

@function bolt-list-remove

Removed an item for a SASS list based on it's index (mimics behavior of the native map-remove function)

Code

@function bolt-list-remove($list, $index) { $newList: (); @for $i from 1 through length($list) { @if $i != $index { $newList: append($newList, nth($list, $i), 'space'); } } @return $newList; }

Params

Name	Type	Description	Default
$list	`list`	A SASS list	(None)
$index	`string`	The list index to remove	(None)

Example: SCSS

$list: bolt-list-remove($list, index($list, $value));

Returns

list – $newList - A SASS list

Source

_tools-list-remove.scss:17

02-tools/tools-list-remove/_tools-list-remove.scss
View on GitHub

Author

Mike Mai

@function bolt-list-sort

Sort a SASS list

Code

@function bolt-list-sort($list) { $sortedlist: (); @while length($list) > 0 { $value: nth($list, 1); @each $item in $list { @if type-of($item) == "number" and type-of($value) == "number" { @if $item < $value { $value: $item; } } @else { @warn 'Problem encountered'; // `@warn` shows Backtrace, `@error` does not @error 'These values are not sortable: ' + $item + ' and ' + $value; } } $sortedlist: append($sortedlist, $value, "space"); $list: bolt-list-remove($list, index($list, $value)); } @return $sortedlist; }

Params

Name	Type	Description	Default
$list	`list`	A SASS list	(None)

Example SCSS: Sorting ($map not shown)

$keys: bolt-list-sort(map-keys($map));

Returns

List – $sortedlist - A sorted SASS list

Throws

These values are not sortable:

Source

_tools-list-sort.scss:17

02-tools/tools-list-sort/_tools-list-sort.scss
View on GitHub

@function bolt-map-sort

Sort map by keys

Code

@function bolt-map-sort($map) { $keys: bolt-list-sort(map-keys($map)); $sortedMap: (); @each $key in $keys { $sortedMap: map-merge($sortedMap, ($key: map-get($map, $key))); } @return $sortedMap; }

Params

Name	Type	Description	Default
$map	`map`	A SASS map	(None)

Example SCSS: ($map not shown)

$map: bolt-map-sort($map);

Returns

Map – $sortedMap - A SASS map sorted by keys

Source

_tools-map-sort.scss:18

02-tools/tools-map-sort/_tools-map-sort.scss
View on GitHub

Author

Mike Mai

@mixin bolt-no-select

Provides a bolt method for controlling the user's ability to select text.

Code

@mixin bolt-no-select() { user-select: none; }

Example: SCSS

.element { @include bolt-no-select; }

Source

_tools-no-select.scss:15

02-tools/tools-no-select/_tools-no-select.scss
View on GitHub

Author

Salem Ghoweri

@mixin bolt-opacity

Bolt Opacity mixin

Code

@mixin bolt-opacity($value, $important: false) { $important: ''; @if $utility { $important: '!important'; } @if map-has-key($bolt-opacities, $value) { opacity: map-get($bolt-opacities, $value) #{$important}; } @else { @error 'A value, #{$value}, was passed into @include bolt-opacity() that is not defined in $bolt-opacities'; } }

Params

Name	Type	Description	Default
$value	`string`		(None)
$important	`boolean`		`false`

Example SCSS: bolt-opacity mixin

.element { @include bolt-opacity(80); }

Throws

A value, #{$value}, was passed into @include bolt-opacity() that is not defined in $bolt-opacities

Source

_tools-opacity.scss:16

02-tools/tools-opacity/_tools-opacity.scss
View on GitHub

@function bolt-opacity

Bolt Opacity function

Code

@function bolt-opacity($value) { @if map-has-key($bolt-opacities, $value) { @return map-get($bolt-opacities, $value) } @else { @error 'A value, #{$value}, was passed into bolt-opacity() that is not defined in $bolt-opacities'; } }

Params

Name	Type	Description	Default
$value	`string`		(None)

Example SCSS: bolt-opacity function

.element { opacity: bolt-opacity(80); }

Throws

A value, #{$value}, was passed into bolt-opacity() that is not defined in $bolt-opacities

Source

_tools-opacity.scss:36

02-tools/tools-opacity/_tools-opacity.scss
View on GitHub

@function bolt-rem

Bolt utility function to convert pixels to rems

Code

@function bolt-rem($pixels, $context: $bolt-base-font-size--min) { @if (unitless($pixels)) { $pixels: $pixels * 1px; } @if (unitless($context)) { $context: $context * 1px; } @return $pixels / $context * 1rem; }

Params

Name	Type	Description	Default
$pixels	`string\|number`	The pixel value to convert	(None)
$context	`string\|number`	Value to divide pixel value by (before rem multiplication)	`$bolt-base-font-size--min`

Example: SCSS

.element { font-size: bolt-rem(18px); }

Returns

string – rem value (with unit)

Source

_tools-px-to-rem.scss:18

02-tools/tools-px-to-rem/_tools-px-to-rem.scss
View on GitHub

Author

Mike Mai

@mixin bolt-repeat-rule

Repeat a block of styles as a separate rule-set for each selector provided. Does not combine multiple selectors with commas. Most often used with selectors like `:host` which do not work properly when combined with other selectors.

Code

@mixin bolt-repeat-rule($selectors) { @each $selector in $selectors { #{$selector} { @content; } } }

Params

Name	Type	Description	Default
$selectors	`list`	A SASS list of selectors	(None)

Example: SCSS

@include repeat-rule(('bolt-link', ':host')) { display: inline; }

Source

_tools-repeat-rule.scss:17

02-tools/tools-repeat-rule/_tools-repeat-rule.scss
View on GitHub

Author

Dan Morse

@function bolt-strip-unit

Remove the unit of a length.

Code

@function bolt-strip-unit($number) { @if type-of($number) == 'number' and not unitless($number) { @return $number / ($number * 0 + 1); } @return $number; }

Params

Name	Type	Description	Default
$number	`Number`	Number to remove unit from	(None)

Example: SCSS

$bolt-floating-label-text-scale: bolt-strip-unit($bolt-font-size--xsmall);

Returns

Number – Unitless number

Source

_tools-strip-unit.scss:17

02-tools/tools-strip-unit/_tools-strip-unit.scss
View on GitHub

Author

Mike Mai

@mixin bolt-visuallyhidden

Provides a bolt method for correctly hiding an element visually (for accessibility)

Code

@mixin bolt-visuallyhidden($important: null) { @if $important == important { $important: !important; } position: absolute $important; width: 1px $important; height: 1px $important; overflow: hidden $important; margin: -1px $important; padding: 0 $important; border: 0 $important; clip: rect(0 0 0 0) $important; clip-path: inset(50%) $important; white-space: nowrap $important; }

Params

Name	Type	Description	Default
$important	`string`	If 'important' is set, than '!important' will be returned	`null`

Example: SCSS

.element { @include bolt-visuallyhidden(important); }

Source

_tools-visuallyhidden.scss:16

02-tools/tools-visuallyhidden/_tools-visuallyhidden.scss
View on GitHub

Author

Salem Ghoweri

Undefined

@function bolt-css-vars-assign

Assigns a variable to the global map

Code

@function bolt-css-vars-assign() { // CHECK PARAMS @if ($name==null) { @error "Variable name is expected, instead got: null"; } @if ($value == null) { @error "Variable value is expected, instead got: null"; } // assign to the global map @if ($bolt-css-vars-debug-log and map-get($bolt-css-variables, $name)) { @debug "'#{$name}' variable is reassigned"; } @return map-merge($bolt-css-variables, ($name: $value)); }

Throws

Variable name is expected, instead got: null
Variable value is expected, instead got: null

Source

_tools-css-vars.scss:18

02-tools/tools-css-vars/_tools-css-vars.scss
View on GitHub

@function bolt-var

Emulates var() CSS native function behavior

Code

@function bolt-var($args, $args2) { $var: ''; $opacity: 1; @if (length($args) >= 1) { $var: nth($args, 1); } @if type-of($var) == list { $opacity: nth($var, 2); } $varName: str-slice(nth($var, 1), 8, str-length(nth($var, 1))); @if str-slice($varName, 0, 5) == 'theme' { $varNameSansTheme: str-slice($varName, 7, str-length($varName)); @if bolt-is-theme-var($varNameSansTheme) and bolt-is-shimmable-theme-prop($varNameSansTheme) { @return bolt-theme($varNameSansTheme, $opacity); } @else { // @warn "The `#{$varNameSansTheme}` theme-specific CSS variable used isn't a registered theme variable in Bolt. Be carefull as these will not work as expected in IE 11..."; } } @else { // @warn $varName + ' CSS variable was used but not registered as a Globally variable in Bolt. Be carefull as these will not work as expected in IE 11...'; } @return var($args); }

Params

Name	Type	Description	Default
$args	`String`	Variable name	(None)
$args2	`string`	Optional default value if variable is not assigned yet	(None)

Example SCSS: basic usage

color: var(--main-color); background: var(--main-bg, green);

Source

_tools-css-vars.scss:40

02-tools/tools-css-vars/_tools-css-vars.scss
View on GitHub

@mixin bolt-css-vars

CSS mixin to provide variables

Code

@mixin bolt-css-vars($varMap: null, $root: false) { // CHECK PARAMS @if ($varMap == null) { @error "Map of variables is expected, instead got: null"; } @if (type_of($varMap) != map) { @error "Map of variables is expected, instead got another type passed: #{type_of($varMap)}"; } // PROCESS @if ($bolt-css-vars-debug-log or not $bolt-css-vars-use-native) { // Sass or debug // merge variables and values to the global map (provides no output) @each $name, $value in $varMap { $bolt-css-vars: bolt-css-vars-assign($name, $value) !global; // store in global variable } } @if ($bolt-css-vars-use-native) { // CSS variables // Native CSS: assign CSS custom properties to the global scope @if $root == true { @at-root :root { @each $name, $value in $varMap { @if (type_of($value) == string) { #{$name}: $value // to prevent quotes interpolation } @else { #{$name}: #{$value} } } } } @else { @each $name, $value in $varMap { @if (type_of($value) == string) { #{$name}: $value // to prevent quotes interpolation } @else { #{$name}: #{$value} } } } } }

Params

Name	Type	Description	Default
$varMap	`Map`	Check for our params	`null`
$root	`Boolean`	Output as root?	`false`

Example SCSS: "basic usage"

@include bolt-css-vars(( --color: rebeccapurple, --height: 68px, --margin-top: calc(2vh + 20px) ));

Throws

Map of variables is expected, instead got: null
Map of variables is expected, instead got another type passed: #{type_of($varMap)}

Source

_tools-css-vars.scss:127

02-tools/tools-css-vars/_tools-css-vars.scss
View on GitHub

@function bolt-json-encode

Delay the encoding of ta literal to JSON to a type-specific method

Code

@function bolt-json-encode($value) { $type: type-of($value); @if function-exists('_json-encode--#{$type}') { @return call(get-function('_json-encode--#{$type}'), $value); } @error 'Unknown type for #{$value} (#{$type}).'; }

Params

Name	Type	Description	Default
$value	`*`	value to be stringified	(None)

Returns

String – JSON encoded string

Throws

Unknown type for #{$value} (#{$type}).

Source

_json.scss:15

02-tools/tools-sass-json-export/encode/api/_json.scss
View on GitHub

@function _proof-quote

Proof quote a value

Code

@function _proof-quote($value) { // $value: to-string($value); @return '"#{$value}"'; }

Params

Name	Type	Description	Default
$value	`*`	value to be quoted	(None)

Returns

String – quoted value

Source

_quote.scss:8

02-tools/tools-sass-json-export/encode/helpers/_quote.scss
View on GitHub

@mixin bolt-json-encode

JSON.stringify a value and pass it as a font-family of head element

Code

@mixin bolt-json-encode($value, $flag) { $flag: if(index('all' 'regular' 'media' 'comment', $flag), $flag, 'all'); $json: bolt-json-encode($value); // Persistent comment @if $flag == 'comment' or $flag == 'all' { /*! json-encode: #{$json} */ } // Regular property value pair @if $flag == 'regular' or $flag == 'all' { // All browsers except IE8- body { &::before { // This element must be in the render tree to get it via getComputedStyle(document.body, ':before'); content: bolt-json-encode($value); display: block; width: 0; height: 0; overflow: hidden; } } // All browsers except Opera (Presto based) head { font-family: bolt-json-encode($value); } } // Falsy media query @if $flag == 'media' or $flag == 'all' { @media -json-encode { json { json: $json; } } } }

Params

Name	Type	Description	Default
$value	`*`	value to be stringified	(None)
$flag	`String`	(all) - output driver	(None)

Source

_json.scss:8

02-tools/tools-sass-json-export/encode/mixins/_json.scss
View on GitHub

@function _json-encode--bool

Encode a bool to JSON

Code

@function _json-encode--bool($bool) { @return $boolean; }

Params

Name	Type	Description	Default
$bool	`Bool`	bool to be encoded	(None)

Returns

Bool – encoded bool

Source

_bool.scss:7

02-tools/tools-sass-json-export/encode/types/_bool.scss
View on GitHub

@function _json-encode--color

Encode a color to JSON

Code

@function _json-encode--color($color) { @return _proof-quote($color); }

Params

Name	Type	Description	Default
$color	`Color`	color to be encoded	(None)

Returns

String – encoded color

Source

_color.scss:8

02-tools/tools-sass-json-export/encode/types/_color.scss
View on GitHub

@function _json-encode--list

Encode a list to JSON

Code

@function _json-encode--list($list) { $str: ''; @each $item in $list { $str: $str + ', ' + bolt-json-encode($item); } @return '[' + str-slice($str, 3) + ']'; }

Params

Name	Type	Description	Default
$list	`List`	list to be encoded	(None)

Returns

String – encoded list

Source

_list.scss:8

02-tools/tools-sass-json-export/encode/types/_list.scss
View on GitHub

@function _json-encode--map

Encode a map to JSON

Code

@function _json-encode--map($map) { $str: ''; @each $key, $value in $map { $str: $str + ', ' + _proof-quote($key) + ': ' + bolt-json-encode($value); } @return '{' + str-slice($str, 3) + '}'; }

Params

Name	Type	Description	Default
$map	`Map`	map to be encoded	(None)

Returns

String – encoded map

Source

_map.scss:9

02-tools/tools-sass-json-export/encode/types/_map.scss
View on GitHub

@function _json-encode--null

Encode `null` to JSON

Code

@function _json-encode--null($null) { @return 'null'; }

Params

Name	Type	Description	Default
$null	`Null`	`null`	(None)

Returns

String

Source

_null.scss:7

02-tools/tools-sass-json-export/encode/types/_null.scss
View on GitHub

@function _json-encode--number

Encode a number to JSON

Code

@function _json-encode--number($number) { @return if(unitless($number), $number, _proof-quote($number)); }

Params

Name	Type	Description	Default
$number	`Number`	number to be encoded	(None)

Returns

String – encoded number

Source

_number.scss:8

02-tools/tools-sass-json-export/encode/types/_number.scss
View on GitHub

@function _json-encode--string

Encode a string to JSON

Code

@function _json-encode--string($string) { @return _proof-quote($string); }

Params

Name	Type	Description	Default
$string	`String`	string to be encoded	(None)

Returns

String – encoded string

Source

_string.scss:8

02-tools/tools-sass-json-export/encode/types/_string.scss
View on GitHub

- $bolt-border-radius-values
  $bolt-breakpoints
  $mq-breakpoints
  $bolt-color-default
  $bolt-brand-colors
  $bolt-status-colors
  $bolt-social-colors
  $bolt-colors
  $bolt-base-font-size--min
  $bolt-base-font-size--max
  $bolt-fonts--subset-loaded-class
  $bolt-fonts--loaded-class
  $bolt-shadow-color
  $bolt-shadow--small
  $bolt-shadow--medium
  $bolt-shadow--large
  $bolt-border-width
  $bolt-border-style
  $bolt-border-color
  $bolt-border-radius
  $bolt-transition
  $bolt-transition-ease
  $bolt-transition-timing
  $bolt-translate-none
  $bolt-translate-raised--small
  $bolt-translate-raised--medium
  $bolt-translate-raised--large
  $bolt-global-link-hover-opacity
  $bolt-global-link-active-opacity
  $bolt-global-border-opacity
  $bolt-global-border-color
  $bolt-global-button-hover-mix
  $bolt-global-button-hover-color
  $bolt-global-button-active-mix
  $bolt-global-button-active-color
  $bolt-block-elements-list
  $bolt-all-block-elements
  $bolt-heading-elements-list
  $bolt-all-heading-elements
  $_bolt-custom-block-elements
  $_bolt-custom-inline-elements
  $_bolt-custom-inline-block-elements
  $bolt-all-custom-block-elements
  $bolt-all-custom-inline-block-elements
  $bolt-all-custom-inline-elements
  @mixin bolt-register-element
  $bolt-z-indexes
  $bolt-spacing-gutter
  $bolt-spacing-leading
  $bolt-spacing-squished
  $bolt-spacing-stretched
  $bolt-spacing-values
  $bolt-spacing-properties
  $bolt-spacing-directions
  $bolt-spacing-types
  $bolt-opacities
  @function bolt-get-shadows-map
  $bolt-shadows
  $bolt-font-family--japanese
  $bolt-font-family--sans-fallback
  $bolt-font-family--serif
  $bolt-font-family--mono-fallback
  $bolt-font-family--sans
  $bolt-font-family--sans-subset
  $bolt-font-family--mono
  $bolt-font-families
  $bolt-font-size--small-bp
  $bolt-font-size--medium-bp
  $bolt-font-size--xxxlarge--max
  $bolt-font-size--xxxlarge--min
  $bolt-font-size--xxlarge
  $bolt-font-size--xlarge
  $bolt-font-size--large
  $bolt-font-size--medium
  $bolt-font-size--small
  $bolt-font-size--xsmall
  $bolt-line-height--xxxlarge
  $bolt-line-height--xxlarge
  $bolt-line-height--xlarge
  $bolt-line-height--large
  $bolt-line-height--medium
  $bolt-line-height--small
  $bolt-line-height--xsmall
  $bolt-line-height--tight
  $bolt-font-sizes
  $bolt-font-weight--regular
  $bolt-font-weight--semibold
  $bolt-font-weight--bold
  $bolt-font-weights
  @function bolt-border-radius
  @mixin bolt-border-radius
  @function bolt-breakpoint
  @mixin bolt-mq
  @mixin bolt-poly-fluid-sizing
  @mixin bolt-button-reset
  @mixin bolt-button-color
  @function bolt-color
  @mixin bolt-color
  @mixin bolt-full-bleed
  @mixin bolt-vertical-scroll
  @mixin bolt-horizontal-scroll
  @function _bolt-create-spacing-map
  $bolt-spacing-sizes
  @function bolt-spacing
  @function bolt-v-spacing
  @function bolt-vertical-spacing
  @function _bolt-collapse-directional-values
  @function _bolt-contains-falsy
  @mixin _bolt-directional-property
  @mixin bolt-z-index
  @function bolt-z-index
  @mixin bolt-shadow
  @function _bolt-str-replace
  @mixin bolt-font-face
  @mixin bolt-font-family
  @mixin bolt-font-kerning
  @mixin bolt-font-size
  @mixin bolt-font-weight
  @function bolt-text-contrast
  @mixin bolt-uppercase
  @mixin bolt-if-browser-supports-display-contents
  @mixin bolt-clearfix
  @mixin bolt-ie11-only
  @function bolt-linear-interpolation
  @function bolt-list-remove
  @function bolt-list-sort
  @function bolt-map-sort
  @mixin bolt-no-select
  @mixin bolt-opacity
  @function bolt-opacity
  @function bolt-rem
  @mixin bolt-repeat-rule
  @function bolt-strip-unit
  @mixin bolt-visuallyhidden
  @function bolt-css-vars-assign
  @function bolt-var
  @mixin bolt-css-vars
  @function bolt-json-encode
  @function _proof-quote
  @mixin bolt-json-encode
  @function _json-encode--bool
  @function _json-encode--color
  @function _json-encode--list
  @function _json-encode--map
  @function _json-encode--null
  @function _json-encode--number
  @function _json-encode--string

Sass Docs

Settings: border

$bolt-border-radius-values [map]

Code

Source

Author

Settings: breakpoints

$bolt-breakpoints [map]

Code

Source

Author

$mq-breakpoints

Code

Source

Author

Settings: colors

$bolt-color-default

Code

Source

$bolt-brand-colors [map]

Code

Source

$bolt-status-colors [map]

Code

Source

$bolt-social-colors [map]

Code

Source

$bolt-colors [map]

Code

Source

Settings: global

$bolt-base-font-size--min

Code

Source

Author

$bolt-base-font-size--max

Code

Source

Author

$bolt-fonts--subset-loaded-class

Code

Source

Author

$bolt-fonts--loaded-class

Code

Source

Author

$bolt-shadow-color

Code

Source

Author

$bolt-shadow--small

Code

Source

Author

$bolt-shadow--medium

Code

Source

Author

$bolt-shadow--large

Code

Source

Author

$bolt-border-width

Code

Source

Author

$bolt-border-style

Code

Source

Author

$bolt-border-color

Code

Source

Author

$bolt-border-radius

Code

Source

Author