A little look at the lovely Less Framework

03 May 2011  Kelly Milligan

It's an exciting time for front-end web development. More mobile devices capable of full web support, an active move away from IE6, and fantastic new, standards driven tools!

Overview: The less framework is built using CSS3 media queries. It allows you to apply different CSS styles to a page, depending on chosen criteria.

The best way for me to explain is to give you an example: Say you have a web page, and you want it to scale to fit across computers, tablets, and smartphones. Using media queries this becomes very easy! You can apply certain CSS (say, make text smaller, make images smaller, flow a 5 column grid into 3 columns) if the criteria is met (if the width of the browser window is less than specified tiers of pixels).

The Result: a single page, which displays the same content (and HTML markup) in the most optimal way for your device.

The Caveats: CSS3 only works on the newer browsers, such as Safari 4 & 5, Chrome, Firefox 4, Internet Explorer 9. Apple products such as the iPhone and iPad, and Android phones/tablets ARE supported here. It’s not all bad though, your site’s design will simply fall back to your base, computer screen sized design if CSS3 is not supported.

What it means: A website that works across multiple platforms, where content updates apply across all devices with one change. Mobile web browsing is trending upward, ensuring the best readability of your site’s content across all devices doesn’t need to be difficult!

You can find out more here: http://lessframework.com/

And some examples here:
http://edenspiekermann.com/
http://www.madebysplendid.com/
http://naomiatkinson.com/
Try resizing your browser on these examples! You can see first hand how the Less Framework allows these websites to alter their content to your browser window size.