HOW TO: Get Started with the Less Framework

3 days ago by Christina Warren

For the past few years, CSS grid systems have become increasingly popular with web designers. Thanks to efforts like Nathan Smith’s 960.gs, designing with a grid is less complicated, and better looking sites can be crafted with ease.

One of my favorite CSS grid systems of late is Less Framework. Now in its fourth revision, Less Framework takes the power of a CSS grid system and adds in support for CSS media queries to support multiple design and typography layouts.

In May 2010, Ethan Marcotte’s “Responsive Web Design” helped spur a movement of building websites designed to fluidly adapt to various platforms and device sizes — think mobile optimized sites and tablet-specific layouts — without the need for an entirely different design or special URL.

Less Framework is, in my opinion, one of the best ways for web developers without lots of experience in designing responsive websites (or media queries in general) to take advantage of this new trend.

I am currently in the process of redesigning my own very out-of-date website and am using Less Framework as my base. Here are some tips and tricks that I’ve come across for newcomers looking for a way to get started using Less Framework or just testing the waters of responsive web design.

Knowing the Basics

Created by Joni Korpi, Less Framework is built on a single grid and includes four layouts and three different typography presets. The default layout is a 10-column, 992-pixel grid. This layout is what larger screens or browser windows will display, and it is also the layout that older browsers lacking support for CSS3 media queries will use.

There is also an 8-column, 768-pixel layout for iPad and other tablets, as well as two mobile layouts. When you download Less Framework, you can also choose to include a retina media query that targets devices — like the iPhone 4 and iPod touch fourth generation — that use a device-pixel ratio of 2 or more.

Visit LessFramework.com and resize your browser to see the implementation in action.

Text, images and columns adapt to the needs and size of the web browser or device. It’s a really great way to create a design that can be optimized across platforms.

Guides and Templates

• Sitepoint’s Guide to Responsive Web Design with HTML5 and the Less Framework 3 — Sitepoint’s guide to using Less Framework and HTML5 in creating responsive web design is a great starting point for new or unsure designers. This guide was written for the previous version of Less Framework, but the tips and information still carry over to the new version.
• Less Grid Overlay — Arnau March created his own grid overlay plugin for help in developing his own Less Framework 4 site. The tool works the same way as the 960 Gridder and it uses jQuery to display a proper grid overlay on your website. This is especially useful for designers who like to design in the browser.
• Less Guides 4 — Ari Palo created guides for Adobe Fireworks, Photoshop and Illustrator. Each guide contains grids for each layout.
• Mark Host’s Less Framework 4 PSD — Mark Host created a PSD that combines various Less Framework grids from Ari Palo and Henry Moran. If you use Photoshop, you might want to start with this file.
• Less Plugin for Compass — Compass is a stylesheet framework that is designed to make stylesheets easier to build and maintain. William Wells created this plugin for Compass that utilizes Less Framework 4 and can really help speed up development time.

Less-Ready Themes

A number of themes and templates are already available for platforms like WordPress that take advantage of Less Framework. They include:

• Whiteboard Framework 3.1.2 — Whiteboard is a WordPress framework designed to take advantage of not just Less Framework, but also various WordPress features. Using Whiteboard, theme developers can create their own responsive WordPress themes and still easily take advantage of the features in WordPress 3.0 and up.
• Less for Drupal — Steven Wood created Less as an HTML5 theme for Drupal 7
• Less Work for Mura — I’ll be honest, I’m not familiar with the Mura CMS. However Ryan Ward created this free theme based on Less Framework 4.

What do you think of responsive web design and frameworks and grids like Less Framework? Let us know in the comments.