Simple mixin library for sass and less

This is a simple set of tools that you can include in your projects if you wish. It is not a framework; you can simply pick and choose what you want to use, and if you don't use them, you won't see them in your compiled CSS. You are then free to add any additional tools your project requires, and we can add them here if they're likely to be useful in other projects too.

Made by

Benn Pearson & Pete Naish

Folder structure

tools
|
+-- functions // maths and calculations
|   |
|   +-- _em-calc.scss
|   +-- _grid--flex.scss
|   +-- _percentage.scss
|   +-- _strip-units.scss
|
+-- mixins // prefixers etc
|   |
|   +-- _animation.scss
|   +-- _background.scss
|   +-- _border-radius.scss
|   +-- _font-face.scss
|   +-- _media-query.scss
|   +-- _media-query--hi-dpi.scss
|   +-- _prefix.scss
|   +-- _transform.scss
|   +-- _transition.scss
|
+-- helpers // common tasks
|   |
|   +-- _clearfix.scss
|   +-- _hide-text.scss
|   +-- _image-replacement.scss
|   +-- _image--retina.scss
|
+-- _all.scss

Functions

em-calc

grid--flex

percentage

strip-units

Mixins

font-face

media-query

media-query--hi-dpi

transform

transition

Helpers

clearfix

hide-text

image-replacement

image--retina

To do

Add Vertical Rhythm mixin

compact

flex-grid

golden-ratio

grid-width

linear-gradient

modular-scale

radial-gradient

shade

tint

button

clearfix

hide-text

position

prefixer

retina-image

size

triangle

HTML5 Inputs

font-family

timing-functions

animation

background

border-radius

appearance

backface-visibility

border-image

box-sizing

columns

flex-box

font-face

inline-block

hidpi

image-rendering

keyframes

placeholder

perspective