helpers

mixins

lbh-link-common

@mixin lbh-link-common() { ... }

Description

Common link mixin

Provides the typography and focus state, regardless of link style.

Parameters

None.

Requires

lbh-link-style-default

@mixin lbh-link-style-default() { ... }

Description

Default link style mixin

Provides the default unvisited, visited, hover and active states for links.

If you use this mixin in a component you must also include the lbh-link-common mixin in order to get the focus state.

Parameters

None.

Example

.lbh-component__link {
  @include lbh-link-common;
  @include lbh-link-style-default;
}

Requires

helpers/colour

functions

lbh-colour

@function lbh-colour($colour) { ... }

Description

Get colour

Parameters

NameDescriptionTypeDefault value
$colour

Name of colour from the colour palette ($lbh-colours)

String—

Returns

Colour —

Representation of named colour

Throws

  • Unknown colour #{$colour}

Requires

helpers/depth-index

functions

lbh-depth-index

@function lbh-depth-index($element) { ... }

Description

Get colour

Parameters

NameDescriptionTypeDefault value
$element

Name of element from the depth index

String—

Returns

Index —

Numeric index to use as z-index property

Throws

  • Unknown element #{$element}

Requires

settings/assets

variables

lbh-asset-path

$lbh-asset-path: "/assets" !default;

Description

Where assets are

Type

Boolean

settings/colours

variables

lbh-colours

$lbh-colours: (
  "lbh-a01": #00664f,
  "lbh-a02": #00b341,
  "lbh-a03": #84bd00,
  "lbh-a04": #a4d65e,
  "lbh-e01": #672146,
  "lbh-e02": #aa0061,
  "lbh-e03": #df1995,
  "lbh-e04": #eb6fbd,
  "lbh-f01": #81312f,
  "lbh-f02": #be3a34,
  "lbh-f03": #e03c31,
  "lbh-f04": #ff6a13,
  "lbh-h04": #f8e08e,
  "lbh-text": #0b0c0c,
  "lbh-text-white": #ffffff,
  "lbh-secondary-text": #525a5b,
  "lbh-primary-button": #00664f,
  "lbh-primary-inner-shadow": #003d2f,
  "lbh-primary-hover": #00513f,
  "lbh-primary-focus": #ffc845,
  "lbh-primary-disabled": #7fb2a7,
  "lbh-primary-disabled-inner-shadow": #328472,
  "lbh-secondary-button": #ffffff,
  "lbh-secondary-inner-shadow": #003d2f,
  "lbh-secondary-disabled": #dee0e2,
  "lbh-link": #025ea6,
  "lbh-link-hover": #0085ca,
  "lbh-link-visited": #8031a7,
  "lbh-link-active": #2b8cc4,
  "lbh-panel": #e7eaec,
  "lbh-error": #be3a34,
  "lbh-border": #bfc1c3,
  "lbh-black": #0b0c0c,
  "lbh-grey-1": #6f777b,
  "lbh-grey-2": #bfc1c3,
  "lbh-grey-3": #dee0e2,
  "lbh-grey-4": #f8f8f8,
  "lbh-white": #ffffff,
) !default;

Description

Colour palette

Type

Map

Map structure

NameDescriptionTypeValue
$colour

