effortless-css

A collection of frequently used {Less} CSS mixins

How to Use

Install effortless-css from NPM

npm install effortless-css --save-dev

Currently, there's only one way to use effortless-css: reference the provided Less file into a stylesheet.

It could be as simple as

@import '../../node_modules/effortless-css/less/all.less';

Available mixins

Colors

.background-gradient-two-color-top

Creates a vertical gradient from top to bottom.

Accepts: @top (defaulting to #fff) and @bottom (defaulting to #000) for gradient colors and optionally @fallback for browsers that do not support gradients. When not provided with @fallback, @top is used

.background-gradient-two-color-left

Creates a horizontal gradient from left to right.

Accepts: @left (defaulting to #fff) and @right (defaulting to #000) for gradient colors and optionally @fallback for browsers that do not support gradients. When not provided with @fallback, @left is used

.opacity

Makes an element transparent (as opposed to the name).

Accepts: @alpha (defaulting to 1)

Shape

.box-sizing

Sets the box-sizing of an element.

Accepts: @sizing (defaulting to border-box)

.round-borders

Makes the corners of an element rounded.

Accepts: @radius (defaulting to 50%)

Transforms

.transform

Sets a transform to an element.

Accepts: @transform (defaulting to rotate(0deg))

.transform-origin

Sets the transform origin of an element.

Accepts: @origin (defaulting to 50% 50%)

.transform-style

Sets the transform style of an element.

Accepts: @style (defaulting to preserve-3d)

.perspective

Sets the transform perspective.

Accepts: @perspective (defaulting to 500)

Misc

.multiple-columns

Makes an element host multiple columns.

Accepts: @count (defaulting to 2)

.transition

Sets transition to properties of an element.

Accepts: Duration, property or any number of properties

Note: If passing multiple arguments, end the last one with a ; so that the generated CSS is as expected. Otherwise, all the arguments in the output will be separated by a space instead of a comma.

.animation

Sets animation to an element.

Accepts: @props

.filter

Sets a filter to an element.

Accepts: @prop (defaulting to none)

To-do

• Include more mixins if possible