Thinking LESS of this blog

12 years ago

Over the weekend, I spent some time updating the CSS (cascading stylesheet) of this blog. There were two main purposes for this: Less and @media queries.

First of all, LESS. This is an open source compiler that imposes some much needed structure and programming ability to CSS. For example, it gives you variables, mixins, nested rules, arithmetic expressions, and so on. The compiler will compile code written as LESS into a standard CSS file, which the browser then uses as normal.

There are a couple of options with the compiler. You can either run the compiler client-side (it’s available as a less.js JavaScript file) or server-side (if you happen to be running node). Personally, I would rather neither of these options, and it so happens there are compilers out there that pre-compile your LESS into CSS, which you can then upload to your site. I chose WinLess: it’s a small Windows app that can also run in the background watching the LESS files or folders you define and automatically recompile them when changes are made. It also includes a minification option as well. There is another project called .LESS which rewrites the compiler as a .NET assembly that you can then use as an HttpHandler in your website; however, I have not tried this myself (also I’d prefer pre-compiling anyway, rather than having ASP.NET do it at run-time).

I’ve now rewritten my main CSS file as LESS – and in doing so found a whole bunch of small errors with the original CSS. This was a little painful to do, but rewarding in the end. The ability to declare colors and margin/padding values as variables was a huge benefit. I still have some tweaking here and there to tidy things up, but all in all I’m much happier with what I now have.

Second, @media queries. This is the ability, introduced in CSS2, to detect the abilities of the device the content is being displayed on and to introduce specific CSS behaviors depending on the screen size. I’ve had a few complaints over the years that my blog was not “netbook-” or “tablet-friendly”. The main text column is the only part that is resizable and on these devices it just gets squished to the point of being tedious to read.

I’ve now completed the first step to being small-device-friendly by restructuring my CSS and JavaScript to hide the sidebars of old and to attract the readers’ full attention to the blog posts. The next step is to add @media queries (and maybe some JavaScript) to the CSS so that the layout changes automatically to suit those smaller devices. (If you really want to see the sidebars, just click on the “extras” tab on the right. Dismiss them by clicking anywhere outside the sidebars.)

As mentioned, this is a work in progress. Tweaks will happen here and there, but this will remain the look for a while.