accordions

csss

.bc-accordions

.bc-accordions { ... }

Description

Accordion list container.

Should ideally be a <ul> or <ol>. Nest accordions inside the list items.

.bc-accordion

.bc-accordion { ... }

Description

Accordion container styles.

Intended to be chained wiht .bc-panel.

.bc-accordion--open

.bc-accordion--open { ... }

Description

Open accordion variant.

Adds visual changes to indicate the accordion is currently open.

.bc-accordion__title

.bc-accordion__title { ... }

Description

The title of the accordion.

This element is an anchor; it toggles the accordion’s contents.

.bc-accordion__main

.bc-accordion__main { ... }

Description

The accordion main content.

This block is hidden by default through aria-expanded and aria-hidden. It is toggled open by toggling the accordion title element.

TODO: We can’t sadly add transition effects on height: auto, so we’ll have to do that in JS, hooking into the aria-hidden/expanded booleans.

badges

mixins

bc-badge-fill

@mixin bc-badge-fill($type-color) { ... }

Description

Mixin for generating (default) filled badge color styles.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type-color

The badge color.

Color none

Output

Correct badge background- and border-color.

Requires

bc-badge-unconfirmed

@mixin bc-badge-unconfirmed($type-color) { ... }

Description

Mixin for generating ‘unfilled’ (white bg) badge color styles.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type-color

The badge color.

Color none

Output

Correct badge background- & border-color.

Requires

bc-badge--dark

@mixin bc-badge--dark() { ... }

Description

Mixin for the inverted styles.

Parameters

None.

Output

Transparent bg with white borders and text.

Requires

bar-charts

csss

.bc-barcharts

.bc-barcharts { ... }

Description

Wrapper for a bar chart, or group of bar charts.

.bc-barcharts__caption

.bc-barcharts__caption { ... }

Description

Combined bar graph caption/title (<dt>).

Note: only use once per group of bar chart definition list/graphs.

.bc-barchart

.bc-barchart { ... }

Description

Shared bar properties (<dd>).

.bc-barchart__label

.bc-barchart__label { ... }

Description

Default bar label.

This is a nested element (eg, <span>) inside the barchart <dd>.

.bc-barcharts--xs

.bc-barcharts--xs { ... }

Description

Extra-small size variant.

.bc-barcharts--sm

.bc-barcharts--sm { ... }

Description

Small size variant.

.bc-barcharts--lg

.bc-barcharts--lg { ... }

Description

Large size variant.

.bc-barcharts--ruled

.bc-barcharts--ruled { ... }

Description

‘Ruled’ barcharts wrapper variant.

Applies vertical rules/lines at 10% intervals.

.bc-barcharts--severity

.bc-barcharts--severity { ... }

Description

[Priority] Severity bar graphs.

body

mixins

csss

.bc-body.bc-body--shade

.bc-body.bc-body--shade { ... }

Description

Light theme shade variant.

.bc-body.bc-body--shade-alt

.bc-body.bc-body--shade-alt { ... }

Description

Light theme (darkest) shade variant.

.bc-body.bc-body--dark

.bc-body.bc-body--dark { ... }

Description

Dark theme base class.

.bc-body.bc-body--dark-tint

.bc-body.bc-body--dark-tint { ... }

Description

Dark theme tint variant.

.bc-body.bc-body--dark-tint-alt

.bc-body.bc-body--dark-tint-alt { ... }

Description

Dark theme (lightest) tint variant.

.bc-body--markdown

.bc-body--markdown { ... }

Description

A Markdown-specific content container class variant.

Expected usage: reserved for styling user-provided Markdown content.

Note that this variant currently has not been ported to the new color setup and therefore does not have dark theme support.

.bc-body--interstitial

.bc-body--interstitial { ... }

Description

Body variant for interstitial pages.

Expected usage: Full-page user forms (e.g., sign up and log in pages).

buttons

mixins

bc-btn--icon

@mixin bc-btn--icon($icon-dimensionsKey: md, $placement: before, $text: visibleText) { ... }

Description

Button + icon mixin.

Include this mixin if you need to create custom buttons with custom icons.

Please use the .bc-btn--icon class that implements the defaults if you want a medium-sized icon, placed before the text, and want the text visible.

Please use the .bc-btn--icon--hidden-text class if you need a medium-sized icon, placed before the text, and wish to visually hide the button’s text.

If you need a custom icon use this mixin and pass it the arguments needed.

You then need create your own class within which you wish to add your icon as a background-image in either a &::before/&::after block, in alignment with the positioning argument you passed the mixin.

You can also choose to visually hide the button’s text. If you do this you’ll have to wrap the button text inside a <span>. Please also ensure that you give the button an aria-label corresponding to the button text.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$icon-dimensionsKey

anyone one of: sm, md, lg, or xl

Keywordsmd
$placement

icon placement, either: before or after

Keywordsbefore
$text

visually show the button text (must be wrapped inside a <span>), either visibleText or hiddenText

KeywordsvisibleText

Throws

  • ERROR: Oi mate, the bc-btn--icon mixin only takes the following icon dimension keywords: sm, md, lg, or xl.

  • ERROR: Oi mate, the bc-btn--icon mixin only takes the following icon placement keywords: before or after.

  • ERROR: Oi mate, the bc-btn--icon mixin only takes the following hide/show text keywords: visibleText or hiddenText.

csss

.bc-btn--attach::before

.bc-btn--attach::before { ... }

Description

Attach/upload button icon.

colors

variables

bc-bugOrange

$bc-bugOrange: #ff6900 !default;

Description

‘bugOrange’

Expected usage

TODO: guidance.

Type

Color

bc-horizon

$bc-horizon: #36b !default;

Description

‘horizon’

Expected usage

TODO: guidance.

Type

Color

bc-white

$bc-white: #fff !default;

Description

white

Expected usage

TODO: guidance.

Type

Color

Used by

bc-black

$bc-black: #000 !default;

Description

black

Expected usage

TODO: guidance.

Type

Color

bc-persianRed

$bc-persianRed: #d13535 !default;

Description

‘persianRed’

Expected usage

Used for P1.

Type

Color

bc-casablanca

$bc-casablanca: #f0ad4e !default;

Description

‘casablanca’

Expected usage

Used for P3.

Type

Color

bc-limeade

$bc-limeade: #5eae00 !default;

Description

‘limeade’

Expected usage

Used for P4.

Type

Color

bc-blueLagoon

$bc-blueLagoon: #0278b8 !default;

Description

‘blueLagoon’

Expected usage

Used for P5.

Type

Color

bc-sanMarino

$bc-sanMarino: #3f51b5 !default;

Description

‘sanMarino’

Expected usage

Used for Triaged state.

Type

Color

bc-carribeanGreen

$bc-carribeanGreen: #00bfa5 !default;

Description

