Hey there! This is the Uniform version 3 documentation site. If you’re looking for version 4, go here instead.
Commonly used code snippets for a typical Hudl interface—how’s that for generic?
Apply this to a container if the child elements within are floated.
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.
Default value: null
This is the smallest breakpoint for a media query, the point at which the media query starts peforming its magic.
Default value: null
This is the higher range for a given breakpoint. the point at which the styles are no longer applied.
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.
Instances where you want to set a range where the styles would be applied.
The micro layout mixin allows you to quickly build grids of items.
Default value: 2
The number of items you want per row.
Default value: $ml-margin (1.5rem)
The margin between items in a row.
Default value: $ml-target (.l-grid__item)
This is the repeating target item within the grid.
Default value: $spinner-size (2rem)
The width and height of the spinner area.
Default value: $spinner-color-default ($color-brand-orange)
The color of the spinner.
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.
Default value: $spinner-timing (0.7s)
The time it takes a spinner to complete a revolution.
Default value: ($size * 0.2)
A specific value that controls how thick a spinner is.