Source files of fsfe.org, pdfreaders.org, freeyourandroid.org, ilovefs.org, drm.info, and test.fsfe.org. Contribute: https://fsfe.org/contribute/web/ https://fsfe.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

115 lines
3.8 KiB

<?xml version="1.0" encoding="UTF-8" ?>
<html>
<version>1</version>
<head>
<title>Documentation - LESS CSS</title>
</head>
<body class="article" microformats="h-entry">
<p id="category"><a href="/contribute/web/">Webmastering</a></p>
<h1 class="p-name">Edit the CSS with LESS</h1>
<div class="e-content">
<p id="introduction">
The new design makes heavy use of <a
href="http://getbootstrap.com/">bootstrap’s</a> 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.
</p>
<h2>Why LESS?</h2>
<p>
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
<a href="http://www.lesscss.org/#docs">official LESS documentation</a> to
learn how to edit in the less language.
</p>
<p>
If you’re not sure about LESS, do not worry, you can still write plain CSS in LESS files.
</p>
<h2>Setup and build</h2>
<p>
First, you need to install LESS. Follow the <a href="http://lesscss.org/">official instructions</a> or install it from your distribution’s package manager (the package is somtimes called <code>lessc</code> or <code>node-less</code> in Debian). Now you can write your style in <code>.less</code> files and you will be able to compile them into CSS.
</p>
<p>
The main stylesheet file for all pages on fsfe.org is
<code>/look/style.less</code>. Then, depending on which part of the
websites you’re in, the build system is going to select a css file. For
instance,</p>
<ul>
<li>fsfe.org has <code>/look/fsfe.min.css</code> which is compiled from <code>/look/fsfe.less</code>,</li>
<li>fsfe.org/fellowship has <code>/look/fellowship.min.css</code> which is compiled from <code>/look/fellowship.less</code>.</li>
</ul>
<p>
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.
</p>
<p>
If you modify fsfe.less, you need to compile your modifications into css by running:
</p>
<pre class="term"><code>lessc fsfe.less -x fsfe.min.css</code></pre>
<p>
Then you can commit your changes with subversion.
</p>
<p>
If you modify style.less, you will need to compile all css. Here’s the current list:
</p>
<pre class="term"><code>lessc fsfe.less -x fsfe.min.css</code>
<code>lessc fellowship.less -x fellowship.min.css</code>
<code>lessc valentine.less -x valentine.min.css</code></pre>
<h2>Bootstrap</h2>
<p>
Bootstrap’s LESS is located in <code>/look/bootstrap/</code>. 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
<code>/look/bootstrap/variables.less</code>.
</p>
<p>
If you want to know more about how to use Bootstrap, I refer you to the
<a href="http://getbootstrap.com/css/">official documentation</a>.
</p>
</div>
<!--/e-content-->
</body>
<sidebar promo="about-fsfe">
<div id="related-content">
<h3>Other howtos:</h3>
<ul>
<li>
<a href="/contribute/web/tagging.html">Use tags and article metadata, implement a country page</a>
</li>
<li>
<a href="/contribute/template.html">A template article, to use the new webdesign</a>
</li>
</ul>
</div>
</sidebar>
<date>
<original content="2014-01-24"/>
</date>
<author id="roy" />
</html>
<!--
Local Variables: ***
mode: xml ***
End: ***
-->