Webmastering

Edit the CSS with LESS

Written by   Aktualizované  

The new design makes heavy use of bootstrap’s LESS variables. This can be very powerful, but that means you will have to learn how to compile LESS into CSS when you modify fsfe.org stylesheets.

First, you need to install LESS. Follow the official instructions or install it from your distribution’s package manager (the package is somtimes called lessc or node-less in Debian). Now you can write your style in .less files and you will be able to compile them into CSS.

The main stylesheet file for all pages on fsfe.org is /look/style.less. Then, depending on which part of the websites you’re in, the build system is going to select a css file. For instance,

  • fsfe.org has /look/fsfe.min.css which is compiled from /look/fsfe.less,
  • fsfe.org/fellowship has /look/fellowship.min.css which is compiled from /look/fellowship.less.

These css files are minified: do not edit these css files. Rather, you need to edit the less files, and then compile them to the minified css.

If you modify fsfe.less, you need to compile your modifications into css by running:

lessc fsfe.less -x fsfe.min.css

Then you can commit your changes with subversion.

If you modify style.less, you will need to compile all css. Here’s the current list:

lessc fsfe.less -x fsfe.min.css
lessc fellowship.less -x fellowship.min.css
lessc valentine.less -x valentine.min.css

Why LESS?

You might wonder what’s the point of using LESS. Fortunately, there’s a reason beyond producing minified css. Indeed, LESS is very, very useful to create more powerful, more simple, simply better style. I direct you to the official LESS documentation to learn how to edit in the less language.

If you’re not sure about LESS, do not worry, you can still write plain CSS in LESS files.

Bootstrap

Bootstrap’s LESS is located in /look/bootstrap/. These files should be left unchanged and they should be updated to later versions of bootstrap with care. However, you can edit the variables in /look/bootstrap/variables.less.

If you want to know more about how to use Bootstrap, I refer you to the official documentation.