These are the docs for the latest stable release of the Bolt Design System. Looking for the upcoming release, v2.4.0-beta.0?

Sass Docs

Major breakpoints used globally in Bolt.
  $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
A duplicate of $bolt-breakpoints - used within mq()
  $mq-breakpoints: $bolt-breakpoints;

Source

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

Author

Salem Ghoweri
Bolt default color var.
  $bolt-color-default: 'base';

Source

_settings-colors.scss:11 01-settings/settings-colors/_settings-colors.scss
View on GitHub
Bolt Brand Colors - merged into $bolt-colors map
  $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 - merged into $bolt-colors map
  $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
All Bolt Colors - used within bolt-color @mixin and @function
  $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
Global Default Min Base Font Size
  $bolt-base-font-size--min: 15px;

Source

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

Author

Mike Mai
Global Default Max Base Font Size
  $bolt-base-font-size--max: 18px;

Source

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

Author

Mike Mai
Async Default font subset loaded class.
  $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
Async Default font loaded class.
  $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: bolt-color(black);

Source

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

Author

Mike Mai
Bolt small shadow
  $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 medium shadow
  $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 large shadow
  $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: 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: 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: 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: 3px;

Source

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

Author

Mike Mai
Bolt transition
  $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: 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: 200ms;

Source

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

Author

Mike Mai
Bolt translate none effect
  $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 effect
  $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 effect
  $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 effect
  $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 default global link hover opacity
  $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 default global link active opacity
  $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 default global border opacity
  $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 default global border color
  $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 default global button hover mix %
  $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 default global button hover color
  $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 default global button active mix %
  $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 default global button active color
  $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's definition of block level elements.
  $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's definition of all unquoted block level elements.
  $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's definition of heading elements.
  $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's definition of all unquoted heading elements.
  $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
Quoted custom block elements used to globally collect group generic styles. Elements registered via @mixin bolt-register-element.
  $_bolt-custom-block-elements: ();

Source

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

Author

Mike Mai
Quoted custom inline elements used to globally collect group generic styles. Elements registered via @mixin bolt-register-element.
  $_bolt-custom-inline-elements: ();

Source

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

Author

Mike Mai
Quoted custom inline-block elements used to globally collect group generic styles. Elements registered via @mixin bolt-register-element.
  $_bolt-custom-inline-block-elements: ();

Source

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

Author

Mike Mai
All (unquoted) custom block elements used to globally collect group generic styles
  $bolt-all-custom-block-elements: ();

Source

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

Author

Mike Mai
All (unquoted) custom inline-block elements used to globally collect group generic styles
  $bolt-all-custom-inline-block-elements: ();

Source

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

Author

Mike Mai
All (unquoted) custom inline elements used to globally collect group generic styles
  $bolt-all-custom-inline-elements: ();

Source

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

Author

Mike Mai
Register Element helper mixin: registers any custom elements getting included (used outside selector or declaration)
  @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;
  }
}
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)
  @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
Z-Index Settings
  $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 gutter spacing value
  $bolt-spacing-gutter: 2rem;

Source

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

Author

Mike Mai
Bolt default leading spacing value
  $bolt-spacing-leading: 1.65;

Source

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

Author

Mike Mai
Bolt squished spacing value
  $bolt-spacing-squished: 0.5;

Source

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

Author

Mike Mai
Bolt stretched spacing value
  $bolt-spacing-stretched: 1.5;

Source

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

Author

Mike Mai
Bolt's definition of spacing scale. Used within 'export-data()' to JSON.
  $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's definition of available spacing properties.
  $bolt-spacing-properties: ('padding', 'margin');

Source

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

Author

Mike Mai
Bolt's definition of spacing directions.
  $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's definition of spacing types.
  $bolt-spacing-types: ('', 'squished', 'stretched');

Source

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

Author

Mike Mai
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.
  $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
Helper function to return $bolt-shadows map
  @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)}'
      )
    )
  );
  @return $bolt-shadows;
}
Name Type Description Default
$base-color color The base shadow color (with the 'transparentize' filter applied) rgb(6, 10, 36)
  $shadows: map-get(bolt-get-shadows-map(), 'sets');

Returns

mapReturns 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
Variable containing default $bolt-shadows map - utility class and sets. Used within 'export-data()' to JSON.
  $bolt-shadows: bolt-get-shadows-map();

Source

_settings-shadow.scss:58 01-settings/settings-shadow/_settings-shadow.scss
View on GitHub
Bolt's definition of a Japanese specific font-stack.
  $bolt-font-family--japanese: -apple-system, BlinkMacSystemFont, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'MS ゴシック', 'MS Gothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;

