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.

css.en.xhtml 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <html>
  3. <head>
  4. <title>Documentation - LESS CSS</title>
  5. </head>
  6. <body class="article web" microformats="h-entry" id="less-css-doc">
  7. <p id="category"><a href="/contribute/web/">Webmastering</a></p>
  8. <h1 class="p-name">Edit the CSS with LESS</h1>
  9. <div class="e-content">
  10. <p id="introduction">
  11. The new design makes heavy use of <a
  12. href="http://getbootstrap.com/">bootstrap’s</a> LESS variables. This
  13. can be very powerful, but that means you will have to learn how to compile
  14. LESS into CSS when you modify fsfe.org stylesheets.
  15. </p>
  16. <h2>Why LESS?</h2>
  17. <p>
  18. You might wonder what’s the point of using LESS. Fortunately, there’s a
  19. reason beyond producing minified css. Indeed, LESS is very, very useful to
  20. create more powerful, more simple, simply better style. I direct you to the
  21. <a href="http://www.lesscss.org/#docs">official LESS documentation</a> to
  22. learn how to edit in the less language.
  23. </p>
  24. <p>
  25. If you’re not sure about LESS, do not worry, you can still write plain CSS in LESS files.
  26. </p>
  27. <h2>Setup and build</h2>
  28. <p>
  29. 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.
  30. </p>
  31. <p>
  32. The main stylesheet file for all pages on fsfe.org is
  33. <code>/look/style.less</code>. Then, depending on which part of the
  34. websites you’re in, the build system is going to select a css file. For
  35. instance,</p>
  36. <ul>
  37. <li>fsfe.org has <code>/look/fsfe.min.css</code> which is compiled from <code>/look/fsfe.less</code>,</li>
  38. <li>fsfe.org/fellowship has <code>/look/fellowship.min.css</code> which is compiled from <code>/look/fellowship.less</code>.</li>
  39. </ul>
  40. <p>
  41. These css files are minified: do not edit these css files. Rather, you need
  42. to edit the less files, and then compile them to the minified css.
  43. </p>
  44. <p>
  45. If you modify fsfe.less, you need to compile your modifications into css by running:
  46. </p>
  47. <pre class="term"><code>lessc fsfe.less -x fsfe.min.css</code></pre>
  48. <p>
  49. Then you can commit your changes with subversion.
  50. </p>
  51. <p>
  52. If you modify style.less, you will need to compile all css. Here’s the current list:
  53. </p>
  54. <pre class="term"><code>lessc fsfe.less -x fsfe.min.css</code>
  55. <code>lessc fellowship.less -x fellowship.min.css</code>
  56. <code>lessc valentine.less -x valentine.min.css</code></pre>
  57. <h2>Bootstrap</h2>
  58. <p>
  59. Bootstrap’s LESS is located in <code>/look/bootstrap/</code>. These files
  60. should be left unchanged and they should be updated to later versions of
  61. bootstrap with care. However, you can edit the variables in
  62. <code>/look/bootstrap/variables.less</code>.
  63. </p>
  64. <p>
  65. If you want to know more about how to use Bootstrap, I refer you to the
  66. <a href="http://getbootstrap.com/css/">official documentation</a>.
  67. </p>
  68. </div>
  69. <!--/e-content-->
  70. </body>
  71. <sidebar promo="about-fsfe">
  72. <div id="related-content">
  73. <h3>Other howtos:</h3>
  74. <ul>
  75. <li>
  76. <a href="/contribute/web/tagging.html">Use tags and article metadata, implement a country page</a>
  77. </li>
  78. <li>
  79. <a href="/contribute/web/campaigns-frontpage.html">Add and select campaign banners for the frontpage</a>
  80. </li>
  81. <li>
  82. <a href="/contribute/template.html">A template article, to use the new webdesign</a>
  83. </li>
  84. </ul>
  85. </div>
  86. </sidebar>
  87. <date>
  88. <original content="2014-01-24"/>
  89. </date>
  90. <author id="roy" />
  91. <tags>
  92. <tag>webmaster</tag>
  93. </tags>
  94. <timestamp>$Date: 2013-09-26 15:32:30 +0200 (Thu 26 Sep 2013) $ $Author: paul $</timestamp>
  95. </html>
  96. <!--
  97. Local Variables: ***
  98. mode: xml ***
  99. End: ***
  100. -->