|
Size: 3075
Comment: Adds in-broser dev Less info
|
← Revision 23 as of 2020-04-29 14:13:35 ⇥
Size: 0
Comment: This became obsolete
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| <<TableOfContents()>> = General information on working with the FSFE website source = /!\ Please, read the information on [[TechDocs/Mainpage/Editing|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 [[https://getbootstrap.com/docs/3.3/|bootstrap’s (3.0.3)]] LESS variables and components. 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 [[http://lesscss.org/|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 == === Editing the website locally === The website repo ships the Less in-browser compiler out of the box. Just reload the the page after you've changed a Less file. === Building manually === First, you need to install LESS. Follow the [[https://lesscss.org/|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 [[TechDocs/Mainpage/BuildLocally|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 [[https://getbootstrap.com/docs/3.3/css/|Bootstrap]], please, have a look at the official documentation. |
