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

  • Sets flex: 1, which is shorthand for flex: 1 1 0%.
  • This means the flex item will grow to take up available space in the flex container, but its initial size (before growing) will be 0%.
  • Example: flex: 1 sets flex-grow: 1, flex-shrink: 1, and flex-basis: 0%, meaning the item will grow at the same rate as other items when space is available.
  • ⚠️ Careful: This shorthand can also modify flex-shrink and flex-basis, potentially affecting the item’s behavior unexpectedly.

• .bc-flex-0

  • Sets flex: 0 0 auto, which means:
    • flex-grow: 0: The item will not grow to take up available space.
    • flex-shrink: 0: The item will not shrink if the container is too small.
    • flex-basis: auto: The item’s size will be based on its content or specified width/height.
  • This is useful when you want the item to maintain its natural size and prevent it from growing or shrinking.
  • ⚠️ Careful: This can prevent the item from taking up any extra space in the flex container, which may result in less flexible layouts.

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;

Use the border helper classes to easily apply consistent borders to elements.

Border Helper Classes for Specific Sides

Class	Purpose
.bc-border	Sets a border on all sides using the value of $bc-borderize
.bc-no-border	Remove border on all sides using the value of $bc-borderize
.bc-border--top	Sets a border on the top side using the value of $bc-borderize
.bc-border--bottom	Sets a border on the bottom side using the value of $bc-borderize
.bc-border--left	Sets a border on the left side using the value of $bc-borderize
.bc-border--right	Sets a border on the right side using the value of $bc-borderize
.bc-border--horizontal	Sets a border horizontal (right and left) using the value of $bc-borderize
.bc-border--vertical	Sets a border vertical (top and bottom) using the value of $bc-borderize
.bc-border-ui	Sets a border on all sides using the value of $bc-borderize
.bc-border-ui--top	Sets a border on the top side using the value of $bc-borderize-ui
.bc-border-ui--bottom	Sets a border on the bottom side using the value of $bc-borderize-ui
.bc-border-ui--left	Sets a border on the left side using the value of $bc-borderize-ui
.bc-border-ui--right	Sets a border on the right side using the value of $bc-borderize-ui
.bc-border-ui--horizontal	Sets a border horizontal (right and left) using the value of $bc-borderize-ui
.bc-border-ui--vertical	Sets a border vertical (top and bottom) using the value of $bc-borderize-ui

Usage Notes

• All border classes use the $bc-borderize or $bc-borderize-ui variables, which combines border width, style, and color.
• These border helper classes can be used on any element to quickly apply a border to the desired side or to all sides with .bc-border and .bc-border-ui or no border.bc-no-border

Example Usage

<div class="bc-border">
  <!-- Content with a border on all sides -->
</div>

<div class="bc-border--top">
  <!-- Content with a border on the top -->
</div>