Test file: _config.scss

Font stacks

Tests the font stack variables.

display two strings styled with monospaced and system fonts respectively, followed by the actual stack used.

Font sizes

Tests the font size variables.

display six paragraphs for each font-size variable, with the output matching the variable.

Line measure cap (max width)

Tests the $bc-measure variable.

display a paragraph with a max-width, set in ems.

‘Borderize’

Tests $bc-borderize variable.

display a [horizontal rule] styled as a thin (1px) light grey line.

Border radii

Tests our various $bc-border-radius variables.

(1) display four boxes with rounded corners (borders), (2) each box’s text should correspond to its border-radius.

Media query breakpoints

Tests the breakpoint variables and bc-media() mixin.

display the correct breakpoint keyword for breakpoints larger than xs.

Screen reader only

Tests the bc-sronly mixin.

(1) visually hide the following paragraph and it’s link, (2) remain accessible to assistive technologies like screen readers.

Clearfix

This test of the bc-clearfix mixin is intentionally omitted.

Disabled form styles

Tests bc-form-disabled mixin.

(1) display a not-allowed cursor on hover, (2) visually darken the border and background color.

Form label styles

Tests bc-form-label mixin (label is for the above textarea).

display small, light-grey label.

bc-space()

Tests the rem-based space function.

display a series of bars with a width that matches in pixels the integer given to the function.

bc-line-space()

Tests the em-based leading space function.

display a series of bars with a width in ems that equals the value given to the function multiplied by 1.6 (the leading; $bc-leading).

bc-color-luminance()

Tests the color luminance function.

display in purple, the calculated luminance for each of the below colors, matching the pre-calculated values.

bc-color-contrast()

Tests the color contrast function.

display in purple, the calculated color contrast ratios for each of the below pairings, matching the pre-calculated values.

bc-replace()

Tests the string replacement function.

display a purple string that notes we prefer spaces for indentation.

bc-svguri()

Tests the bc-svguri() function.

display the bugcrowd logo in SVG via background-image.