‘carribeanGreen’

Expected usage

Used for Resolved state.

Type

Color

bc-deepSea

$bc-deepSea: #0f8063 !default;

Description

‘deepSea’

Expected usage

Used for Resolved state.

Type

Color

bc-purpleHeart

$bc-purpleHeart: #673ab7 !default;

Description

‘purpleHeart’

Expected usage

Used for Duplicate state.

Type

Color

bc-pomegranate

$bc-pomegranate: #f44a3d !default;

Description

‘pomegranate’

Expected usage

Used for out-of-scope and not-reproducible states.

Type

Color

bc-mineShaft

$bc-mineShaft: #333 !default;

Description

‘mineShaft’

Expected usage

TODO: guidance.

Type

Color

bc-smoke

$bc-smoke: #666 !default;

Description

‘smoke’

Expected usage

TODO: guidance.

Type

Color

bc-dustyGrey

$bc-dustyGrey: #999 !default;

Description

‘dustyGrey’

Expected usage

TODO: guidance.

Type

Color

bc-alabaster

$bc-alabaster: #fafafa !default;

Description

‘alabaster’

Expected usage

TODO: guidance.

Type

Color

bc-sandcastle

$bc-sandcastle: #fffbdc !default;

Description

‘sandcastle’

Expected usage

TODO: guidance.

Type

Color

bc-color-p0

$bc-color-p0: $bc-black !default;

Description

‘P0’

Expected usage

Used for P0/Emergency priority submissions.

Type

Color

bc-color-p1

$bc-color-p1: $bc-persianRed !default;

Description

‘P1’

Expected usage

Used for P1/Critical priority submissions.

Type

Color

bc-color-p2

$bc-color-p2: $bc-bugOrange !default;

Description

‘P2’

Expected usage

Used for P3/High priority submissions.

Type

Color

bc-color-p3

$bc-color-p3: $bc-casablanca !default;

Description

‘P3’

Expected usage

Used for P3/Medium priority submissions.

Type

Color

bc-color-p4

$bc-color-p4: $bc-limeade !default;

Description

‘P4’

Expected usage

Used for P4/Low priority submissions.

Type

Color

bc-color-p5

$bc-color-p5: $bc-blueLagoon !default;

Description

‘P5’

Expected usage

Used for P5/Informational priority submissions.

Type

Color

bc-color-p6

$bc-color-p6: #ad21f6 !default;

Description

‘P6’

Expected usage

Really?

Type

Color

bc-color-new

$bc-color-new: $bc-dustyGrey !default;

Description

‘New’

Expected usage

Used for New submissions.

Type

Color

bc-color-triaged

$bc-color-triaged: $bc-sanMarino !default;

Description

‘Triaged’

Expected usage

Used for Triaged submissions.

Type

Color

bc-color-resolved

$bc-color-resolved: $bc-deepSea !default;

Description

‘Resolved’

Expected usage

Used for Resolved submissions.

Type

Color

bc-color-unresolved

$bc-color-unresolved: $bc-carribeanGreen !default;

Description

‘Unresolved’

Expected usage

Used for Unresolved submissions.

Type

Color

bc-color-duplicate

$bc-color-duplicate: $bc-purpleHeart !default;

Description

‘Duplicate’

Expected usage

Used for Duplicate submissions.

Type

Color

bc-color-outofscope

$bc-color-outofscope: $bc-pomegranate !default;

Description

‘Out of scope’

Expected usage

Used for Out of scope submissions.

Type

Color

bc-color-notreproducible

$bc-color-notreproducible: $bc-pomegranate !default;

Description

‘Not reproducible’

Expected usage

Used for Not reproducible submissions.

Type

Color

bc-color-wontfix

$bc-color-wontfix: #ff9800 !default;

Description

‘Won’t fix’

Expected usage

Used for Won’t fix submissions. Same as ‘Not applicable’.

Type

Color

bc-color-notapplicable

$bc-color-notapplicable: #ff9800 !default;

Description

‘Not applicable’

Expected usage

Used for Not reproducible submissions. Same as ‘Won’t fix’.

Type

Color

bc-color-info

$bc-color-info: $bc-blueLagoon !default;

Description

Informational.

Expected usage

Used for informational dialogs, alerts, and messaging.

Type

Color

bc-color-success

$bc-color-success: $bc-limeade !default;

Description

Operation successful/live.

Expected usage

Used for successful operations or to indicate something is live.

Type

Color

bc-color-error

$bc-color-error: $bc-persianRed !default;

Description

Error.

Expected usage

Used to indicate an error or problem has occurred.

Type

Color

bc-color-warning

$bc-color-warning: darken($bc-casablanca, 12) !default;

Description

Warning.

Expected usage

Used to indicate warnings or caution.

Type

Color

bc-color-fg-text

$bc-color-fg-text: $bc-black !default;

Description

Light theme: Foreground - Text color.

Expected usage

Applied to general text set on the default background colors.

Type

Color

bc-color-fg-focus

$bc-color-fg-focus: bc-tint($bc-horizon, 60) !default;

Description

Light theme - Foreground: :focus color.

Expected usage

Applied to the bc-focus() mixin, and to currently focused (eg tabbed-to) elements.

@type color

Used by

bc-color-fg-border

$bc-color-fg-border: rgba(0, 0, 0, 0.125) !default;

Description

Light theme: Foreground - Border.

Expected usage

Applied as a color to common borders.

Type

Color

bc-color-bg

$bc-color-bg: $bc-white !default;

Description

Light theme - Background color (lightest shade).

Expected usage

The base (light theme) background color.

Type

Color

Used by

bc-color-bg-shade-alpha

$bc-color-bg-shade-alpha: rgba(0, 0, 0, 0.025) !default;

Description

Light theme: Background - Transparent shade.

Expected usage

Applied to elements that need always darker bgs than the page shade used.

Type

Color

Used by

See

bc-color-bg-shade-alt-alpha

$bc-color-bg-shade-alt-alpha: rgba(0, 0, 0, 0.05) !default;

Description

Dark theme: Background - Transparent shade, alternative.

Expected usage

Applied to elements that need always darker bgs than the page shade used.

Type

Color

See

bc-color-bg-selection

$bc-color-bg-selection: rgba(bc-tint($bc-horizon, 80), 0.99) !default;

Description

Type

Color

bc-color-bg-ui

$bc-color-bg-ui: $bc-color-bg !default;

Description

Light theme - Background: UI.

Expected usage

Applied to UI components so that they use the background color of the page.

Type

Color

bc-color-bg-ui-input-shadow

$bc-color-bg-ui-input-shadow: rgba(0, 0, 0, 0.05) !default;

Description

Light theme - Background: UI [internal] shadow.

Expected usage

Applied as an internal box-sahdow to UI components

Type

Color

bc-color-bg-shade

