Bootstrap.less

Today I want to present you Bootstrap.less. It is a tiny library for the LESS language and provides some nice shortcuts. They are also cross-browser-compatible. Among a grid system, font management and shadows and some more there are two features which I’m using quite often:

Rounded Corners

If you want to add rounded corners to a div you can use the following snippet:

@import 'bootstrap.less';
div.my-class {
    .border-radius( 5px );
}

As you can see you first have to import the library to your less file. Then you can use the border-radius mixin to add rounded corners. If you compile the less it will output the following css which should be suitable for all modern browsers:

div.my-class {
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Gradients

You can easily create gradients with bootstrap.less:

@import 'bootstrap.less';
div.my-class {
    #gradient > .vertical( rgb( 0, 0, 0 ), rgb( 100, 100, 100 ) );
}

This will create you a nice gray css gradient.

I hope you’ll have a look at Bootstrap.less and find it also as useful as I do.

Tags: bootstrap.less, css, less