Resources

General Code Helpers

Commonly used code snippets for a typical Hudl interface—how’s that for generic?

Web
React Native
Android
Apple
Other

Clearfix

Apply this to a container if the child elements within are floated.

@include clearfix;

Media Query

The media query mixin provides a consistent easy method of writing less verbose Media Queries with variables or using straight figures (eg 30rem). The mixin only accepts rem values or variables with rem values.

@include mq( $bp-1, $bp-2 );

Parameters

$bp-1

number

Default value: null

This is the smallest breakpoint for a media query, the point at which the media query starts peforming its magic.

$bp-2

number

Default value: null

This is the higher range for a given breakpoint. the point at which the styles are no longer applied.

Specific use cases

Min-width media query

@include mq( 20rem );

Max-width media query

While writing CSS from a mobile first context is preferred, there are instances where a max-width media query is useful and totally acceptable. This accopmlished by passing max as an argument for one of the mixin parameters.

@include mq( max, 40rem );

Bracketed media query

Instances where you want to set a range where the styles would be applied.

@include mq( 20rem, 40rem );

Micro Layout

The micro layout mixin allows you to quickly build grids of items.

@include micro-layout($num, $margin, $target);

Parameters

$num

number

Default value: 2

The number of items you want per row.

$margin

number

Default value: $ml-margin (1.5rem)

The margin between items in a row.

$target

class name

Default value: $ml-target (.l-grid__item)

This is the repeating target item within the grid.

Spinner

@include css-spinner(
  $size,
  $bg-color,
  $on-bg,
  $speed,
  $thickness
);

Parameters

$size

number

Default value: $spinner-size (2rem)

The width and height of the spinner area.

$bg-color

color variable

Default value: $spinner-color-default ($color-brand-orange)

The color of the spinner.

$on-bg

bool

Default value: false

If the spinner is on a background color, change this to true. A contrast function will return a white spinner, if needed.

$speed

time

Default value: $spinner-timing (0.7s)

The time it takes a spinner to complete a revolution.

$thickness

number

Default value: ($size * 0.2)

A specific value that controls how thick a spinner is.