History: Using the Less CSS pre-processor with Tiki

Source of version: 5

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. {sign user="chibaguy" datetime="2014-07-12T00:30:52+00:00"} More to come here. !!! Aliases (alias(LESS CSS)) (alias(LESS))

History

Enable pagination rows per page

HTML diff Side-by-side diff Side-by-side diff by characters Inline diff Inline diff by characters Full side-by-side diff Full side-by-side diff by characters Full inline diff Full inline diff by characters Unified diff Side-by-side view HTML diff Side-by-side diff Advanced

Information	Version
Sun 25 of Mar, 2018 11:02 GMT lindon	9
Sun 07 of Jun, 2015 06:50 GMT chibaguy	8
Sun 07 of Jun, 2015 06:45 GMT chibaguy Some updating.	7
Sun 07 of Jun, 2015 02:22 GMT marclaporte	6
Sat 12 of Jul, 2014 00:30 GMT chibaguy File watcher info added.	5
Fri 11 of Jul, 2014 16:35 GMT jonnybradley	4
Sun 06 of Jul, 2014 14:29 GMT chibaguy List of tiki.less's Less files added.	3
Sun 06 of Jul, 2014 05:21 GMT chibaguy	2
Sun 06 of Jul, 2014 05:20 GMT chibaguy Page is started but far from complete.	1

Select action to perform with checked... Remove OK