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_base.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_base.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_base.css is generated by the pre-processor.

Less files imported to make tiki_base.css

These are the files that tiki_base.less imports in order to produce tiki_base.css. Most of these are pieces of the former design.css, and many still have normal .css formating. But increasingly Less syntax and variables are being used.

• ../../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_base.css

So the above files are imported by tiki_base.less and tiki_base.css is compiled. To effect a change in tiki_base.css, the appropriate Less file above should be edited.

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

See https://dev.tiki.org/Using+Less+CSS+with+Tiki for details about using PhpStorm.

Compiling Less files within Tiki

See https://dev.tiki.org/Using+Less+CSS+with+Tiki for details about how to compile Less files in Tiki, including automatically using PhpStorm. (As of 2015-06-06 in branch 14.x, the compiler bundled with Tiki was not working perfectly.)

Aliases

Less CSS
Less