Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Lots of Love for LESS
branch: master

This branch is 75 commits behind mateuszkocz:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


3L was made for YOU to help you create awesome websites
and fill the Internet with excessive amount of Love! ♥

Keep up your good work!

Yours faithfully,
Mateusz ★ Kocz 		->

3L:				->

Watch 3L on Github:		->

Submit a bug issue:		->

Download .zip:				->

Licensed under the Apache License v2.0

Version: 1.3.3 (2012.09.09)
LESS version: 1.3.0 (included in 3l's .zip)

Get your own LESS.js:	->



Inside the .zip file you have:

    my-style.less – here you'll be writing you code,
    3L-mini.less – the basic file with mixins,
    3L-maxi.less – mixins with documentation and examples,
    less.js – the newest, compatible with 3L version of LESS.js,
    animations.less – mixins required for declaring @keyframes,
    bootstrap – files to be replaced in Bootstrap's less directory in order to use 3L together with Bootstrap.

Copy my-style.less, 3L-mini.less and less.js into the folder with your project. Place the code below in the <head> section of your .html file.

	<link rel="stylesheet/less" type="text/css" href="my-style.less" />
	<script src="less.js" type="text/javascript"></script>

You can now start writing your own style in my-style.less. Check out the documentation for class names available to use and make your code awesome!



Using animations with 3L is pretty easy. Copy the animations less files (animationX.less) to the folder where you have your style sheet. In your code just type @import "animation1" (or any other number), create a class .animation1 (or any other) and declare your animation. 3L will make @keyframes for you. Now just use this animation in any element you want with .animation() class.

	@import "animation1";
	.animation1 () {
		/* your @keyframes rules */
	.someClassName {
		.animation(.animation1 1s);

How to make 3L compatible with Bootstrap?

It's easy! First you need to download pre-compiled Bootstrap (tested on v.2.0.2) with LESS files. Get it here -> and unzip it. Then, in your downloaded 3L folder, you have a bootstrap folder with 2 files: bootstrap.less and mixins.less. Replace Bootstrap's original files in less folder with those two. After that just copy and paste 3l-mini.less (and all animations if you wish to use them) to the Bootstrap's less folder and create some awesome website!


Where are my grids?

3L doesn't have a grid system implemented. It is not meant to have any style included. Of course grids are cool so create yours with Gridpak —> . Gridpak gives you a responsive grid in LESS file so you can use it together with 3L.


Compiler I use fail to compile 3L!

Unfortunately not all compilers can deal with some of the 3L classes. The hardest to compile are opacity in percentages (it uses a small piece of JavaSript), keyframes and guarded mixins. I strongly encourage you to use WinLess (also the online version) as it works very well with all 3L classes.

If you're on a Mac and compiler you use was able to deal with all the issues stated above, please, let me know (!

Other solution would be to delete the option to declare opacity in percentages (it's the biggest class in opacity block in 3L.less file and uses JavaScript). If it still doesn't help, you seriously need to consider getting a better compiler compatible with all LESS functionality!


I've found a bug (in your English)

That's great! Please, submit an issue via GitHub, so I'll get it fixed ASAP. ->

If you find an error in language — be it on this website or in 3L's documentation — do not hesitate to also point that out! 3L is learning English very hard!


After compilation I have many comments in my style sheet

The reason is that you're using 3L-maxi.less that has documentation included. Your compiler leaves the comments intact. Solution is pretty easy — use either 3L-mini.less (if you use my-style.less 3L-mini is the default) or minify your CSS. Actually you should always minify CSS files so even if you were using 3L-maxi.less, those comments will be deleted eventually.
Something went wrong with that request. Please try again.