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.

Single-property helper classes for print view

• .bc-helper-noprint sets display: none for print media. (Element is visible on screen but visually hidden on print media)
• .bc-helper-printonly sets display: none for screen. (Inverse of .bc-helper-noprint class, element is visually hidden on screen but visible in print media)

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.