Announcing LESS CSS Toolkit ~ Dan Ott

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:

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;
}

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;
}

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;
}

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;
}

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, 0.3);
  -moz-box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
}

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;
}

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;
}

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;
}

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;
}

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);
}

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;
}

CSS Transitions

.transition(@transition)

Usage:

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

Will result in:

.myElement {
  -webkit-transition: all ease-out 0.5s;
  -moz-transition: all ease-out 0.5s;
  -o-transition: all ease-out 0.5s;
  -ms-transition: all ease-out 0.5s;
  transition: all ease-out 0.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.