Source

_settings.lang-ja.scss:13 01-settings/00-settings-lang/_settings.lang-ja.scss
View on GitHub
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.
  $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
Default serif font stack. Used within the $bolt-font-families map.
  $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
Default monospace fallback font stack. Used within the $bolt-font-families map.
  $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
Default sans-serif font stack. Used within the $bolt-font-families map.
  $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
Default sans-serif subset font stack. Used within the $bolt-font-families map.
  $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
Default monospace font stack. Used within the $bolt-font-families map.
  $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's definition of body, heading, and code text.
  $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
Small breakpoint font-size
  $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
Medium breakpoint font-size
  $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
Default XXX Large Max font-size. Used within $bolt-font-sizes map.
  $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
Default XXX Large Min font-size. Used within $bolt-font-sizes map.
  $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
Default XX Large font-size. Used within $bolt-font-sizes map.
  $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
Default X Large font-size. Used within $bolt-font-sizes map.
  $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
Default Large font-size. Used within $bolt-font-sizes map.
  $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
Medium font-size. Used within $bolt-font-sizes map.
  $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
Small font-size. Used within $bolt-font-sizes map.
  $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
X Small font-size. Used within $bolt-font-sizes map.
  $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
Default XXX Large line-height. Used within $bolt-font-sizes map.
  $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
Default XX Large line-height. Used within $bolt-font-sizes map.
  $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
Default X Large line-height. Used within $bolt-font-sizes map.
  $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
Default Large line-height. Used within $bolt-font-sizes map.
  $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
Default Medium line-height. Used within $bolt-font-sizes map.
  $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
Default Small line-height. Used within $bolt-font-sizes map.
  $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
Default X Small line-height. Used within $bolt-font-sizes map.
  $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
Default Tight line-height. Used within $bolt-font-sizes map.
  $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's definition of all options of possible text sizes.
  $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
Default regular font weight
  $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
Default semibold font weight
  $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
Default bold font weight
  $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's definition of all possible options of text weights.
  $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
This returns the breakpoint value (with px) from $bolt-breakpoints map
  @function bolt-breakpoint($name) { 
  @return map-get($bolt-breakpoints, $name);
}
Name Type Description Default
$name string The name of the breakpoint (from within $bolt-breakpoints) (None)
  .element {
  @media screen and (max-width: #{bolt-breakpoint(xsmall)}) {
    font-size: 24px;
  }
}

Returns

stringThe breakpoint value (with px)

Source

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

Author

Salem Ghoweri
Mike Mai
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)
  @mixin bolt-mq($args...) { 
  @include mq($args...) {
    @content;
  }
}
Name Type Description Default
$args... Bolt Media Query args ([breakpoint-name], $from, $until, $and, $media-type) (None)
  .element {
  @include bolt-mq(($until: small){
    flex-direction: column;
  }
}

Source

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

Author

Salem Ghoweri
Mike Mai
Generate linear interpolated size values through multiple break points
  @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));
  }
}
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)
  @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
Generate different background and border color button interaction states based on the primary color passed in
  @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%);
  // }
}
Name Type Description Default
$color color Used to generate button text, background, and border color (None)
  .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
Helper functions for applying global color swatches stored in Sass Maps
  @function bolt-color($color, $tone: $bolt-color-default) { 
  @return map-get-deep($bolt-colors, quote($color), $tone);
}
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|RGBThe mapped bolt color value

Source

_tools-color-palette.scss:13 02-tools/tools-color-palette/_tools-color-palette.scss
View on GitHub
Mixin to return color value
  @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;
}
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
  .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
Places an element full browser width
  @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;
}
  .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
