https://github.com/scotch-io/css-mixins

SASS and LESS Mixins to simplify cross browser compatibility and make CSS3 properties easier to use.
https://github.com/scotch-io/css-mixins

Last synced: 8 days ago
JSON representation

SASS and LESS Mixins to simplify cross browser compatibility and make CSS3 properties easier to use.

• Host: GitHub
• URL: https://github.com/scotch-io/css-mixins
• Owner: scotch-io
• Created: 2013-05-23T21:46:48.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-10-15T21:40:46.000Z (about 11 years ago)
• Last Synced: 2024-04-14T18:18:15.201Z (7 months ago)
• Language: CSS
• Size: 133 KB
• Stars: 30
• Watchers: 5
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
SASS and LESS Mixins

===========

Preset mixins to help speed up web development. Provides **cross-browser compatibility** with things like:

- Rounded Corners

- Opacity

- Box Shadow

- Box Shadow (Inset)

- Gradient (Horizontal)

- Gradient (Vertical)

- CSS3 Transition

- CSS3 Transforms

These will automatically create browser-specific rules to accommodate multiple browsers. For example, the `.border-radius(4px)` mixin will create:

>

	border-radius			: 4px;

	-moz-border-radius		: 4px;

	-webkit-border-radius	: 4px;

* These instructions are for the LESS version. The SASS syntax is a little different, but will have the same results. Check out the [SASS Website](http://sass-lang.com/) for their syntax.

Requirements

------------

- [jQuery](http://jquery.com/)

- [LESS](http://lesscss.org/)

Installation

------------

- Include jQuery and LESS

>

	

	

- Include `mixins.less` in the head of your document.

>

	

* Alternatively, you can import the mixins.less into the stylesheet you want. At the beginning of your LESS file, use:

`@import "mixins";`

Usage

------------

### Rounded Corners ###

Set the border radius. Accepts pixels or percentages.

Have a border radius all around: `.border-radius(5px);`

Create a circle: `.border-radius(50%);`

### Opacity ###

Set the opacity of any element. This will set the opacity of the element plus its children. For just setting the opacity of a background, look at Background Opacity

`.opacity(0.5);`

### Background Alpha ###

Creates a transparent background. The contents of the element will stay at normal capacity.

`.background-alpha(#000, 0.5);`

### Box Shadow ###

Create a box shadow. Accepts 4 options: `.box-shadow(@x-size, @y-size, @blur, @color, @spread);`

`.box-shadow(2px, 2px, 5px, #333, 0px);`

### Box Shadow (Inset) ###

Create an inner box shadow. Accepts 4 options: `.box-shadow(@x-size, @y-size, @blur, @color, @spread);`

`.box-shadow-inset(2px, 2px, 5px, #333, 0px);`

### Gradient (Horizontal) ###

Create a horizontal gradient. Accepts 2 colors: `.gradient-horizontal(#FFF, #E7E7E7);`

### Gradient (Vertical) ###

Create a vertical gradient. Accepts 2 colors: `.gradient-vertical(#FFF, #E7E7E7);`

### CSS3 Transition ###

Applies a CSS3 transition to an element. This will be used to transition CSS effects like :hover. 

`.transition(@type, @time, @ease);`

`.transition(all, 5s, ease-in-out);`

### CSS3 Transforms ###

This includes the simple CSS3 transforms. I'm currently working on a CSS3 animation library to help speed up CSS3 animations. Coming soon...

These transforms include:

- `.transform(@deg);`

- `.scale(@multiplier);`

- `.rotate(@deg);`

- `.skew(@deg, @deg2);`

These can be used on :hover actions to create cool effects.