Features

SEO Helper

Some usefull CSS properties to warn you if there're some SEO issues on your website. It's a development code only so make sure you remove it from the code when deploying to production.

Write .seo-helper(); Get img:not([alt]), img[alt=""], img[alt^=" "], a[href=""], a[href^=" "], a[href="#"], a[rel*="nofollow"], div:empty, span:empty, li:empty, p:empty, td:empty, th:empty, *[title=""], *[class=""], *[id=""] { outline: 2px solid red !important; outline-offset: 3px !important; }
head, title:empty, link, meta { display: block; }
title:empty:before { content: "You've left the <title> empty!" }
link:before { content: "You don't have a <title>!" }
title ~ link { display: none; }
meta[name="description"][content=""]:before, meta[name="description"][content=" "]:before { content: "You've left description empty!"; }

SEO helper full documentation

Normalize, reset, html5bp

Convenient way to use normalize.css, reset.css or HTML5 Boilerplate rules in your stylesheet.

Write .normalize();

/* OR */
.reset();

/* OR */
.h5bp();
Get /* normalize.css, reset.css or HTML 5 Boilerplate rules */

Normalize, reset and html5bp full documentation

Helper Classes

Usefull mixins made from HTML5 Boilerplate helper classes.

Write .logo { .ir(); }
.content-block { .clearfix(); }
Get .logo { border: 0; overflow: hidden; background-color: transparent; *text-indent: -9999px; }
.logo:before { content: ""; display: block; width: 0; height: 100%; }
.content-block { *zoom: 1; }
.content-block:before, .content-block:after{ content:" "; display:table; }
.content-block:after { clear:both; }

Helper classes full documentation

@font-face

Shortcut mixin for @font-face declaration.

Write .font-face('Ubuntu','Ubuntu-R-webfont','fonts/',400,normal); Get @font-face { font-family: 'Ubuntu'; src: url('fonts/Ubuntu-R-webfont.eot'); src: local('☺'), url('fonts/Ubuntu-R-webfont.woff') format('woff'), url('fonts/Ubuntu-R-webfont.ttf') format('truetype'), url('fonts/Ubuntu-R-webfont.svg') format('svg'); font-weight: 400; font-style: normal; }

@font-face full documentation

Box Sizing

Change the basic box-model to the one you want.

Write .class { .box-sizing(border-box); } Get .class { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }

Box sizing full documentation

Background clip

Write .class { .background-clip(padding); } Get .class { -moz-background-clip:padding; background-clip:padding-box; }

Background clip full documentation

Box shadow

Create shadow behind or inside elements. Multiple shadow supported.

Write .class { .box-shadow(1px 2px 3px black, inset 10px 20px 30px 40px rgba(0,0,0,.5)) } Get .class { -webkit-box-shadow: 1px 2px 3px black, inset 10px 20px 30px 40px rgba(0,0,0,.5); -moz-box-shadow: 1px 2px 3px black, inset 10px 20px 30px 40px rgba(0,0,0,.5); box-shadow: 1px 2px 3px black, inset 10px 20px 30px 40px rgba(0,0,0,.5); }

Box shadow full documentation

Border radius

Make your edges roundy. Mixins support elliptical radiuses and also there're mixins for specyfic corners.

Write .class { .border-radius(10px); } Get .class { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

Border radius full documentation

Opacity

Make your elements transparent. This mixin includes old IE filter property and lets you use percentages and integers to declare the level of opacity.

Write .class { .opacity(.5); /* OR */ .opacity(50); /* OR */ .opacity(50%); } Get .class{ opacity: 0.5; filter: alpha(opacity=50); }

Opacity full documentation

Gradients

Use gradient as a background-image.

Write .class { .gradient(orange,black); } Get .class { background-image: -moz-linear-gradient(top, orange 0%, black 100%); background-image: -webkit-linear-gradient(top, orange 0%,black 100%); background-image: linear-gradient(to bottom, orange 0%,black 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='orange', endColorstr='black',GradientType=0 ); }

Gradients full documentation

Background size

Define the size of a background image.

Write .class { .background-size(cover); } Get .class { -moz-background-size: cover; background-size: cover; }

Background size full documentation

Columns

Divide the content into columns. There are also mixins for all specyfic columns properties.

Write .class { .columns(2, 20px); } Get .class { -webkit-columns: 2 20px; -mox-columns: 2 20px; columns: 2 20px; }

Columns full documentation

Transformations

CSS3 2D and 3D transformations with mixins for all types of transformations and similar properties (transform-style, transform-origin, perspective, perspective-origin and backface-visibilty).

Write .class { .transform(translate3d(20%, 20%, 20%) scale(2)); } Get .class { -webkit-transform: translate3d(20%, 20%, 20%) scale(2); -moz-transform: translate3d(20%, 20%, 20%) scale(2); transform: translate3d(20%, 20%, 20%) scale(2); }

Transformations full documentation

Transitions

Animate the change in CSS properies' values. Mixin supports multiple transitions. There're also mixins for spesyfic transition properties.

Write .class { .transition(color .3s, height .5s); } Get .class { -webkit-transition: color .3s, height .5s; transition: color .3s, height .5s; }

Transitions full documentation

Animations

Animate your elements.

Write .class { .animation(animation 5s linear 0s infinite alternate); } Get .class { -webkit-animation: animation 5s linear 0s infinite alternate; animation: animation 5s linear 0s infinite alternate; }

Animations and @keyframes full documentation

User Select

Controls the selection model of an element.

Write .class { .user-select(none); } Get .class { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

User select full documentation

Filters

Advanced graphic filters in CSS. Supports multiple filters.

Write .class { .filter(blur(10px) brightness(.5)); } Get .class { -webkit-filter: blur(10px) brightness(.5); -moz-filter: blur(10px) brightness(.5); -ms-filter: blur(10px) brightness(.5); filter: blur(10px) brightness(.5); }

Filter full documentation

Border image

Use images as box borders.

Write .class { .border-image('/img/border.png', 50, 50, repeat); } Get .class { -webkit-border-image: url('/img/border.png') 50 50 repeat; -moz-border-image: url('/img/border.png') 50 50 repeat; -o-border-image: url('/img/border.png') 50 50 repeat; border-image: url('/img/border.png') 50 50 repeat; }

Border image full documentation

Flexible Box Model

Modern way to create layouts.

Write .class { .display-flex(); .flex-direction(row); } Get .class { display: -webkit-flex display: flex -webkit-flex-direction: row; flex-direction: row; }

Flex-box full documentation

How to use?

Basic use

Download 3L.zip file, unzip it and place it in your project. You can start editing style.less file or @import 3L.less into your previously created LESS stylesheet. Use .normalize() or .reset() classes if you want.

Namespacing

If you're using anoter mixins library you might want to put 3L into a namespace so the two libraries won't clash. Just type #3L {@import '3L/3L';} and the 3L will be fully contained in its own namespace. Access the mixins with #3L > .mixin().

Animations

@import "animation[1-5]" (they're in 3L/assets/animationsins) to your stylesheet, create a class .animation[1-5]() {/* @keyframes properties */} and declare your animation. 3L will make the prefixed @keyframes for you. Now just use this animation in any element you want with .animation() mixin.

Refer to the documentation

The 3L.less file has all documentation included. If you want to know more how to use a mixin, what parameters it takes, what browsers it supports or where you could find more information about a CSS property just find the corresponding section in the file or refer to the 3L wiki on GitHub.

Compile

All .less files should be compiled to .css. You can use native LESS compiler or you can try Winless, Prepross and CodeKit. Your output CSS file will be clean. Only the used mixins from 3L will be included, nothing else.