Provides a bolt method for controlling vertical scroll (overflow)
  @mixin bolt-vertical-scroll() { 
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
  .element {
   @include bolt-vertical-scroll();
}

Source

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

Author

Salem Ghoweri
Provides a bolt method for controlling horizontal scroll (overflow)
  @mixin bolt-horizontal-scroll() { 
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
  .element {
   @include bolt-horizontal-scroll();
}

Source

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

Author

Salem Ghoweri
Private bolt function to generate default spacing scale, based off of the base font size
  @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;
}
Name Type Description Default
$sizes list Sizes to iterate over (None)
$char string String to append to $keyName setting ''
  $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
A map created from $bolt-spacing-values
  $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
Convenience function for pulling data from $bolt-spacing-sizes
  @function bolt-spacing($size) { 
  @return map-get($bolt-spacing-sizes, nth($size, 1));
}
Name Type Description Default
$size string T-shirt size to pull (None)
  .element {
  min-height: bolt-spacing(large);
}

Returns

numberA spacing unit

Source

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

Author

Salem Ghoweri
Convert shirt sizes in baseline-optimized sizes
  @function bolt-v-spacing($size, $modifier: null) { 
  @if ($modifier == 'squished') {
    $modifier: $bolt-spacing-squished;
  } @elseif ($modifier == 'stretched') {
    $modifier: $bolt-spacing-stretched;
  } @else {
    $modifier: 1;
  }

  @return (bolt-spacing($size) / bolt-strip-unit($bolt-spacing-gutter)) * $bolt-spacing-leading * $modifier;
}
Name Type Description Default
$size string T-shirt size (None)
$modifier string Unit to multiply ending result by null
  .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
An alias for @function bolt-v-spacing
  @function bolt-vertical-spacing($size) { 
  @return bolt-v-spacing($size);
}
Name Type Description Default
$size string T-shirt size (None)
  .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
Directional-property mixins are shorthands for writing properties like the following
  @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;
}
Name Type Description Default
$vals List List of directional values (None)
  .element {
  @include border-style(dotted null);
  @include margin(null 0 10px);
}
  .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
Checks if a list does not contain any values.
  @function _bolt-contains-falsy($list) { 
  @each $item in $list {
    @if not $item {
      @return true;
    }
  }

  @return false;
}
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
Output directional properties, for instance `margin`.
  @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;
  }
}
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
Bolt Z Index mixin
  @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';
  }
}
Name Type Description Default
$key string "content"
$utility boolean false
  .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
Bolt Z Index function
  @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';
  }
}
Name Type Description Default
$key string (None)
  .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
This outputs the correct bolt values for transform and box-shadow
  @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};
    }
  }
}
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
  .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
A private utility function for carrying out string replacement
  @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;
}
Name Type Description Default
$string string The "needle" (None)
$search string The "haystack" (None)
$replace string The string value to replace ''
  $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
Adds a correctly formatted @font-face declaration. Set at the top of the stylesheet.
  @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;
  }
}
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
  @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
This returns the font-family for a specific element. Brand fonts are the default, with system fonts as the fallback.
  @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;
    }
  }
}
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
  .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
This applies default font kerning styles for supporting browsers.
  @mixin bolt-font-kerning() { 
  font-feature-settings: 'kern';
  font-kerning: normal; // Safari 7+, Firefox 24+, Chrome 33(?)
}
  *,
*: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
This returns the font-size and relevant line-height for a specific element.
  @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;
    } @elseif (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;
    }
  }
}
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
  .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
This returns the font-weight for a specific element.
  @mixin bolt-font-weight($weight) { 
  $font-weight: map-get-deep($bolt-font-weights, 'font-weights', $weight);

  font-weight: $font-weight;
}
Name Type Description Default
$weight string Defines the weight of the text: bold, semi-bold, regular, or normal. (None)
  .element {
   @include bolt-font-weight(bold);
}
  .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
Determines the correct color (black or white) to return, given the color passed in
  @function bolt-text-contrast($color) { 
  @if bolt-theme-tone($color) == "dark" {
    @return bolt-color(white);
  } @else {
    @return bolt-color(black);
  }
}
Name Type Description Default
$color color The color to check against (None)
  .element:hover {
  color: bolt-text-contrast($primary-background-default);
}

Returns

colorEither 'black' or 'white'

Source

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

Author

Salem Ghoweri
Provides a bolt method for transforming text to uppercase
  @mixin bolt-uppercase() { 
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
  .element {
   @include bolt-uppercase();
}

Source

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

Author

Salem Ghoweri
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.
  @mixin bolt-if-browser-supports-display-contents() { 
  @supports (display: contents) and (caret-color: red) {
    @content;
  }
}
  .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
Provides the ability to add a proper clearfix
  @mixin bolt-clearfix($important: null) { 
  @if $important == important {
    $important: !important;
  }

  &:before,
  &:after {
    content: ' ' $important;
    display: table $important;
  }

  &:after {
    clear: both $important;
  }
}
Name Type Description Default
$important boolean Set true to add "!important" null
  .element {
  @include bolt-clearfix();
}

Source

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

Author

Salem Ghoweri
Calculate the definition of a line between two points
  @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});
}
Name Type Description Default
$map map A SASS map of viewport widths and size value pairs (None)
  font-size: bolt-linear-interpolation((320px: 18px, 768px: 26px));