$bc-color-bg-shade: bc-color-a11y($bc-color-bg-shade-suggestion, $bc-color-fg-text) !default;

Description

Light theme: Background - Shade.

Expected usage

Darker default light theme background color.

Type

Color

bc-color-bg-alt

$bc-color-bg-alt: bc-color-a11y($bc-color-bg-alt-suggestion, $bc-color-fg-text) !default;

Description

Light theme: Background - Alternative [darker shade].

Expected usage

Darkest default light theme background color.

Type

Color

bc-color-fg-secondary

$bc-color-fg-secondary: bc-color-a11y($bc-color-fg-secondary-suggestion, $bc-color-bg-alt) !default;

Description

Light theme: Foreground - Secondary text color.

Expected usage

Applied to general text set on the default background colors.

Type

Color

Used by

bc-color-bg-ui--active

$bc-color-bg-ui--active: $bc-color-fg-link !default;

Description

Light theme: Background - Active UI.

Expected usage

Applied to primary UI components, or used for :active or :selected states, eg checked checkboxes.

Type

Color

bc-color-bg-ui--hover

$bc-color-bg-ui--hover: transparentize(bc-tint($bc-color-fg-link, 90), 0.5) !default;

Description

Light theme: Background - Hover UI.

Expected usage

Applied to :hover and :focus states on UI components, applying a light blue to the background color, using the link color as a base.

Type

Color

bc-color-bg-ui--selected

$bc-color-bg-ui--selected: transparentize(bc-tint($bc-color-fg-link, 90), 0.2) !default;

Description

Light theme: Background - Selected UI.

Expected usage

Applied to currenly active/selected states on UI components, applying a slightly darker light blue to the background color :hover.

Type

Color

bc-color-bg-ui--disabled

$bc-color-bg-ui--disabled: rgba(0, 0, 0, 0.05) !default;

Description

Light theme: Background - Disabled UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

Used by

bc-color-fg-ui--disabled

$bc-color-fg-ui--disabled: rgba(0, 0, 0, 0.45) !default;

Description

Light theme: Foreground - Disabled UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

Used by

bc-color-fg-ui-border--disabled

$bc-color-fg-ui-border--disabled: rgba(0, 0, 0, 0.075) !default;

Description

Light theme: Foreground - Disabled UI border.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

Used by

bc-color-bg-ui--readonly

$bc-color-bg-ui--readonly: rgba(0, 0, 0, 0.025) !default;

Description

Light theme: Background - Disabled Read-only UI.

Expected usage

Applied to :disabled --readonly variant UI components, greying them out slightly.

Type

Color

Used by

bc-color-fg-ui--readonly

$bc-color-fg-ui--readonly: inherit !default;

Description

Light theme: Foreground - Disabled Read-only UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-color-fg-ui-border--readonly

$bc-color-fg-ui-border--readonly: transparent !default;

Description

Light theme: Foreground - Disabled UI border.

Expected usage

Applied to :disabled --readonly variant UI components, greying them out slightly.

Type

Color

Used by

bc-color-fg-ui-text

$bc-color-fg-ui-text: bc-color-a11y($bc-color-fg-ui-text-suggestion, $bc-color-bg-alt) !default;

Description

Light theme: Foreground - UI text.

Expected usage

Applied to the text of UI components.

Type

Color

bc-color-fg-ui-text--disabled

$bc-color-fg-ui-text--disabled: rgba(0, 0, 0, 0.5) !default;

Description

Light theme: Foreground - Disabled UI text.

Expected usage

Applied to the :disabled text of UI components, greying them out slightly.

Type

Color

bc-color-fg-ui-text--readonly

$bc-color-fg-ui-text--readonly: rgba(0, 0, 0, 0.75) !default;

Description

Light theme: Foreground - Disabled Read-only UI text.

Expected usage

Applied to the :disabled --readonly variant text of UI components, greying them out slightly.

Type

Color

Used by

bc-color-fg-ui-icon

$bc-color-fg-ui-icon: bc-color-a11y($bc-color-fg-ui-icon-suggestion, $bc-color-bg-alt) !default;

Description

Light theme: Foreground - UI marks/graphics.

Expected usage

Applied to marks --- graphics/icons --- of UI components.

Type

Color

bc-color-fg-ui-border

$bc-color-fg-ui-border: rgba(0, 0, 0, 0.175) !default;

Description

Light theme: Foreground - UI border.

Expected usage

Applied to the borders of UI components.

Type

Color

bc-color-fg-ui-border--hover

$bc-color-fg-ui-border--hover: bc-shade($bc-color-fg-ui-border, 24) !default;

Description

Light theme: Foreground - UI border :hover.

Expected usage

Applied to when non-disabled UI components receive :hover.

Type

Color

bc-colordark-fg-text

$bc-colordark-fg-text: $bc-white !default;

Description

Dark theme: Foreground - Text color.

Expected usage

Applied to general text set on a colordark background color.

Type

Color

Used by

bc-colordark-fg-focus

$bc-colordark-fg-focus: bc-tint($bc-horizon, 60) !default;

Description

Dark theme: Foreground - :focus color.

Expected usage

Applied to the bc-focus() mixin, and to currently focused (eg tabbed-to) elements.

@type color

Used by

bc-colordark-fg-border

$bc-colordark-fg-border: rgba(255, 255, 255, 0.25) !default;

Description

Dark theme: Foreground - Border.

Expected usage

Applied as a color to common borders.

Type

Color

bc-colordark-bg

$bc-colordark-bg: #191919 !default;

Description

Dark theme: Background - color (lightest shade).

Expected usage

The base dark theme background color.

Type

Color

bc-colordark-bg-shade-alpha

$bc-colordark-bg-shade-alpha: rgba(0, 0, 0, 0.4) !default;

Description

Dark theme: Background - Transparent shade.

Expected usage

Applied to elements that need always darker bgs than the page shade used.

Type

Color

See

bc-colordark-bg-shade-alt-alpha

$bc-colordark-bg-shade-alt-alpha: rgba(0, 0, 0, 0.75) !default;

Description

Dark theme: Background - Transparent shade, alternative.

Expected usage

Applied to elements that need always darker bgs than the page shade used.

Type

Color

See

bc-colordark-bg-selection

$bc-colordark-bg-selection: rgba(bc-tint($bc-horizon, 80), 0.2) !default;

Description

Type

Color

bc-colordark-bg-ui

$bc-colordark-bg-ui: transparent !default;

Description

Dark theme: Background - UI.

Expected usage

Applied to UI components so that they use the background color of the page.

Type

Color

bc-colordark-bg-ui-input-shadow

$bc-colordark-bg-ui-input-shadow: rgba(0, 0, 0, 0.225) !default;

Description

Dark theme - Background: UI [internal] shadow.

Expected usage

