https://github.com/myterminal/effortless-css

A collection of frequently used {Less} CSS mixins
https://github.com/myterminal/effortless-css

less-mixins lesscss web

Last synced: about 10 hours ago
JSON representation

A collection of frequently used {Less} CSS mixins

• Host: GitHub
• URL: https://github.com/myterminal/effortless-css
• Owner: myTerminal
• License: mit
• Created: 2019-05-11T00:33:08.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-08-18T19:42:02.000Z (about 2 years ago)
• Last Synced: 2024-09-24T19:40:37.799Z (about 10 hours ago)
• Topics: less-mixins, lesscss, web
• Language: Less
• Homepage:
• Size: 6.84 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# effortless-css

[![npm version](https://badge.fury.io/js/effortless-css.svg)](https://badge.fury.io/js/effortless-css)

[![npm downloads](https://img.shields.io/npm/dt/effortless-css.svg)](https://www.npmjs.com/package/effortless-css)  

[![License](https://img.shields.io/github/license/myTerminal/effortless-css.svg)](https://opensource.org/licenses/MIT)  

[![NPM](https://nodei.co/npm/effortless-css.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/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