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.
This is the smallest breakpoint for a media query, the point at which the media query starts peforming its magic.
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.
The number of items you want per row.
The margin between items in a row.
This is the repeating target item within the grid.
The width and height of the spinner area.
The color of the spinner.
If the spinner is on a background color, change this to true. A contrast function will return a white spinner, if needed.
The time it takes a spinner to complete a revolution.
($size * 0.2)
A specific value that controls how thick a spinner is.