History: Using the Less CSS pre-processor with Tiki

Using the Less CSS pre-processor provides some benefits over editing CSS directly, such as using variables (constants), doing math calculations for color values in the code, and so on. For Tiki's CSS files, the arrangement of .less and .css files is similar to that of the Bootstrap files themselves.

Tiki.css

This file was formerly design.css but was renamed as of Tiki 13 to better indicate its purpose, providing CSS rules for page elements and so on that are outside the scope of bootstrap.css. (The underlying lite.css file was removed, also, as the column layout that it enabled has been replaced by the Bootstrap grid.)

Just as Bootstrap has divided its rules into purpose-specific .less files, tiki.css is compiled from separate files that previously were, together, design.css. The rules have been separated into a number of files according to the page area or feature or function that they are related to. At edit/save time, tiki.css is generated by the pre-processor.

tiki.css's imported .less files

These are the files that tiki.less imports in order to produce tiki.css. Most of these are pieces of the former design.css, and are still normal .css formating. They generally don't contain variable names or use Less syntax yet.

• ../../vendor/twitter/bootstrap/less/variables.less
• less/tiki-variables.less
• less/tiki-miscellaneous_global.less
• less/tiki-modules.less
• less/tiki-toolbars.less
• less/tiki-boxes_and_panels.less
• less/tiki-tabs_and_tables.less
• less/tiki-wikipages_and_plugins.less
• less/tiki-articles.less
• less/tiki-blogs.less
• less/tiki-forums.less
• less/tiki-comments.less
• less/tiki-image_galleries.less
• less/tiki-file_galleries.less
• less/tiki-trackers.less
• less/tiki-categories.less
• less/tiki-search.less
• less/tiki-sheets.less
• less/tiki-calendar.less
• less/tiki-translation.less
• less/tiki-tags.less
• less/tiki-minor_features.less
• less/tiki-mytiki.less
• less/tiki-admin.less
• less/tiki-modal_and_managestream.less
• less/tiki-maps.less
• less/tiki-external_scripts_overrides.less
• less/tiki-bootstrap_overrides.less
• less/tablesorter-tiki.less
• less/tablesorter-custom.less

Making changes in tiki.css

So the above files are imported by tiki.less and tiki.css is generated. To effect a change in tiki.css, the appropriate Less file above should be edited. Design.css was divided up by page area or function, etc. so it would be easier to locate the CSS rule that needs to be edited. Also, a priority was to sort of replicate Bootstrap's modular separation of Less files.

References:

http://lesscss.org/ - An overview of Less, how to download and use, examples and more.
http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/ - Customizing Bootstrap
http://jeffcroft.com/blog/2012/feb/23/many-ways-to-use-css-preprocessors/ - The many ways to work with CSS preprocessors [See the comments also.]

Setting up PhpStorm to compile LESS files

Work in progress...

• To install:
  • Go to: Preferences -> Plugins -> Browse Repository and pick the LESS Compiler
  • Restart PhpStorm
• To use
  • Right click on a LESS file and you should now have a "Compile To CSS" option on the context menu
  • Setting up a file watcher
    • Go to Files -> Settings -> File Watchers
    • Click the plus sign at far right ("Add")
    • Select "Less"
    • Click "Ok"
    • The scope of what files are watched can be specified. "Project files" is probably a good choice. Files need to be added to the project to be watched. I had to use SVN -> Add to get the watcher to do its job (I normally use TortoiseSVN for SVN operations). (Disclaimer: This description of setting up the watcher is what I recall and may not be completely accurate. ;-) ) I don't believe I had to download anything as the Less plugin is included with recent versions of PhpStorm.

More to come here.

Compiling less files within Tiki

As of 2015-06-06 in branch 14.x, php console.php less:compile is not working perfectly.

Aliases

LESS CSS
LESS