Representation for the given $colour, where $colour is the friendly name for the colour (e.g. "red": #ff0000);

Map—

Used by

lbh-text-colour

$lbh-text-colour: lbh-colour("lbh-black") !default;

Description

Text colour

Type

Colour

lbh-body-background-colour

$lbh-body-background-colour: lbh-colour("lbh-white") !default;

Description

Body background colour

Type

Colour

lbh-print-text-colour

$lbh-print-text-colour: #000000 !default;

Description

Text colour for print media

Use 'true black' to avoid printers using colour ink to print body text

Type

Colour

lbh-link-colour

$lbh-link-colour: lbh-colour("lbh-link") !default;

Description

Link colour

Type

Colour

Used by

lbh-link-visited-colour

$lbh-link-visited-colour: lbh-colour("lbh-link-visited") !default;

Description

Visited link colour

Type

Colour

Used by

lbh-link-hover-colour

$lbh-link-hover-colour: lbh-colour("lbh-link-hover") !default;

Description

Link hover colour

Type

Colour

Used by

lbh-link-active-colour

$lbh-link-active-colour: lbh-colour("lbh-link-active") !default;

Description

Active link colour

Type

Colour

Used by

settings/depth-index

variables

lbh-depth-index

$lbh-depth-index: (
  "accordion": 1,
  "map": 2,
  "back-to-top": 3,
  "header": 4,
  "cookie-banner": 5
) !default;

Description

Depth index

Type

Map

Map structure

NameDescriptionTypeValue
$element

Depth of a given $element

Map—

Used by

settings/global-styles

variables

lbh-global-styles

$lbh-global-styles: false !default;

Description

Include 'global' styles

Whether to style headings (<h1> - <h6), paragraphs (<p>), links (<a>) and html smooth scrolling without explicitly having to apply the lbh-heading-h*, lbh-body-m and lbh-link classes.

Type

Boolean

lbh-safely-embed

$lbh-safely-embed: false !default;

Description

Skip reset stylesheet and every single global style

Whether to skip the "reset" stylesheet, which turns font, border and padding properties to their default. Might be desirable if embedding on another page.

Type

Boolean

settings/spacing

variables

lbh-spacing-points

$lbh-spacing-points: (
  0: 0,
  4: .25rem,
  8: .5rem,
  12: .75rem,
  16: 1rem,
  20: 1.25rem,
  24: 1.5rem,
  28: 1.75rem,
  32: 2rem,
  36: 2.25rem,
  40: 2.5rem,
  44: 2.75rem,
  48: 3rem
) !default;

Description

Spacing

Type

Map

Map structure

NameDescriptionTypeValue
$spacing

Representation for the given $spacing, where $spacing is the friendly name for the spacing (e.g. "4": 4px);

Map—

settings/typography

variables

lbh-font-family

$lbh-font-family: "Open Sans", sans-serif !default;

Description

Font families to use for all typography on screen media

Type

List

lbh-font-family-print

$lbh-font-family-print: sans-serif !default;

Description

Font families to use for print media

Type

List

lbh-font-weight-regular

$lbh-font-weight-regular: 400 !default;

Description

Font weight for regular typography

Type

Number

lbh-font-weight-bold

$lbh-font-weight-bold: 600 !default;

Description

Font weight for bold typography

Type

Number

lbh-font-weight-medium

$lbh-font-weight-medium: 600 !default;

Description

Font weight for medium typography

Type

Number

lbh-font-weight-light

$lbh-font-weight-light: 400 !default;

Description

Font weight for light typography

Type

Number

tools

variables

[private] lbh-imported-modules

$lbh-imported-modules: () !default;

Description

List of modules which have already been exported

Type

List

Used by

mixins

lbh-exports

@mixin lbh-exports($name) { ... }

Description

Export module

Ensure that the modules of CSS that we define throughout Frontend are only included in the generated CSS once, no matter how many times they are imported across the individual components.

Parameters

NameDescriptionTypeDefault value
$name

Name of module - must be unique within the codebase

String—

Requires

General

mixins

lbh-typography-common

@mixin lbh-typography-common($font-family: $lbh-font-family) { ... }

Description

'Common typography' helper

Sets the font family and associated properties, such as font smoothing. Also overrides the font for print.

Parameters

NameDescriptionTypeDefault value
$font-family

Font family to use

List$lbh-font-family

Used by

lbh-font

@mixin lbh-font($size, $weight: regular, $tabular: false, $line-height: false) { ... }

Description

Font helper

Parameters

NameDescriptionTypeDefault value
$size

Size of the font as it would appear on desktop - uses the responsive font size map

Number—
$weight

Weight: bold or regular

Stringregular
$tabular

Whether to use tabular numbers or not

Booleanfalse
$line-height

Line-height, if overriding the default

Numberfalse

Requires

mq

@mixin mq($from, $until, $and, $media-type) { ... }

Description

Media Query mixin

Parameters

NameDescriptionTypeDefault value
$from

(false) - One of $mq-breakpoints

String or Boolean—
$until

(false) - One of $mq-breakpoints

String or Boolean—
$and

(false) - Additional media query parameters

String or Boolean—
$media-type

($mq-media-type) - Media type: screen, print…

String—

Example

.element {
  @include mq($from: mobile) {
    color: red;
  }
  @include mq($until: tablet) {
    color: blue;
  }
  @include mq(mobile, tablet) {
    color: green;
  }
  @include mq($from: tablet, $and: '(orientation: landscape)') {
    color: teal;
  }
  @include mq(950px) {
    color: hotpink;
  }
  @include mq(tablet, $media-type: screen) {
    color: hotpink;
  }
  // Advanced use:
  $my-breakpoints: (L: 900px, XL: 1200px);
  @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
    color: hotpink;
  }
}

