Hudl Design System

Last Modified:March 8, 2017

Mixins

These mixins are used to development the output CSS of Uniform-UI-CSS and Uniform-UI-Components. These mixins will also be useful for you as you author your cluster specific CSS.

Using and importing mixins

The mixins for uniform-ui-css are all located in source/mixins. You can import all mixins into your local style sheet by using the manifest file located in that folder.

@import   '../../node_modules/hudl-uniform-ui-css/source/scss/mixins/mix.all';

Alternately, you can import invidual files

@import   '../../node_modules/hudl-uniform-ui-css/source/scss/mixins/mix.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);

Specific use cases

A min-width media query

If you’re authoring from a mobile first perspective, this is all you should ever need.

@include mq(20rem);
A 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 can be accomplished one of two ways.

@include mq(max, 40rem);

or

@include mq(40rem, max);

Essentially we just need to pass the string max as an argument for one of the mixin parameters.

A bracketed media query

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

@include mq(20rem, 40rem);

Settings

Parameter Type Default Value Description
$bp-1 Number --- This is the smallest breakpoint for a media query, the point at which the media query starts peforming its magic
$bp-2 Number null This is the higher range for a given breakpoint. the point at which the styles are no longer applied.

# Micro Layout

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

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

Settings

Parameter Type Default Value Description
$num number 2 The number of items you want per row
$margin number $ml-margin (1.5rem) The margin between items in a row
$target class name $ml-target (.l-grid__item) This is the repeating target item within the grid

# CSS Spinners

An updated version of the Legacy Kickoff spinner you know and love.

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

Settings

Parameter Type Default Value Description
$size number $spinner-size (2rem) The width and height of the spinner area
$bg-color number $spinner-color-default ($ui-orange) The color of the spinner
$on-bg boolean 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 $spinner-timing (0.7s) The time it takes a spinner to complete a revolution
$thickness number ($size * 0.2) Pretty specific value that controls how thick a spinner is
$margin number 0 This should be removed. It's value is not used within the mixin.

# Type Size

The type-size mixin automatically switches type from a smaller, hand-held appropriate size, to a larger, tablet and up appropriate size

@include type-size($default-size, $small-size);

Settings

Parameter Type Default Value Description
$default-size number null This is larger size in the range
$small-size number null This is the size for screens 600px and smaller

Using the type-size and line-height mixins

The mixins for type-size and line-height were created for use in the Uniform type system. Specifically, for larger, display type elements. As such, it is currently written specifically for that use case. That doesn’t mean it won’t work well for you, but the point at which type sizes change is hard-coded within the mixin. That breakpoint is 37.5rem (600px). This the context switch between handheld and tablets seems to be natural point to switch between smaller and large type size.

# Line height

Used in conjunction with the type-size mixin to tweak any line-height difference between the small and large contexts

@include line-height($default-line-height, $small-line-height);

Settings

Parameter Type Default Value Description
$default-line-height number null This is the line height for the large type size
$small-line-height number null The is the line height for the smaller size type

# Theme Switcher

The theme switcher serves as the underlying mixin used for other theme mixins. It also allows you to theme css properties not currently covered by the other specific theme mixins by uniCSS.

@include theme-switchter($light, $dark, $property);

Settings

Parameter Type Default Value Description
$light color null The background color for light environments.
$dark color null The color for dark environments.
$property string null The CSS property you want the $light and $dark paramenters to apply.

# Theme Color

The theme color mixin is used to switch type color based on whether an element is in a dark or light environment.

@include theme-color($light, $dark, $auto-switch);

By default, the mixin automatically chooses the dark compliment for you based on the input $light color. Changing $auto-switch to false disables that auto switching.

Settings

Parameter Type Default Value Description
$light color $le-type-medium The type color for light environments.
$dark color null The the color for dark environments.
$auto-switch boolean true Setting to false opts out of auto switching based on $light argument. Set this to false when you want to customize the switch between light and dark.

# Theme Background

The theme background mixin is used to switch the background color of an element based on whether its in a dark or light environment.

@include theme-bg($light, $dark, $auto-switch);

Though $auto-switch is set to true, there currently are not any values set to automatically switch backgrounds colors. The Uniform color system is currently being reworked and expanded, at which point safe auto-switching values may be determined. Until then, please be sure to specify both $light and $dark values.

Settings

Parameter Type Default Value Description
$light color null The background color for light environments.
$dark color null The the color for dark environments.
$auto-switch boolean true Turns auto switching off or on.

# Theme Border

The theme border mixin is used to switch the border color of an element based on whether its in a dark or light environment.

@include theme-bg($light, $dark, $auto-switch);

By default, the mixin automatically chooses the dark compliment for you based on the input $light color. Changing $auto-switch to false disables that auto switching.

Settings

Parameter Type Default Value Description
$light color null The background color for light environments.
$dark color null The the color for dark environments.
$auto-switch boolean true Turns auto switching off or on.

# Space

This mixin allows you to define rules for margin or padding in your scss. Arguably, it's easier to hand code this and use space variables. However, this mixin was used in creation of `uni-margin` and `uni-pad` classes.

@include space(margin, vert, $space-two);

Settings

Parameter Type Default Value Description
$property string margin Pass one of two values, either margin or padding
$direction string all Pass one of the following values [all, vertical, horizontal, top, right, bottom or right]
$size number $space-one (1rem) Pass one of the space variables