Applied as an internal box-sahdow to UI components

Type

Color

bc-colordark-bg-tint

$bc-colordark-bg-tint: bc-color-a11y($bc-colordark-bg-tint-suggestion, $bc-colordark-fg-text) !default;

Description

Dark theme: Background - Shade.

Expected usage

Darker dark theme background color.

Type

Color

bc-colordark-bg-alt

$bc-colordark-bg-alt: bc-color-a11y($bc-colordark-bg-alt-suggestion, $bc-colordark-fg-text) !default;

Description

Dark theme: Background - Alternative [darker shade].

Expected usage

Darkest dark theme background color.

Type

Color

bc-colordark-fg-secondary

$bc-colordark-fg-secondary: bc-color-a11y($bc-colordark-fg-secondary-suggestion, $bc-colordark-bg) !default;

Description

Dark theme: Foreground - Secondary text color.

Expected usage

Applied to general text set on the dark theme’s background colors.

Type

Color

Used by

bc-colordark-bg-ui--active

$bc-colordark-bg-ui--active: $bc-colordark-fg-link !default;

Description

Dark theme: Background - Active UI.

Expected usage

Applied to primary UI components, or used for :active or :selected states, eg checked checkboxes.

Type

Color

bc-colordark-bg-ui--hover

$bc-colordark-bg-ui--hover: transparentize(bc-shade($bc-colordark-fg-link, 90), 0.5) !default;

Description

Dark theme: Background - Hover UI.

Expected usage

Applied to :hover and :focus states on UI components, darkens background color slightly, using the link color as a base.

Type

Color

bc-colordark-bg-ui--selected

$bc-colordark-bg-ui--selected: transparentize(bc-shade($bc-colordark-fg-link, 90), 0.2) !default;

Description

Dark theme: Background - Selected UI.

Expected usage

Applied to currenly active/selected states on UI components, darkens background color slightly more than on :hover.

Type

Color

bc-colordark-bg-ui--disabled

$bc-colordark-bg-ui--disabled: rgba(255, 255, 255, 0.05) !default;

Description

Dark theme: Background - Disabled UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

Used by

bc-colordark-fg-ui--disabled

$bc-colordark-fg-ui--disabled: rgba(255, 255, 255, 0.45) !default;

Description

Dark theme: Foreground - Disabled UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-colordark-fg-ui-text--disabled

$bc-colordark-fg-ui-text--disabled: rgba(255, 255, 255, 0.25) !default;

Description

Dark theme: Foreground - Disabled UI text.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

Used by

bc-colordark-fg-ui-text--readonly

$bc-colordark-fg-ui-text--readonly: rgba(255, 255, 255, 0.75) !default;

Description

Dark theme: Foreground - Disabled Read-only UI text.

Expected usage

Applied to the :disabled --readonly variant text of UI components, greying them out slightly.

Type

Color

Used by

bc-colordark-fg-ui-border--disabled

$bc-colordark-fg-ui-border--disabled: rgba(255, 255, 255, 0.075) !default;

Description

Dark theme: Foreground - Disabled UI border.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

Used by

bc-colordark-bg-ui--readonly

$bc-colordark-bg-ui--readonly: rgba(255, 255, 255, 0.025) !default;

Description

Dark theme: Background - Disabled Read-only UI.

Expected usage

Applied to :disabled --readonly variant UI components, greying them out slightly.

Type

Color

Used by

bc-colordark-fg-ui--readonly

$bc-colordark-fg-ui--readonly: inherit !default;

Description

Dark theme: Foreground - Disabled Read-only UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-colordark-fg-ui-border--readonly

$bc-colordark-fg-ui-border--readonly: transparent !default;

Description

Dark theme: Foreground - Disabled UI border.

Expected usage

Applied to :disabled --readonly variant UI components, greying them out slightly.

Type

Color

Used by

bc-colordark-fg-ui-text

$bc-colordark-fg-ui-text: bc-color-a11y($bc-colordark-fg-ui-text-suggestion, $bc-colordark-bg) !default;

Description

Dark theme: Foreground - UI text.

Expected usage

Applied to the text of UI components.

Type

Color

bc-colordark-fg-ui-icon

$bc-colordark-fg-ui-icon: bc-color-a11y($bc-colordark-fg-ui-icon-suggestion, $bc-colordark-bg) !default;

Description

Dark theme: Foreground - UI marks/graphics.

Expected usage

Applied to marks --- graphics/icons --- of UI components.

Type

Color

bc-colordark-fg-ui-border

$bc-colordark-fg-ui-border: rgba(255, 255, 255, 0.2) !default;

Description

Dark theme: Foreground - UI border.

Expected usage

Applied to the borders of UI components.

Type

Color

bc-colordark-fg-ui-border--hover

$bc-colordark-fg-ui-border--hover: bc-tint($bc-colordark-fg-ui-border, 36) !default;

Description

Dark theme: Foreground - UI border :hover.

Expected usage

Applied to when non-disabled UI components receive :hover.

Type

Color

config

variables

bc-wcag2-contrast-lvl

$bc-wcag2-contrast-lvl: 'A' !default;

Description

Current WCAG2 color contrast ratio compliance setting.

Set this either to A (3:1) or AA (4.5:1).

Type

String

Used by

bc-media-xs

$bc-media-xs: 576px !default;

Description

Extra-small breakpoint.

Type

String

Used by

bc-media-sm

$bc-media-sm: 768px !default;

Description

Small breakpoint.

Type

String

Used by

bc-media-md

$bc-media-md: 992px !default;

Description

Medium breakpoint.

Type

String

Used by

bc-media-lg

$bc-media-lg: 1200px !default;

Description

Large (desktop) breakpoint.

Type

String

Used by

bc-media-xl

$bc-media-xl: 1800px !default;

Description

Extra Large (fullscreen desktop) breakpoint.

Type

String

Used by

bc-zindexes

$bc-zindexes: (
  modal        : 500, // Modals.
  overlay      : 400, // Overlays (eg modal overlays, in-page pop-ups).
  foreground   : 300, // Main layer --- push things here to make sure they’re seen.
  background   : 200, // You *might* see things here, if not obscured.
  hidden       : 100  // Don’t expect to see things here.
) !default;

Description

Z-indexes.

Contextual layers for handling things that require z-indexes.

Type

Map

Used by

control-input

csss

.bc-control-input

.bc-control-input { ... }

Description

Control input wrapper.

This should be the <label>, which should wrap the <input>.

The label’s text is placed in .bc-control-input__label-text.

.bc-control-input__label-text

.bc-control-input__label-text { ... }

Description

The control input label text.

::after is used to position the SVGs.

// TODO: Deprecate, but ensure the .bc-aside vertical spacing doesn’t impact this component. .bc-control-input__hint

Deprecated!

Being deprecated and will be replaced by .bc-hint or .bc-aside.

