Full documentation is found in the SassDoc reference for Helpers.

This module provides a number of simple classes that aim to do just one thing.

Single-property helper classes

Property	Purpose
.bc-helper-nomargin	sets margin: 0
.bc-helper-nopadding	sets padding: 0
.bc-helper-centeredtext	sets text-align: center
.bc-helper-cursorpointer	sets cursor: pointer
.bc-helper-righttext	sets text-align: right
.bc-helper-noprint	hides content for @media print
.bc-helper-printonly	hides content for @media screen
.bc-helper-block	sets display: block
.bc-helper-inline	sets display: inline
.bc-helper-inlineblock	sets display: inline-block

Note that most of these helpers include !important to ensure the single property they provide actually overrides as intended.

Mixin implementation helper classes

The more complex helpers are just class implementations of our pre-made mixins from _config.scss, eg:

Property	Purpose
.bc-helper-clearfix	provides the bc-clearfix() mixin styles.
.bc-helper-sronly	provides the bc-sronly() (screen reader only; visually-hidden) mixin styles.

When to use helpers

Use the single-property helpers when editing markup over stylesheets is preferable or the only viable solution.

We try to avoid high specificities in our stylesheets --- along with !important overrides. These classes are a compromising balance to provide utility classes that guarantee an override without adding them to app stylesheets.

Margin helpers use base-4 spacing system to maintain a consistent layout. The helpers cover the most common set of sizes we need for custom margins.

Note the spacing units aren’t linearly-stepped.

For any margin larger than supported sizes, please continue to use the bc-space()SASS function.

Margin naming convention

Side (optional)	Definition
t	top
r	right
b	bottom
l	left
x	horizontal (right and left)
y	vertical (top and bottom)

Size	Pixel	Rem
auto	N/A	N/A
0	0	0
1	4px	0.25rem
2	8px	0.5rem
3	16px	1rem
4	20px	1.25rem
5	24px	1.5rem
6	32px	2rem
7	40px	2.5rem
8	48px	3rem

Margin on all sides

Margin class	Definition
.bc-m-0	margin: 0;
.bc-m-1	margin: 0.25rem;

Margin on horizontal sides

Margin class	Definition
.bc-mx-auto	margin-right: auto; margin-left: auto;
.bc-mx-0	margin-right: 0; margin-left: 0;
.bc-mx-1	margin-right: 0.25rem; margin-left: 0.25rem;

Margin on vertical sides

Margin class	Definition
.bc-my-auto	margin-top: auto; margin-bottom: auto;
.bc-my-0	margin-top: 0; margin-bottom: 0;
.bc-my-1	margin-top: 0.25rem; margin-bottom: 0.25rem;

Margin on one side

Margin class	Definition
.bc-mt-0	margin-top: 0;
.bc-mt-1	margin-top: 0.25rem;
.bc-mr-0	margin-right: 0;
.bc-mr-1	margin-right: 0.25rem;
.bc-mb-0	margin-bottom: 0;
.bc-mb-1	margin-bottom: 0.25rem;
.bc-ml-0	margin-left: 0;
.bc-ml-1	margin-left: 0.25rem;
.bc-ml-auto	margin-left: auto;

Use Flexbox to solve layout problems where content determine item sizing.

See also the Grid system.

Shared Flex and Grid classes

• .bc-helper-gap
  • Sets gap and exposes CSS Vars for row and columns.

Flexbox parent helper classes

Class	Purpose
.bc-flex	Defines a flex container
.bc-flex--wrap	Allow flex items will wrap onto multiple lines, from top to bottom
.bc-flex--row	Establishes the direction laying out in horizontal rows
.bc-flex--col	Establishes the direction laying out in vertical columns
.bc-flex--align-flex-start	Items are aligned at the start of the cross axis
.bc-flex--align-center	Items are aligned in the center of the cross axis
.bc-flex--align-flex-end	Items are aligned at the end of the cross axis
.bc-flex--justify-flex-start	Items are packed toward the start of the flex-direction
.bc-flex--justify-space-between	Items are evenly distributed in the line; first item is on the start line, last item on the end line
.bc-flex--justify-center	Items are centered along the line
.bc-flex--justify-flex-end	Items are packed toward the end of the flex-direction

Flexbox children helper classes

• .bc-flex-1
  • ⚠️ Careful: This shorthand can set flex-shrink and flex-basis.

Padding helpers use base-4 spacing system to maintain a consistent layout. The helpers cover the most common set of sizes we need for custom paddings.

Note the spacing units aren’t linearly-stepped.

For any padding larger than supported sizes, please continue to use the bc-space()SASS function.

Padding naming convention

Side (optional)	Definition
t	top
r	right
b	bottom
l	left
x	horizontal (right and left)
y	vertical (top and bottom)

Size	Pixel	Rem
0	0	0
1	4px	0.25rem
2	8px	0.5rem
3	16px	1rem
4	20px	1.25rem
5	24px	1.5rem
6	32px	2rem
7	40px	2.5rem
8	48px	3rem

Padding on all sides

Padding class	Definition
.bc-p-0	padding: 0;
.bc-p-1	padding: 0.25rem;

Padding on horizontal sides

Padding class	Definition
.bc-px-0	padding-right: 0; padding-left: 0;
.bc-px-1	padding-right: 0.25rem; padding-left: 0.25rem;

Padding on vertical sides

Padding class	Definition
.bc-py-0	padding-top: 0; padding-bottom: 0;
.bc-py-1	padding-top: 0.25rem; padding-bottom: 0.25rem;

Padding on one side

Padding class	Definition
.bc-pt-0	padding-top: 0;
.bc-pt-1	padding-top: 0.25rem;
.bc-pr-0	padding-right: 0;
.bc-pr-1	padding-right: 0.25rem;
.bc-pb-0	padding-bottom: 0;
.bc-pb-1	padding-bottom: 0.25rem;
.bc-pl-0	padding-left: 0;
.bc-pl-1	padding-left: 0.25rem;