Returns

NumberA 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
Removed an item for a SASS list based on it's index (mimics behavior of the native map-remove function)
  @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;
}
Name Type Description Default
$list list A SASS list (None)
$index string The list index to remove (None)
  $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
Sort a SASS list
  @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;
}
Name Type Description Default
$list list A SASS list (None)
  $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
Sort map by keys
  @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;
}
Name Type Description Default
$map map A SASS map (None)
  $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
Provides a bolt method for controlling the user's ability to select text.
  @mixin bolt-no-select() { 
  user-select: none;
}
  .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
Bolt Opacity mixin
  @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';
  }
}
Name Type Description Default
$value string (None)
$important boolean false
  .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
Bolt Opacity function
  @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';
  }
}
Name Type Description Default
$value string (None)
  .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
Bolt utility function to convert pixels to rems
  @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;
}
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
  .element {
  font-size: bolt-rem(18px);
}

Returns

stringrem 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
Remove the unit of a length.
  @function bolt-strip-unit($number) { 
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}
Name Type Description Default
$number Number Number to remove unit from (None)
  $bolt-floating-label-text-scale: bolt-strip-unit($bolt-font-size--xsmall);

Returns

NumberUnitless number

Source

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

Author

Mike Mai
Provides a bolt method for correctly hiding an element visually (for accessibility)
  @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;
}
Name Type Description Default
$important string If 'important' is set, than '!important' will be returned null
  .element {
   @include bolt-visuallyhidden(important);
}

Source

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

Author

Salem Ghoweri
Assigns a variable to the global map
  @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
Emulates var() CSS native function behavior
  @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);
}
Name Type Description Default
$args String Variable name (None)
$args2 string Optional default value if variable is not assigned yet (None)
  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
CSS mixin to provide variables
  @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}
        }
      }
    }
  }
}
Name Type Description Default
$varMap Map Check for our params null
$root Boolean Output as root? false
   @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
Delay the encoding of ta literal to JSON to a type-specific method
  @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}).';
}
Name Type Description Default
$value * value to be stringified (None)

Returns

StringJSON 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
Proof quote a value
  @function _proof-quote($value) { 
  // $value: to-string($value);
  @return '"#{$value}"';
}
Name Type Description Default
$value * value to be quoted (None)

Returns

Stringquoted value

Source

_quote.scss:8 02-tools/tools-sass-json-export/encode/helpers/_quote.scss
View on GitHub
JSON.stringify a value and pass it as a font-family of head element
  @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;
      }
    }
  }
}
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
Encode a bool to JSON
  @function _json-encode--bool($bool) { 
  @return $boolean;
}
Name Type Description Default
$bool Bool bool to be encoded (None)

Returns

Boolencoded bool

Source

_bool.scss:7 02-tools/tools-sass-json-export/encode/types/_bool.scss
View on GitHub
Encode a color to JSON
  @function _json-encode--color($color) { 
  @return _proof-quote($color);
}
Name Type Description Default
$color Color color to be encoded (None)

Returns

Stringencoded color

Source

_color.scss:8 02-tools/tools-sass-json-export/encode/types/_color.scss
View on GitHub
Encode a list to JSON
  @function _json-encode--list($list) { 
  $str: '';

  @each $item in $list {
    $str: $str + ', ' + bolt-json-encode($item);
  }

  @return '[' + str-slice($str, 3) + ']';
}
Name Type Description Default
$list List list to be encoded (None)

Returns

Stringencoded list

Source

_list.scss:8 02-tools/tools-sass-json-export/encode/types/_list.scss
View on GitHub
Encode a map to JSON
  @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) + '}';
}
Name Type Description Default
$map Map map to be encoded (None)

Returns

Stringencoded map

Source

_map.scss:9 02-tools/tools-sass-json-export/encode/types/_map.scss
View on GitHub
Encode `null` to JSON
  @function _json-encode--null($null) { 
  @return 'null';
}
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
Encode a number to JSON
  @function _json-encode--number($number) { 
  @return if(unitless($number), $number, _proof-quote($number));
}
Name Type Description Default
$number Number number to be encoded (None)

Returns

Stringencoded number

Source

_number.scss:8 02-tools/tools-sass-json-export/encode/types/_number.scss
View on GitHub
Encode a string to JSON
  @function _json-encode--string($string) { 
  @return _proof-quote($string);
}
Name Type Description Default
$string String string to be encoded (None)

Returns

Stringencoded string

Source

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