MultiMarkdown CMS now incorporates "LESS"

02/13/2010 10:34:37
tags: web, server, css

I recently re-engineered the CSS and div structure of my layout to work better. Specifically, I used some ideas from Matthew James Taylor to allow the content to be described before the sidebar, and for the sidebar to be switched from right to left with a single change. This required adding one more div to my overall structure, and reworking the math on the CSS to achieve the proper proportions.

It occurred to me that because of the complicated setup, it would require a calculator and lots of debugging any time I wanted to change the width of a column, or the spacing between them.

Which then brought up the idea of using LESS. LESS is a way of creating CSS that allows a bit more flexibility and shortcuts. It also allows the use of variables and “math”. So I could set up a list of variables to specify the desired width of the main content, the sidebar, and the margins for each. LESS then calculates the required settings, and generates the CSS. So a few quick changes can then reengineer the entire layout, and I don’t have to break out a calculator. It took some time debugging the changes to get everything worked out, but I think it works properly now.

If you don’t want to use LESS, you can look at the LESS source, do the calculations yourself, and then manually update the css. Or you can stick with the default proportions. But if you use CSS much, it’s worth at least taking a look at LESS.

Note: The only problem I have encountered with LESS so far is that it doesn’t handle the @media command, so I had to use a separate css file for print media.

Similar Pages