Less Guides 4

Helping your webdesign process when building sites with the brilliant Less Framework 4.

Less Framework?

Less Framework is a adaptive CSS grid system based on using inline media queries. Basically it's purpose is to make building websites for different screen sizes (from smartphones to desktop browsers) easier. More info at Less Framework -website.

Less Guides?

Yeah, less creation of guides for you when designing websites; because now you have the columns ready on the psd/png/ai document. Less Guides gives you Adobe Fireworks, Photoshop and Illustrator documents which contain guides for the grid system. And yes, they are real guides in the document.

Less Guides files also comes (since LG4 v2 also in .ai) with a simple graphic illustrating the 24px baseline grid. If you don't need it: simply delete the layer!

Also the Illustrator .ai file is laid out so, that if you set a gridline to every 24px with subdivision of 2 for example; you get the LF4 baselinegrid of 24px (and extra two 12px "subgrid") that vertically matches the "content wrap" or body area in the artboards. You can do that if you go to "Preferences > Guides and Grid".

Not seeing the guides?

If you don't see them, check "View > Guides > Show guides" is selected in Fireworks & Illustrator and if in Photoshop make sure "View > Show > Guides" and "View > Extras" is selected.

Get Less Guides

Download the zip-file (~255kb) now and start designing those awesome websites!

Zip-file contents


Well I just needed guides for designing pages for Less Framework, so I created ones for myself and shared them here. The real credit goes to Joni Korpi for the Less Framework 4.