TechDocs/Mainpage/CSSwithLESS

General information on working with the FSFE website source

/!\ Please, read the information on TechDocs/Mainpage/Editing, it is necessary for getting access to web pages and coordinating your work with others.

Edit the CSS with LESS

The design of fsfe.org 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.

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 and just better style. Please read 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.

Setup and build

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):

sudo apt-get install node-less

or

sudo apt-get install npm
sudo npm install -g less

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, /look/fsfe.min.css is compiled from /look/fsfe.less.

/!\ These CSS files are minified: do not edit these CSS files. Rather, you will have to edit the LESS files and then compile them to the minified CSS.

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

lessc fsfe.less -x fsfe.min.css

/!\ Remember, that 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

If you use local builds, make sure to use the updated CSS files. For example, fsfe-preview --copy look/ from within the repository's root directory will update it in your previews.

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, please, have a look at the official documentation.

TechDocs/Mainpage/CSSwithLESS (last edited 2018-11-07 16:58:49 by max.mehl)