// TODO: Deprecate, but ensure the .bc-aside vertical spacing doesn’t impact this component.
.bc-control-input__hint { ... }

Description

Additional label hint text.

.bc-control-input__input

.bc-control-input__input { ... }

Description

The actual radio button or checkbox input.

.bc-control-input--unlabelled

.bc-control-input--unlabelled { ... }

Description

‘Unlabelled’ control inputs.

For when the input label is visually hidden, or not in immediate proximity to the input field/graphic.

.bc-control-input--invalid

.bc-control-input--invalid { ... }

Description

Invalid styles for control inputs that cause an error.

dropdowns

fieldsets

csss

.bc-fieldset

.bc-fieldset { ... }

Description

Default fieldset.

.bc-fieldset__legend

.bc-fieldset__legend { ... }

Description

Fieldset legend

The <legend> must be the immediate first child within a <fieldset>.

.bc-fieldset--visible

.bc-fieldset--visible { ... }

Description

Visible fieldset variant.

.bc-fieldset--unbordered

.bc-fieldset--unbordered { ... }

Description

Unbordered fieldset

Intended to be chained with the bc-fieldset--visible variant.

file-input

csss

.bc-file-input

.bc-file-input { ... }

Description

File input wrapper.

This should be the <label>, which should wrap the <input>.

The [label’s] button text is placed in .bc-file-input__label-text.

.bc-file-input__input

.bc-file-input__input { ... }

Description

The input[type=file].

.bc-file-input__label-text

.bc-file-input__label-text { ... }

Description

The visible ‘button’ file input text.

.bc-file-input--disabled .bc-file-input__label-text, .bc-file-input__input:disabled + .bc-file-input__label-text

.bc-file-input--disabled .bc-file-input__label-text,
.bc-file-input__input:disabled + .bc-file-input__label-text { ... }

Description

Disabled state file inputs

Available via the :disabled attribute on the input, and as a class on the top-level wrapper (the label).

.bc-file-input--block

.bc-file-input--block { ... }

Description

File input block variant.

fixed-text-input

csss

.bc-fixed-text-input

.bc-fixed-text-input { ... }

Description

Fixed text input.

Fixed text inputs can support both a prepend and an append simultaneously.

.bc-fixed-text-input__prepend, .bc-fixed-text-input__append

.bc-fixed-text-input__prepend,
.bc-fixed-text-input__append { ... }

Description

Shared styles for both the prepend and append child elements.

.bc-fixed-text-input--prepended

.bc-fixed-text-input--prepended { ... }

Description

Fixed text inputs with a prepend.

.bc-fixed-text-input--appended

.bc-fixed-text-input--appended { ... }

Description

Fixed text inputs with an append.

.bc-fixed-text-input--readonly

.bc-fixed-text-input--readonly { ... }

Description

Readonly Fixed text inputs, styled to match readonly text inputs.

.bc-fixed-text-input--disabled

.bc-fixed-text-input--disabled { ... }

Description

Disabled Fixed text inputs, styled to match disabled text inputs.

.bc-fixed-text-input--block

.bc-fixed-text-input--block { ... }

Description

“Block” Fixed text input variant.

Use with .bc-text-input--block to extend the input to 100% container width.

forms

csss

.bc-form

.bc-form { ... }

Description

The form wrapper/container class.

Apply to <form> elements.

.bc-form__group

.bc-form__group { ... }

Description

Use to group labels and inputs together.

.bc-form__error

.bc-form__error { ... }

Description

A block to hold ‘inline’ errors associated with a form group.

  • Each error should use .bc-icon.bc-icon--error.
  • Each error should be given on a separate line.
  • Each error should only relate to the offending form field immediately preceeding the error block.

functions

functions

bc-space

@function bc-space($space) { ... }

Description

Return a rem space value that equals the given input in pixels (output in rem).

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$space

The desired pixel output, that must be one of 4, 6, 8, 12, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 104, 112, 128, or 152.

Number none

Returns

Number

The space in rems.

Throws

  • ERROR: Oi mate, the bc-space function only takes unitless numbers.

  • ERROR: Oi mate, the bc-space function only takes the following numbers: #{$space-units}.

Used by

bc-line-space

@function bc-line-space($number, $number) { ... }

Description

Return a space value based on the line-height and the unit em.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

The space as a multiplier of line-height

Number none
$number

The line-height [optional]

Number none

Returns

Number

The space in ems.

Throws

  • ERROR: Oi mate, the bc-line-space function only takes unitless numbers.

bc-tint

@function bc-tint($color, $percentage) { ... }

Description

Lighten a color by mixing white into it.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

color to tint

Color none
$percentage

percentage of $color in returned color

Number none

Returns

Color

Used by

bc-shade

@function bc-shade($color, $percentage) { ... }

Description

Darken a color by mixing black into it.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

color to shade

Color none
$percentage

percentage of $color in returned color

Number none

Returns

Color

bc-replace

@function bc-replace($string, $search, $replace) { ... }

Description

Replace a string with a string.

Example: http://codepen.io/jakob-e/pen/doMoML

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$string

the haystack string to be manipulated

String none
$search

the desired needle to be replaced

String none
$replace

the desired replacement

String none

Returns

String

the manipulated string with replaced values

Throws

  • ERROR: Oi mate, the first argument of the bc-replace function must be a string!

  • ERROR: Oi mate, the second argument of the bc-replace function must be a string!

  • ERROR: Oi mate, the third argument of the bc-replace function must be a string!

Used by

Author

bc-z

@function bc-z($context) { ... }

Description

Dynamically set z-indexes contextually.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$context

the layer or contextual z-index range desired

String none

Returns

Integer

the z-index for the given layer/context

Throws

  • ERROR: Oi mate, the bc-z function only takes the following layer contexts: #{$bc-zindexes}.

Requires

TODO's

  • Consider adding a second argument to give a (positive) offset within the specified layer.

bc-svguri

@function bc-svguri($svg) { ... }

Description

Generate an optimized SVG data-uri for embedding SVGs in our Sass.

Example codepens:

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$svg

the SVG to be converted

String none

Returns

String

an optimized data-uri

Throws

  • ERROR: Oi mate, the bc-svguri function only takes a string.

Requires

Author

bc-color-luminance

@function bc-color-luminance($color) { ... }

Description

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to calculate the luminance from.

String none

Returns

Float

The luminance.

Throws

  • ERROR: Oi mate, the bc-color-luminance function only takes a color as an input.

Used by

Author

bc-color-contrast

@function bc-color-contrast($foreground, $background, $ratioKey: 'A', $silent: true, $rounded: true) { ... }

Description

Calculate color contrast ratio of two colors against either the WCAG2 A or AA ratios and warn if it’s under at least the A (3:1) ratio to meet compliance. Use for testing foreground (*-fg-*) a text color against a background (*-bg-*) color.

