LESS3 is an extension to LESS to allow you to start using CSS3 properties today with workarounds for legacy browsers.
Ruby
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
stylesheets
test
utils
.gitignore
readme.mdown

readme.mdown

LESS3

LESS3 is an extension to LESS to allow you to start using CSS3 properties today. But not merely that. It is becoming increasingly popular to design your app or site in the browser without working in photoshop. This is becoming easier with CSS3 properties like box-shadow, border-radius and gradients. To know more about this topic, I recommend reading Megan Fischer's amazing article about it.

This approach is in some ways amazingly liberating and speeds up things considerably. However when the time comes that you have to make sure that your design works in most browsers - the boring part begins and you have to actually create your gradients in Photoshop, add three times the code for every possible vendor prefix and workaround rgba incompatibility.

How does LESS3 help you?

It includes intelligent mixins that abstract most of these boring parts away for you. I recommend to still check how your site looks in legacy browsers, however it will do most of the heavy lifting for you. Let's look at some examples:

First you have to import less3:

@import '<path_to_less3>/stylesheets/css3';

Then you can start using the mixins.

The postprocessor

The postporcessor is a Macruby script in the utils directory. It is meant to be used mainly in the phase of making sure that your design works in all browsers. As you will see, it analyzes your (compiled) stylesheets and creates images and IE stylesheets and other recommendations to make this task much less of a pain.

You can run it by this command

macruby utils/postprocessor.rb <path to stylesheet 1> <path to stylesheets 2 ...>

Currently this will only work on 10.6 Macs (also remember to get the latest Macruby and HotCocoa), however if anyone finds a way how to do this in a cross-platform way then please fork and send in the patch.

RGBA color

Instead of writing:

background-color: rgba(20, 30, 120, 0.8);

write:

.background-color(rgba(20, 30, 120, 0.8));

which produces backwards-compatible code:

background-color: #141e78;
background-color: rgba(20, 30, 120, 0.8);

The same works with color and border properties.

Also note that when you use the postprocessor on your stylesheet (see gradients below), it will output to stdout an IE only stylesheet simulating rgba color backgrounds using a proprietary Microsoft filter. You may consider using this in a conditional comment. Similar workarounds are welcome (although we are trying to keep this in the CSS + images level. You can always do a Google search for Javascript based workarounds).

.background(rgba(r,g,b,a));

Use this helper if you want to set a background to a rgba value but you don't want to set a background image or gradient. This will add similar declarations to the above mentioned .background-color, but also adds a background: -postprocessor-rgba-bg(rgba(...)); declaration. The postprocessor will turn that into a data-url 1x1 pixel rgba png image that is tiled on the background. This adds support for older Firefox and Opera browsers (and IE8). However for older versions of IE you will need the step above.

Rounded corners

.border-radius(5px);

produces

-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Also included is the shortcut for specifying all of the corners differently:

.border-radii(3px, 5px, 8px, 1em);

Produces

-moz-border-radius-topleft: 3px;
-khtml-border-top-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-moz-border-radius-topright: 5px;
-khtml-border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 1em;
-khtml-border-bottom-left-radius: 1em;
-webkit-border-bottom-left-radius: 1em;
border-bottom-left-radius: 1em;
-moz-border-radius-bottomright: 8px;
-khtml-border-bottom-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;

Imagine having to type all that by hand. Phew.

Box Shadows

.box-shadow(0, 3px, 5px, rgba(0,0,0,0.2));

produces

-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);

Background size

.background-size(width, height);

Multi-column layouts

We support the following properties of the multi-column layout module:

  • .column-width(width);
  • .column-count(number);
  • .column-gap(width);
  • .column-rule(width, type, color);

Use as you would expect, just remember to put commas between arguments.

Transforms

.transform(rotate(4deg) translate(100px));

produces

-webkit-transform: rotate(4deg) translate(100px);
-moz-transform: rotate(4deg) translate(100px);
-o-transform: rotate(4deg) translate(100px);
transform: rotate(4deg) translate(100px);

transform-origin is also supported via .transform-origin().

Transitions

Apparently CSS3 transitions are appearing in Firefox 3.7 so now they are in LESS3 via

.transition-property(top);
.transition-duration(3s);
.transition-timing-function(ease-in);

Which produces:

-webkit-transition-property: top;
-o-transition-property: top;
-moz-transition-property: top;
transition-property: top;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s;
-moz-transition-duration: 3s;
transition-duration: 3s;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
transition-timing-function: ease-in;

Also the shorthand .transition() is supported per spec.

Gradients

Since gradients are such an important part of the design, one cannot accept that most browsers won't render them. So I have decided to create a workaround. Use either the general purpose .linear-gradient:

.linear-gradient(@start_position:left bottom, @end_position: left top, @percentage_where_to_start_color1:0.70, @color1:rgba(0,0,0,1), @percentage_where_to_start_color2:0.80, @color2:rgba(255,255,255,1), @fallback_image_width:100, @fallback_image_height:100)

Or the specialized helpers .horizontal-gradient and .vertical-gradient, where you generally don't have to fool with the directions and are generally recommended.

This will produce correct incantations for Gecko and Webkit browsers. It will also produce this weird -postprocessor-linear-gradient incantation. This should not disturb you while designing in your favorite browser (unless your favorite browser is Internet Explorer in which case this project is not for you). The postprocessor will replace all -postprocessor-linear-gradient with a url() statement that links to an image that the script helpfully generates for you. Note that gradients should be specified only with rgba color (a limitation I plan on removing).

Previewing less fortunate browsers

Of course you can actually fire up a bizzare browser and test in there, but this may be inconvenient for some reason (eg. you're on a Mac).

If you just instead of @import 'css3'; write @import 'css3-crippled';: All of the mixins will include only the backwards compatible code (or none as with .box-shadow and .border-radius).

Also, Patches accepted ;)