data
functions
device-width
@function device-width($device-type) { ... }Description
Get the width of a type of device
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$device-type | The device type to find the width of | Text | — none |
Throws
Invalid device type provided
development
css
.highlight-focus
.highlight-focus { ... }Description
Highlight focused element
.highlight-active
.highlight-active { ... }Description
Highlight active element
.flash
.flash { ... }Description
Make the element flash
formatting
css
.no-decor
.no-decor { ... }Description
Remove the underline of a link
.invert
.invert { ... }Description
Invert colours
.no-out
.no-out { ... }Description
Remove all outlines
.hide-visited:visited
.hide-visited:visited { ... }Description
Hide the visited link colour
.rounded-corners
.rounded-corners { ... }Description
Use rounded corners for the border
.circle-shape
.circle-shape { ... }Description
Change square border to a circular one
.white
.white { ... }Description
Make icon or svg white
.invalid-border
.invalid-border { ... }Description
Set border to red on form validation fail
.outlined-circle
.outlined-circle { ... }Description
Make the circle in the list outlined
.no-icon
.no-icon { ... }Description
Hide the list icon
.overflow-right
.overflow-right { ... }Description
Overflow to the right instead of downwards
layout
css
.hide
.hide { ... }Description
Hide something
.visualhide
.visualhide { ... }Description
Visually hide something
.invisible
.invisible { ... }Description
Hide something while retaining layout
.center-x
.center-x { ... }Description
Center in middle for x axis
.center-y
.center-y { ... }Description
Center in middle for y axis
.align-center
.align-center { ... }Description
Align text in the center of the parent
.setup
.setup { ... }Description
Setup body element
.center-contents
.center-contents { ... }Description
Center contents of a div with flexbox
.start-right
.start-right { ... }Description
Make the element render from the right of the document instead of the left
material
css
.md-transition
.md-transition { ... }Description
Material Design transition animation
.md-border
.md-border { ... }Description
Material Design borders
performance
css
.opacity-changes
.opacity-changes { ... }Description
Tell the browser that the element changes opacity a lot
.transform-changes
.transform-changes { ... }Description
Tell the browser that the element changes transform a lot
redundant
css
#null
#null { ... }Description
Empty CSS id
.null
.null { ... }Description
Empty CSS class