The $ratioKey value is set via the $bc-wcag2-contrast-lvl variable.

Requires MathSass.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$foreground

Foreground color.

String none
$background

Background color.

String none
$ratioKey

The keyword 'A' or 'AA' to set the WCAG 2.1 contrast ration of 3.0 or 4.5 compliance levels respectively.

'a' or 'aa''A'
$silent

Print @warn warnings into stdout.

Booleantrue
$rounded

Round the value.

Booleantrue

Returns

Integer

The calculated contrast ratio of the two input colors.

Throws

  • ERROR: Oi mate, the bc-color-luminance function only takes a colors as an input.

  • ERROR: Oi mate, the bc-color-luminance function only takes a color as an input.

  • ERROR: Oi mate, the bc-color-contrast function only takes

Requires

Used by

Author

bc-color-a11y

@function bc-color-a11y($toMakeA11y, $background, $ratioKey: 'A', $steps: 0.1) { ... }

Description

WCAG2 A/AA color contrast checker

Calculate WCAG2 A [default] or AA ratio-compliant color iterations against a pre-given/immutable background color.

You can set it to AA (4.5:1 rato), and increase the number size of the steps used to iterate the contrast/luminosity towards finding a compliant color.

The $ratioKey value is set via the $bc-wcag2-contrast-lvl variable.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$toMakeA11y

The color that is to be changed.

Color none
$background

The background color to compare against toMakeA11y for the contrast.

Color none
$ratioKey

The keyword 'A' or 'AA' to set the WCAG 2.1 contrast ration of 3.0 or 4.5 compliance levels respectively.

'a' or 'aa''A'
$steps

The step size our function is searching for a new color in. The bigger the number the faster the process the rougher the found color.

Number0.1

Returns

Color

Returns the nearest accessible color

Throws

  • ERROR: Oi mate, the bc-color-a11y function only takes a color as the first attribute.

  • ERROR: Oi mate, the bc-color-a11y function only takes a color as the second attribute.

  • ERROR: Oi mate, the bc-color-a11y function only takes

  • ERROR: Oi mate, the bc-color-a11y function only takes a number as the fourth attribute

  • ERROR: Oi mate, the bc-color-a11y function only takes a number between 0.1 and 100 as the fourth attribute.

  • Warning: ACCESSIBILITY --- the bc-color-a11y function was unable to find an accessible color for you.

Requires

Used by

Links

Author

grid

variables

bc-grid-cols

$bc-grid-cols: 12 !default;

Description

Number of grid columns

Sets the number of grod columns that should be present at all breakpoints.

Type

Number

Used by

bc-grid-gutter-width

$bc-grid-gutter-width: 24px !default;

Description

Gutter width

The white space between each grid column.

Type

Number, in pixels

Used by

bc-grid-max-width--sm

$bc-grid-max-width--sm: ($bc-media-sm - $bc-grid-gutter-width) !default;

Description

sm breakpoint container width

The width of the .container class at the ≥sm breakpoint, in pixels.

Type

Number, in pixels

bc-grid-max-width--md

$bc-grid-max-width--md: ($bc-media-md - $bc-grid-gutter-width) !default;

Description

md breakpoint container width

The width of the .container class at the ≥md breakpoint, in pixels.

Type

Number, in pixels

bc-grid-max-width--lg

$bc-grid-max-width--lg: ($bc-media-lg - $bc-grid-gutter-width) !default;

Description

lg breakpoint container width

The width of the .container class at the ≥lg breakpoint, in pixels.

Type

Number, in pixels

bc-grid-max-width--xl

$bc-grid-max-width--xl: ($bc-media-xl - $bc-grid-gutter-width) !default;

Description

xl breakpoint container width

The width of the .container class at the ≥xl breakpoint, in pixels.

Type

Number, in pixels

mixins

bc-grid-make-grid-cols

@mixin bc-grid-make-grid-cols() { ... }

Description

Padding amount calculation helper mixin.

Iterates through all 12 columns (≥2) to calculate the right amount of left and right padding for each of the Bootstrap grid classes.

Parameters

None.

Output

Bootstrap grid classes with the correct left and right padding.

Requires

bc-grid-float-grid-cols

@mixin bc-grid-float-grid-cols() { ... }

Description

Float helper mixin.

Iterates through the columns list (≥2) to set the float.

Parameters

None.

Output

Bootstrap grid classes with float set.

Requires

Used by

bc-grid-calc-grid-cols

@mixin bc-grid-calc-grid-cols() { ... }

Description

Column width calculation helper mixin.

Calculates the correct widths as a % based on the column count, breakpoint class, and the type (pull or offset).

Parameters

None.

Output

Bootstrap grid classes with correct % widths, and l/r offsets.

Requires

Used by

bc-grid-loop-grid-cols

@mixin bc-grid-loop-grid-cols() { ... }

Description

Calculation helper combinator mixin.

Combines the above mixins to loop through all columns, auto-generate Bootstrap grid classes, including type.

Parameters

None.

Output

Bootstrap grid classes with correct % widths, and l/r offsets.

Requires

Used by

bc-grid-make-grid

@mixin bc-grid-make-grid() { ... }

Description

Grid generation mixin.

Uses the looping combinator mixin to now generate all our grid classes.

Parameters

None.

Output

Complete Bootstrap grid classes with desired properties.

Requires

csss

.container-fluid__container

.container-fluid__container { ... }

Description

Custom max-width’d container.

This (custom) fixed-width container class should be a child of .container-fluid and provides a fixed-width container with max-widths to allow implementers to have a fluid outter container (eg for full-viewport- width blocks with background images, etc.) but return to the fixed-width design of the BS3 .container class.

helpers

csss

.bc-helper-sronly

.bc-helper-sronly { ... }

Description

Screen-reader only helper class.

Simply consumes the bc-sronly mixin, provisioned as a class.

.bc-helper-clearfix

.bc-helper-clearfix { ... }

Description

Clearfix helper class.

Simply consumes the bc-clearfix mixin, provisioned as a class.

.bc-helper-nomargin

.bc-helper-nomargin { ... }

Description

No-margin helper class.

Removes all margins.

.bc-helper-nopadding

.bc-helper-nopadding { ... }

Description

No-padding helper class.

Removes all padding.

.bc-helper-block

.bc-helper-block { ... }

Description

Display: block helper class.

Sets display: block.

.bc-helper-inlineblock

.bc-helper-inlineblock { ... }

Description

Display: block helper class.

Sets display: inline-block.

.bc-helper-inline

.bc-helper-inline { ... }

Description

Display: inline helper class.

Sets display: inline.

.bc-helper-lefttext

.bc-helper-lefttext { ... }

Description

Left-aligned text helper class.

Sets text-align to left.

