Thoughts

Announcing LESS CSS Toolkit

--- layout: thoughts author: Dan Ott title: "Announcing LESS CSS Toolkit" url_title: announcing-less-css-toolkit permalink: thoughts/2011/12/06/announcing-less-css-toolkit.html post_url: thoughts/2011/12/06/announcing-less-css-toolkit published: true category: thoughts tags: - Front End - css date: 2011-12-06 16:31:15 slugdate: 2011-12-06 summary:

I've recently starting developing using LESS CSS (lesscss.org), and quickly decided that I would benefit from a toolkit containing mixins that I would use over and over, such as border-radius or box-shadow.

Enter LESS CSS Toolkit.

old_entry_id: 74 ---

I've recently starting developing using LESS CSS (lesscss.org), and quickly decided that I would benefit from a toolkit containing mixins that I would use over and over, such as border-radius or box-shadow.

Enter LESS CSS Toolkit. You can import this file at the beginning of your LESS project, and then have access to the following mixins:

What you get:

Animation

.animation(@name, @duration, @iteration-count, @timing)

Usage:

.myElement{ .animation(myAnimationName, .5s, 1, ease-in-out); }

Will result in

.myElement{
    -moz-animation-name: myAnimationName;
    -moz-animation-duration: 0.5s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-name: myAnimationName;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-name: myAnimationName;
    -ms-animation-duration: 0.5s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease-in-out;
    -o-animation-name: myAnimationName;
    -o-animation-duration: 0.5s;
    -o-animation-iteration-count: 1;
    -o-animation-timing-function: ease-in-out;
    animation-name: myAnimationName;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

back to top

Background Properties

.background-clip(@clip), .background-origin(@origin) and .background-size(@size)

Usage:

.myElement{ .background-clip(padding-box); .background-origin(border-box) .background-size(250px 150px);

Will result in

.myElement{
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;

    -moz-origin-size: border-box;
    -o-origin-size: border-box;
    -webkit-origin-size: border-box;
    origin-size: border-box;

    -moz-background-size 250px 150px;
    -o-background-size: 250px 150px;
    -webkit-background-size: 250px 150px;
    background-size: 250px 150px;
}

back to top

Border Image

.border-image(@img, @number, @repeat: stretch)

Usage:

.myElement{ .border-image(url(img.gif), 25 25 25 25, round round); }

Will result in:

.myElement{
    -moz-border-image: url(img.gif), 25 25 25 25, round round;
    -webkit-border-image: url(img.gif), 25 25 25 25, round round;
    -ms-border-image: url(img.gif), 25 25 25 25, round round;
    -o-border-image: url(img.gif), 25 25 25 25, round round;
    border-image: url(img.gif), 25 25 25 25, round round;
}

back to top

Border Radius

.border-radius(@radius)

Usage:

.myElement{ .border-radius(5px); }

Will result in:

.myElement{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

back to top

Box Shadow

.box-shadow(@shadow)

Usage:

.myElement{ .box-shadow(3px 3px 2px rgba(0,0,0,.3)); }

Will result in:

.myElement{
    -webkit-box-shadow: 3px 3px 2px rgba(0,0,0,.3);
    -moz-box-shadow: 3px 3px 2px rgba(0,0,0,.3);
    box-shadow: 3px 3px 2px rgba(0,0,0,.3);
}

back to top

Box Sizing

.box-sizing(@sizing)

Usage:

.myElement{ .box-sizing(border-box); }

Will result in:

.myElement{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

back to top

CSS Columns

.columns(@columnValue, @gap: normal, @rule: none)

Usage:

.myElement{ .columns(3); }

Will result in:

.myElement{
    -moz-columns: 3;
    -moz-column-gap: normal;
    -moz-column-rule: none;

    -webkit-columns: 3;
    -webkit-column-gap: normal;
    -webkit-column-rule: none;

    columns: 3;
    column-gap: normal;
    column-rule: none;
}

back to top

Easy Clear

.easyclear()

Applies an updated easy clear fix to the :after psuedo-element (for times when overflow:auto isn't an option)

Usage:

.myElement{ .easyclear; }

Will result in:

.myElement:after{
    visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}

back to top

FlexBox Properties

.flexbox(@orient: horizontal, @pack: start, @align: stretch, @direction: normal)

.box-flex(@flex: 1)

Usage:

.myElement{ .flexbox; }
.myElement div{ .box-flex; }

Will result in:

.myElement{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: start;
    -webkit-box-align: stretch;
    -webkit-box-direction: normal;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: start;
    -moz-box-align: stretch;
    -moz-box-direction: normal;

    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: start;
    -ms-box-align: stretch;
    -ms-box-direction: normal;

    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: start;
    -o-box-align: stretch;
    -o-box-direction: normal;

    display: box;
    box-orient: horizontal;
    box-pack: start;
    box-align: stretch;
    box-direction: normal;
}
.myElement div{
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    box-flex: 1;
}

back to top

Gradient

.gradient(@startcolor, @stopcolor, @startpoint: center top, @endpoint: center bottom)

This creates a simple, two-color gradient. It defaults to top-to-bottom.

Usage:

.myElement{ .gradient(#000, #fff); }

Will result in:

.myElement{
    background: -webkit-gradient(linear, center top, center bottom, color-stop(0, #000), color-stop(0.5, #fff));
    background: -webkit-linear-gradient(center top , #000, #fff);
    background: -o-linear-gradient(center top , #000, #fff);
    background: -moz-linear-gradient(center top , #000, #fff);
    background: linear-gradient(center top , #000, #fff);
}

back to top

Transform Properties

.transform(@transform)

.transform-origin(@origin)

Usage:

.myElement{ .transform(rotate(45deg)); .transform-origin(center center) }

Will result in:

.myElement{
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

    -moz-transform-origin: center center;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}

back to top

CSS Transitions

.transition(@transition)

Usage:

.myElement{ .transition(all ease-out .5s); }

Will result in:

.myElement{
    -webkit-transition: all ease-out .5s;
    -moz-transition: all ease-out .5s;
    -o-transition: all ease-out .5s;
    -ms-transition: all ease-out .5s;
    transition: all ease-out .5s;
}

That's all for now

This is a work in progress, so keep track of the project on github as I'll probably be adding to it down the line. Any suggestions are always welcome.