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!";
}
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 */
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;
}
@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;
}
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;
}
Background clip
Write
.class {
.background-clip(padding);
}
Get
.class {
-moz-background-clip:padding;
background-clip:padding-box;
}
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);
}
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;
}
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);
}
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 );
}
Background size
Define the size of a background image.
Write
.class {
.background-size(cover);
}
Get
.class {
-moz-background-size: cover;
background-size: cover;
}
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;
}
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);
}
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;
}
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;
}
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;
}
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);
}
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;
}
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;
}
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.