.bc-helper-centeredtext

.bc-helper-centeredtext { ... }

Description

Centered text helper class.

Sets text-align to center.

.bc-helper-righttext

.bc-helper-righttext { ... }

Description

Right-aligned text helper class.

Sets text-align to right.

.bc-helper-cursorpointer

.bc-helper-cursorpointer { ... }

Description

Mouse cursor pointer helper class.

Sets cursor styles to ‘pointer’.

.bc-helper-noprint

.bc-helper-noprint { ... }

Description

Hide in print helper class.

Hides elements in print media.

label

csss

.bc-label

.bc-label { ... }

Description

[Form] Label.

mixins

mixins

bc-sronly

@mixin bc-sronly($set: true) { ... }

Description

Screen-reader only ready-made mixin.

Expected usage: include to visually hide an element from displays, but not screen readers or other assistive technologies.

You can provide a false argument to unset the styles to make an element that has the sr-only styles applied visible again.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set

either true or false

Booleantrue

Output

Styles to visually hide an element, or undo if set to false.

Throws

  • ERROR: Oi mate, the bc-sronly mixin only accepts a boolean ‘true’ or ‘false’!

bc-outline

Deprecated!

Please use the bc-focus() mixin.

@mixin bc-outline() { ... }

Description

Outline mixin.

Applies an stylised fake ‘outline’.

Parameters

None.

Output

Sets border color, border radius, and box-shadow.

bc-outline-true

Deprecated!

Please use the bc-focus() mixin.

@mixin bc-outline-true() { ... }

Description

True outline mixin.

Applies an outline.

Parameters

None.

Output

Styles for a 3px outline.

bc-focus

@mixin bc-focus($theme: light, $outline-type: faux) { ... }

Description

Mixin to replace bc-outline & bc-outline-true while also supporting focus on light/dark background [themed components].

It sets outline|border color, border radius, and box-shadow with colors according to the background color/theme.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$theme

either light or dark

Keywordslight
$outline-type

‘faux’ outline (via box-shadow), or a true outline

Keywordsfaux

Output

Desired :focus and :focus:active styles for the desired theme, using either box-shadow or outline.

Throws

  • ERROR: Oi mate, the bc-focus mixin only accepts strings!

  • ERROR: Oi mate, the bc-focus mixin only takes the following theme strings: light [default] or dark!

  • ERROR: Oi mate, the bc-focus mixin only takes the following outline type strings: faux [default] or true!

Requires

Used by

bc-clearfix

@mixin bc-clearfix() { ... }

Description

Clearfix mixin for clearing floats.

Expected usage: use when required to clear (force content to sit after floated elements) non-floating elements that wrap around floated ones.

You shouldn’t need this much; we don’t intend to make heavy use of floats.

Parameters

None.

Output

Clearfix using pseudo-elements.

bc-form-disabled

@mixin bc-form-disabled($type: disabled) { ... }

Description

Disabled form element styling mixin.

Expected usage: use on form elements (or React components) that are unavailable for a current state.

Use the default styling for elements that cannot be interacted with.

Use the readonly type if the disabled input could shortly become editable (eg, via a button).

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type

either disabled or readonly

Keywordsdisabled

Output

Styles for :disabled and ‘readonly’ disabled form elements.

Throws

  • ERROR: Oi mate, the bc-form-disabled mixin only accepts strings to set the type!

  • ERROR: Oi mate, the bc-form-disabled mixin only takes the following type strings: disabled [default] or readonly!

Requires

bc-form-label

@mixin bc-form-label() { ... }

Description

Form label mixin.

Expected usage: applied to form labels.

Note: you still need to account for various nesting possibilities (eg see the dropdowns or text-input partial for its labels).

Parameters

None.

Output

Sets block, small margin-bottom, sm font-size and grey color.

Requires

bc-content-code

@mixin bc-content-code() { ... }

Description

Inline code style mixin.

Styles code when it appears nested inside other text elements.

Parameters

None.

Output

Sets inline-block and relative font size.

Requires

bc-break-wrap

@mixin bc-break-wrap() { ... }

Description

Break/wrap lines mixin.

Sets text content to break rather than overflow when there isn’t enough space at the end of a line.

Reference: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Parameters

None.

Output

Sets overflow-wrap and word break to break-word/break-all.

bc-media

@mixin bc-media($breakpoint) { ... }

Description

Media query mixin.

Inlude the mixin and pass it one of the breakpoint keywords as an argument to create a media query.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

anyone one of: xs, sm, md, lg

Keywords none

Content

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

Output

Styles passed in @content, wrapped inside a media query matching breakpoint given as a keyword.

Throws

  • ERROR: Oi mate, the bc-media mixin only accepts strings!

  • ERROR: Oi mate, the bc-media mixin only takes the following breakpoint strings: xs, sm, md, lg, xl!

Requires

bc-smooth-text

@mixin bc-smooth-text() { ... }

Description

Smooth text mixin.

Expected usage: Smooth text aliasing. Appropriate for light-colored text on a dark background or large display type.

Parameters

None.

Output

Sets font-smoothing for more delicate text in Webkit and Firefox.

bc-truncate

@mixin bc-truncate($width,) { ... }

Description

Truncate text mixin.

Expected usage: Truncate text. To avoid vertical alignment issues, we set the parent block to display: inline-flex; call this mixin on a parent block.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$width,

$inline

Keywords none

Output

Sets rules for truncating text

skip-to

csss

.bc-skip-to

.bc-skip-to { ... }

Description

Skip-to link <nav> wrapper

switch-input

csss

.bc-switch-input

.bc-switch-input { ... }

Description

Switch input container.

.bc-switch-input--justify .bc-switch-input__inline-label

.bc-switch-input--justify .bc-switch-input__inline-label { ... }

Description

Switch input block variant.

Despite the name block, this is a flex wrapper used to space the label and the toggle on opposite sides of the container.

text-input

csss

.bc-text-input

.bc-text-input { ... }

Description

Default text input.

.bc-text-input:disabled, .bc-text-input--disabled

.bc-text-input:disabled,
.bc-text-input--disabled { ... }

Description

:disabled state text input / --disabled variant.

.bc-text-input--readonly:disabled, .bc-text-input--readonly

.bc-text-input--readonly:disabled,
.bc-text-input--readonly { ... }

Description

‘Read-only’ (and ideally :disabled) state

.bc-text-input--invalid

.bc-text-input--invalid { ... }

Description

Invalid [state] text input variant.

.bc-text-input--valid

.bc-text-input--valid { ... }

Description

Valid [state)] text input variant.

.bc-text-input--number

.bc-text-input--number { ... }

Description

Text input type="number" variant.

.bc-text-input--textarea

.bc-text-input--textarea { ... }

Description

Text input <textarea> variant.

.bc-text-input--block

.bc-text-input--block { ... }

