HTML and CSS development made quick and easy

In our development work we strive to use tools which increase our efficiency and the ease of code maintenance. This was one of the reasons for adding Ruby plus the Rails framework to our toolkit last year. Since then we have completed several projects using these technologies. However, there is more to life than the big issues: lower levels need the occasional makeover and optimum components just as much.

This year we found two such components. They make client side development easier. One is Haml, an indentation-based language suited for generating HTML and XML code. The other is its counterpart for generating CSS, called Sass. Both of them have the big advantage of lower levels of frills and repetition (DRY) in the code, as opposed to plain HTML/CSS editors or ERB (the traditional HTML editor in the Ruby world). Certainly, they have several further advantages. Let me emphasise nice output and expandability with filters for Haml and in the case of Sass the use of constants and simple operations, as well as CSS mix-ins.

At the Side of Sass we employed the Compass framework, used for pre-defining countless useful mix-ins, as well as providing flexible Sass transcripts to more popular CSS frameworks (such as YUI, Blueprint, etc.).

It worked fine for us, try it! If you are interested in the fine details of the advantages and the internal workings of these tools, I warmly recommend my presentation slides, originally prepared for our in-house pre-launch training: