Thoughts

Announcing LESS CSS Toolkit

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:

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

Will result in

1
.myElement {
2
  -moz-animation-name: myAnimationName;
3
  -moz-animation-duration: 0.5s;
4
  -moz-animation-iteration-count: 1;
5
  -moz-animation-timing-function: ease-in-out;
6
  -webkit-animation-name: myAnimationName;
7
  -webkit-animation-duration: 0.5s;
8
  -webkit-animation-iteration-count: 1;
9
  -webkit-animation-timing-function: ease-in-out;
10
  -ms-animation-name: myAnimationName;
11
  -ms-animation-duration: 0.5s;
12
  -ms-animation-iteration-count: 1;
13
  -ms-animation-timing-function: ease-in-out;
14
  -o-animation-name: myAnimationName;
15
  -o-animation-duration: 0.5s;
16
  -o-animation-iteration-count: 1;
17
  -o-animation-timing-function: ease-in-out;
18
  animation-name: myAnimationName;
19
  animation-duration: 0.5s;
20
  animation-iteration-count: 1;
21
  animation-timing-function: ease-in-out;
22
}

back to top

Background Properties

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

Usage:

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

Will result in

1
.myElement{
2
    -moz-background-clip: padding-box;
3
    -webkit-background-clip: padding-box;
4
    background-clip: padding-box;
5
6
    -moz-origin-size: border-box;
7
    -o-origin-size: border-box;
8
    -webkit-origin-size: border-box;
9
    origin-size: border-box;
10
11
    -moz-background-size 250px 150px;
12
    -o-background-size: 250px 150px;
13
    -webkit-background-size: 250px 150px;
14
    background-size: 250px 150px;
15
}

back to top

Border Image

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

Usage:

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

Will result in:

1
.myElement {
2
  -moz-border-image: url(img.gif), 25 25 25 25, round round;
3
  -webkit-border-image: url(img.gif), 25 25 25 25, round round;
4
  -ms-border-image: url(img.gif), 25 25 25 25, round round;
5
  -o-border-image: url(img.gif), 25 25 25 25, round round;
6
  border-image: url(img.gif), 25 25 25 25, round round;
7
}

back to top

Border Radius

.border-radius(@radius)

Usage:

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

Will result in:

1
.myElement {
2
  -moz-border-radius: 5px;
3
  -webkit-border-radius: 5px;
4
  -o-border-radius: 5px;
5
  border-radius: 5px;
6
}

back to top

Box Shadow

.box-shadow(@shadow)

Usage:

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

Will result in:

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

back to top

Box Sizing

.box-sizing(@sizing)

Usage:

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

Will result in:

1
.myElement {
2
  -moz-box-sizing: border-box;
3
  -webkit-box-sizing: border-box;
4
  box-sizing: border-box;
5
}

back to top

CSS Columns

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

Usage:

1
.myElement{ .columns(3); }

Will result in:

1
.myElement {
2
  -moz-columns: 3;
3
  -moz-column-gap: normal;
4
  -moz-column-rule: none;
5
6
  -webkit-columns: 3;
7
  -webkit-column-gap: normal;
8
  -webkit-column-rule: none;
9
10
  columns: 3;
11
  column-gap: normal;
12
  column-rule: none;
13
}

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:

1
.myElement{ .easyclear; }

Will result in:

1
.myElement:after {
2
  visibility: hidden;
3
  display: block;
4
  font-size: 0;
5
  content: ' ';
6
  clear: both;
7
  height: 0;
8
}

back to top

FlexBox Properties

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

.box-flex(@flex: 1)

Usage:

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

Will result in:

1
.myElement {
2
  display: -webkit-box;
3
  -webkit-box-orient: horizontal;
4
  -webkit-box-pack: start;
5
  -webkit-box-align: stretch;
6
  -webkit-box-direction: normal;
7
8
  display: -moz-box;
9
  -moz-box-orient: horizontal;
10
  -moz-box-pack: start;
11
  -moz-box-align: stretch;
12
  -moz-box-direction: normal;
13
14
  display: -ms-box;
15
  -ms-box-orient: horizontal;
16
  -ms-box-pack: start;
17
  -ms-box-align: stretch;
18
  -ms-box-direction: normal;
19
20
  display: -o-box;
21
  -o-box-orient: horizontal;
22
  -o-box-pack: start;
23
  -o-box-align: stretch;
24
  -o-box-direction: normal;
25
26
  display: box;
27
  box-orient: horizontal;
28
  box-pack: start;
29
  box-align: stretch;
30
  box-direction: normal;
31
}
32
.myElement div {
33
  -moz-box-flex: 1;
34
  -webkit-box-flex: 1;
35
  -ms-flex: 1;
36
  -o-flex: 1;
37
  box-flex: 1;
38
}

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:

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

Will result in:

1
.myElement {
2
  background: -webkit-gradient(
3
    linear,
4
    center top,
5
    center bottom,
6
    color-stop(0, #000),
7
    color-stop(0.5, #fff)
8
  );
9
  background: -webkit-linear-gradient(center top, #000, #fff);
10
  background: -o-linear-gradient(center top, #000, #fff);
11
  background: -moz-linear-gradient(center top, #000, #fff);
12
  background: linear-gradient(center top, #000, #fff);
13
}

back to top

Transform Properties

.transform(@transform)

.transform-origin(@origin)

Usage:

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

Will result in:

1
.myElement {
2
  -moz-transform: rotate(45deg);
3
  -webkit-transform: rotate(45deg);
4
  -ms-transform: rotate(45deg);
5
  transform: rotate(45deg);
6
7
  -moz-transform-origin: center center;
8
  -webkit-transform-origin: center center;
9
  -ms-transform-origin: center center;
10
  transform-origin: center center;
11
}

back to top

CSS Transitions

.transition(@transition)

Usage:

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

Will result in:

1
.myElement {
2
  -webkit-transition: all ease-out 0.5s;
3
  -moz-transition: all ease-out 0.5s;
4
  -o-transition: all ease-out 0.5s;
5
  -ms-transition: all ease-out 0.5s;
6
  transition: all ease-out 0.5s;
7
}

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.