data

functions

device-width

@function device-width($device-type) { ... }

Description

Get the width of a type of device

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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

.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