Mixins

Collection of mixins available during SCSS styling.

@import '@bbc/front-end-kit/scss/helpers/main';

Flex

Sets display: flex and groups all flex parent properties into one mixin.

// flex.scss
@include flex($direction: null, $justify: null, $alignItems: null, $alignContent: null, $wrap: null);

display: flex is always emitted. Any null parameter is skipped.

Parameters

• $direction: flex-direction value.
• $justify: justify-content value.
• $alignItems: align-items value.
• $alignContent: align-content value.
• $wrap: flex-wrap value.

Shortcuts

// flex.scss
@include flex-row($justify: null, $alignItems: null, $alignContent: null)
@include flex-row-reverse($justify: null, $alignItems: null, $alignContent: null)
@include flex-column($justify: null, $alignItems: null, $alignContent: null)
@include flex-column-reverse($justify: null, $alignItems: null, $alignContent: null)
@include flex-row-wrap($justify: null, $alignItems: null, $alignContent: null)
@include flex-row-reverse-wrap($justify: null, $alignItems: null, $alignContent: null)
@include flex-column-wrap($justify: null, $alignItems: null, $alignContent: null)
@include flex-column-reverse-wrap($justify: null, $alignItems: null, $alignContent: null)

Inline-Flex

Sets display: inline-flex. Same signature and shortcuts as flex.

// flex.scss
@include inline-flex($direction: null, $justify: null, $alignItems: null, $alignContent: null, $wrap: null);

Shortcuts

@include inline-flex-row(...)
@include inline-flex-row-reverse(...)
@include inline-flex-column(...)
@include inline-flex-column-reverse(...)
@include inline-flex-row-wrap(...)
@include inline-flex-row-reverse-wrap(...)
@include inline-flex-column-wrap(...)
@include inline-flex-column-reverse-wrap(...)

Font Face

Generates a complete @font-face block for a single font weight/style combination.

// fontface.scss
@include font-face($name, $file, $weight, $style);

Parameters

• $name (String): Font family name as used in CSS.
• $file (String): File path without extension — the mixin adds .eot, .woff, .ttf, and .svg variants automatically.
• $weight (Number): Font weight (e.g. 400, 700).
• $style (String): Font style (normal or italic).

Render Font Faces

Iterates over a list of font definitions and emits a @font-face block for each, prepending the global $paths-css-fonts variable to each file path.

// fontface.scss
@include render-font-faces($list: null);

Parameters

• $list (List, default null): A list of tuples, each containing (name, file, weight, style) — matching the parameters of font-face.

Example

$fonts: (
    ('MyFont', 'my-font-regular', 400, normal),
    ('MyFont', 'my-font-bold', 700, normal),
);

@include render-font-faces($fonts);

Render Google Fonts

Emits a Google Fonts @import url(...) statement for each font family in a map.

// fontface.scss
@include render-google-fonts($fonts);

Parameters

• $fonts (Map): A map of (family: weights) pairs.

Example

@include render-google-fonts((
    'Open Sans': 400 700,
    'Roboto': 300 400 500,
));

Font Smoothing

Sets cross-browser font smoothing (-webkit-font-smoothing: antialiased, -moz-osx-font-smoothing: grayscale).

// font-smoothing.scss
@include font-smoothing();

Form Text Inputs

Shorthand content mixin that targets all text-type form inputs (input[type="text"], input[type="email"], input[type="number"], textarea, etc.) in one selector.

// form.scss
@include form-text-inputs {
    // css properties here
}

Hover Active

Applies :hover styles only on pointer devices (via @media (hover: hover)) and maps :active to the same styles on touch devices.

// hover-active.scss
@include hover-active {
    // css properties here
}

No Render

Visually hides an element while keeping it accessible to screen readers. Optionally scopes the hiding to one or two media query expressions.

// noRender.scss
@include no-render($bp1: null, $bp2: null);

Parameters

• $bp1 (String, default null): A media query expression string (e.g. --bp-min-medium). Applied as @media (#{$bp1}).
• $bp2 (String, default null): A second media query expression. When both $bp1 and $bp2 are provided, they are combined with and.

Examples

// Hide at all sizes
@include no-render();

// Hide at a single breakpoint
@include no-render(--bp-max-small);

// Hide between two breakpoints
@include no-render(--bp-min-medium, --bp-max-large);

No Render Props

The raw visually-hidden CSS property block used internally by no-render. Can be included directly when the media query wrapping of no-render is not needed.

// noRender.scss
@include no-render-props();

Emits: position: absolute, z-index: -1, overflow: hidden, width: 1px, height: 1px, and clip values.

Position

Groups positioning into one mixin. Supports a type + coordinate shorthand, or coordinate-only (type inferred from the value list).

// position.scss
@include position($type, $coords: null, $zIndex: null);

Parameters

• $type (String): absolute, relative, static, fixed, or sticky. When $type is itself a list, it is treated as $coords and position: is omitted.
• $coords (List, default null): Coordinate values in one of three formats:
  • 1 value: Applied to all four sides (inset).
  • 2 values: vertical horizontal (top/bottom from first, right/left from second).
  • 4 values: top right bottom left.
• $zIndex (Number, default null): Sets z-index when provided.

Examples

@include position(absolute, 0 auto, 10);    // top/bottom: 0, right/left: auto, z-index: 10
@include position(fixed, 0 0 0 0);          // pinned to all edges
@include position(0 auto null null);        // no position type, top: 0, right: auto

Ellipsis

Truncates text with an ellipsis after a given number of lines using -webkit-line-clamp.

// ellipsis.scss
@include ellipsis($lineCount: 1);

Parameters

• $lineCount (Number, default 1): Maximum number of lines to show before truncating.

Example

.card__title {
    @include ellipsis(2); // truncate after 2 lines
}