Bugcrowd design system: Helpers

Full documentation is found in the SassDoc reference for Helpers.

Do one thing and do it well

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

Single-property helper classes

  • .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.

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:

  • .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

Guidance last updated: Jan 6, 2021

Margin helpers

Margin helpers use base-8 spacing to maintain a consistent layout. The helpers cover the most common set of sizes we need for custom margins. For any margin larger than supported sizes, please continue to use the bc-space()SASS function

Naming convention

.bc-m{side}-{size}

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 auto auto
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;