Requires

Used by

Links

mq-add-breakpoint

@mixin mq-add-breakpoint($name, $width) { ... }

Description

Add a breakpoint

Parameters

NameDescriptionTypeDefault value
$name

Name of the breakpoint

String—
$width

Width of the breakpoint

Number—

Example

@include mq-add-breakpoint(tvscreen, 1920px);
@include mq(tvscreen) {}

Requires

mq-show-breakpoints

@mixin mq-show-breakpoints($show-breakpoints, $breakpoints) { ... }

Description

Show the active breakpoint in the top right corner of the viewport

Parameters

NameDescriptionTypeDefault value
$show-breakpoints

($mq-show-breakpoints) - List of breakpoints to show in the top right corner

List—
$breakpoints

($mq-breakpoints) - Breakpoint names and sizes

Map—

Example

// Show breakpoints using global settings
@include mq-show-breakpoints;

// Show breakpoints using custom settings
@include mq-show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px));

Requires

Links

variables

mq-base-font-size

$mq-base-font-size: 16px !default;

Description

Base font size on the <body> element

Type

Number (unit)

Used by

mq-responsive

$mq-responsive: true !default;

Description

Responsive mode

Set to false to enable support for browsers that do not support @media queries, (IE <= 8, Firefox <= 3, Opera <= 9)

You could create a stylesheet served exclusively to older browsers, where @media queries are rasterized

Type

Boolean

Example

// old-ie.scss
$mq-responsive: false;
@import 'main'; // @media queries in this file will be rasterized up to $mq-static-breakpoint
                 // larger breakpoints will be ignored

Links

mq-breakpoints

$mq-breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px
) !default;

Description

Breakpoint list

Name your breakpoints in a way that creates a ubiquitous language across team members. It will improve communication between stakeholders, designers, developers, and testers.

Type

Map

Used by

Links

mq-static-breakpoint

$mq-static-breakpoint: desktop !default;

Description

Static breakpoint (for fixed-width layouts)

Define the breakpoint from $mq-breakpoints that should be used as the target width for the fixed-width layout (i.e. when $mq-responsive is set to 'false') in a old-ie.scss

Type

String

Example

// tablet-only.scss
//
// Ignore all styles above tablet breakpoint,
// and fix the styles (e.g. layout) at tablet width
$mq-responsive: false;
$mq-static-breakpoint: tablet;
@import 'main'; // @media queries in this file will be rasterized up to tablet
                 // larger breakpoints will be ignored

Used by

  • [mixin] mq

Links

mq-show-breakpoints

$mq-show-breakpoints: () !default;

Description

Show breakpoints in the top right corner

If you want to display the currently active breakpoint in the top right corner of your site during development, add the breakpoints to this list, ordered by width, e.g. (mobile, tablet, desktop).

Type

Map

Used by

mq-media-type

$mq-media-type: all !default;

Description

Customize the media type (e.g. @media screen or @media print) By default sass-mq uses an "all" media type (@media all and …)

Type

String

Used by

  • [mixin] mq

Links

functions

mq-px2em

@function mq-px2em($px, $base-font-size) { ... }

Description

Convert pixels to ems

Parameters

NameDescriptionTypeDefault value
$px

value to convert

Number—
$base-font-size

($mq-base-font-size) - <body> font size

Number—

Returns

Number

Example

$font-size-in-ems: mq-px2em(16px);
p { font-size: mq-px2em(16px); }

Requires

Used by

mq-get-breakpoint-width

@function mq-get-breakpoint-width($name) { ... }

Description

Get a breakpoint's width

Parameters

NameDescriptionTypeDefault value
$name

Name of the breakpoint. One of $mq-breakpoints

String—

Returns

Number —

Value in pixels

Example

$tablet-width: mq-get-breakpoint-width(tablet);
@media (min-width: mq-get-breakpoint-width(desktop)) {}

Requires

Used by

[private] _mq-quick-sort

@function _mq-quick-sort($list) { ... }

Description

Quick sort

Parameters

NameDescriptionTypeDefault value
$list

List to sort

List—

Returns

List —

Sorted List

Used by

Author

  • Sam Richards

[private] _mq-map-sort-by-value

@function _mq-map-sort-by-value($map) { ... }

Description

Sort a map by values (works with numbers only)

Parameters

NameDescriptionTypeDefault value
$map

Map to sort

Map—

Returns

Map —

Map sorted by value

Requires

Used by