Description

Text input block layout variant.

.bc-text-input__label

Deprecated!

To be deprecated shortly -- use bc-label.

.bc-text-input__label { ... }

Description

Labels.

trust

mixins

bc-trust-color

@mixin bc-trust-color($fg-text-color) { ... }

Description

Mixin for generating Trust badge colors.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$fg-text-color

The trust badge text color.

Color none

Output

Correct badge text color and background-color.

Requires

csss

.bc-trust

.bc-trust { ... }

Description

.bc-trust

Default style is that of “newcomer”.

.bc-trust--exceptional

.bc-trust--exceptional { ... }

Description

.bc-trust--exceptional

.bc-trust--good

.bc-trust--good { ... }

Description

.bc-trust--good

.bc-trust--low

.bc-trust--low { ... }

Description

.bc-trust--low

.bc-trust--block

.bc-trust--block { ... }

Description

.bc-trust--block

type

variables

bc-leading

$bc-leading: 1.5 !default;

Description

Leading (line-height).

Yields 1rem/24 (font-size over leading/line-height).

Expected usage

Very little; this is applied to the .bc-body class.

Note

The value is unitless; it acts as a multipler of the element’s font-size.

Type

Unit-less number

bc-leading--tight

$bc-leading--tight: 1.3125 !default;

Description

Tight leading (line-height).

Yields 1rem/21 (font-size over leading/line-height).

Expected usage

Very little; this is applied to the .bc-body class.

Note

The value is unitless; it acts as a multipler of the element’s font-size.

Type

Unit-less number

bc-leading--loose

$bc-leading--loose: 2 !default;

Description

Loose leading (line-height).

Yields 1rem/32 (font-size over leading/line-height).

Expected usage

Very little; this is applied to the .bc-body class.

Note

The value is unitless; it acts as a multipler of the element’s font-size.

Type

Unit-less number

bc-font-size

$bc-font-size: 16px !default;

Description

Default font-size

number, in pixels

bc-font-size--xxs

$bc-font-size--xxs: 0.625rem !default;

Description

Extra, extra-small font-size

Set in rems (outputs 10px).

Type

Number, in rems

bc-font-size--xs

$bc-font-size--xs: 0.75rem !default;

Description

Extra-small font-size

Set in rems (outputs 12px).

Type

Number, in rems

bc-font-size--sm

$bc-font-size--sm: 0.875rem !default;

Description

Smaller font-size

Set in rems (outputs 14px).

Type

Number, in rems

Used by

bc-font-size--lg

$bc-font-size--lg: 1.125rem !default;

Description

Larger font-size

Set in rems (outputs 18px).

Type

Number, in rems

bc-font-size--xl

$bc-font-size--xl: 1.5rem !default;

Description

Extra-large font-size

Set in rems (outputs 24px).

Type

Number, in rems

bc-font-size--xxl

$bc-font-size--xxl: 2em !default;

Description

Extra, extra-large font-size

Set in rems (outputs 32px).

Type

Number, in rems

bc-font-weight

$bc-font-weight: normal !default;

Description

Base/default font weight.

Set to normal keyword (equates to 400).

bc-font-weight--bold

$bc-font-weight--bold: bold !default;

Description

Bolded font weight.

Set to bold keyword (equates to 700).

bc-font-weight--semibold

$bc-font-weight--semibold: 500 !default;

Description

Semi-bolded font weight.

Set to 500, leaving things to the native font rendering engine.

Used by

bc-measure

$bc-measure: 42em !default;

Description

The measure [of a line].

Provides a max width for content to keep line lengths sane and readable.

Type

Number, in ems

bc-font-system

$bc-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;

Description

Our system font stack.

Expected usage

Use $bc-font-system for everything by default. Comes applied to .bc-body.

Type

String

bc-font-monospace

$bc-font-monospace: Menlo, Consolas, 'Liberation Mono', Courier, 'Bitstream Vera Sans Mono', monospace !default;

Description

Our monospace font stack.

Expected usage

Use for all code and target/scope URLs. Comes applied to code nested in .bc-body.

Type

String

General

csss

.bc-avatar

.bc-avatar { ... }

Description

Default avatar at 40px.

Image is given a 50% border that renders it circular.

.bc-avatar--square

.bc-avatar--square { ... }

Description

Square variant.

.bc-avatar--inline

.bc-avatar--inline { ... }

Description

Inline variant.

.bc-avatar--lg

.bc-avatar--lg { ... }

Description

Large variant.

.bc-avatar--sm

.bc-avatar--sm { ... }

Description

Small variant.

.bc-avatar--xs

.bc-avatar--xs { ... }

Description

Extra-small variant.

.bc-avatar--grouped

.bc-avatar--grouped { ... }

Description

Modifier class for grouping superimposed a small avatar onto a larger avatar.

.bc-avatar--grouped__child

.bc-avatar--grouped__child { ... }

Description

The ‘child’ avatar.

Styled at the same size as the --xs avatars, unless inside a --lg avatar.

No suppport for a base/‘parent’ --xs sized avatar, since the child can’t be smaller than xs.

.highlight

.highlight { ... }

Description

Code highlight block

TODO: full dark variant support.

.bc-progress-bar__value

.bc-progress-bar__value { ... }

Description

Progress bar value.

.bc-progress-bar__output

.bc-progress-bar__output { ... }

Description

Progress bar <output>.

.bc-progress-bar--labelled

.bc-progress-bar--labelled { ... }

Description

Labelled variant.

.bc-progress-bar--success

.bc-progress-bar--success { ... }

Description

Success variant.

.bc-progress-bar--branded

.bc-progress-bar--branded { ... }

Description

Brand variant.

.bc-progress-bar--xs

.bc-progress-bar--xs { ... }

Description

Extra small variant.

.bc-progress-bar--sm

.bc-progress-bar--sm { ... }

Description

Small variant.

.bc-progress-bar--lg

.bc-progress-bar--lg { ... }

Description

Large variant.

.bc-stepped-nav

.bc-stepped-nav { ... }

Description

Stepped nav wrapper

.bc-stepped-nav__step--active

.bc-stepped-nav__step--active { ... }

Description

Current step

.bc-stepped-nav__step--complete

.bc-stepped-nav__step--complete { ... }

Description

Completed step

.bc-stepped-nav__step--disabled

.bc-stepped-nav__step--disabled { ... }

Description

Disabled step

vrt-logo

csss

.bc-vrt-logo--inline

.bc-vrt-logo--inline { ... }

Description

VRT logo, inlined variant.

For use with text. The logo will scale proportionally to the inlined text.

.bc-vrt-logo--small

.bc-vrt-logo--small { ... }

Description

VRT logo, small variant.

.bc-vrt-logo--large

.bc-vrt-logo--large { ... }

Description

VRT logo, large variant.