Loading...
 
How to compile edited less files

Using Less CSS with Tiki

Less is used to generate CSS style sheets from Tiki13 to Tiki18 (Bootstrap 3.x). This page explains how to compile Less files that have been edited to regenerate the related CSS files. For more information on how less has been implemented in Tiki and how to create a Less-compiled theme, search for less at themes.tiki.org.

 Use the Less compiler bundled with Tiki
Note that it is important to use the Less compiler that is included with Tiki. This will avoid conflicts and unnecessary changes to css files that can arise with developers using different compilers which use different syntax conventions.

 As of Tiki19, SCSS precompiling is used instead of Less
With Tiki 19, Bootstrap 3 has been updated to Bootstrap 4, which uses SCSS precompiling rather than Less:

https://themes.tiki.org/Updating-a-Tiki-theme-from-Bootstrap-3-to-4#Less_to_SCSS_Sass_
If you use PhpStorm:
https://dev.tiki.org/PhpStorm#File_Watcher_Settings_using_scss_integrated_with_composer_


This page explains how to compile less files through Tiki, first manually and second automatically through PhpStorm.

Manually compile less files

A Less compiler comes bundled with Tiki and here are step by step instructions on how to run it:

  1. After editing the Less file, open the command line in the Tiki root directory
  2. Run the compiler by typing php console.php less:compile plus desired options and hitting enter. Below are some examples:
    1. php console.php less:compile --all
    2. php console.php less:compile --only base_files
    3. php console.php less:compile --only darkly

To see all the options available, type php console.php less:compile --help and hit enter.

Use PhpStorm to automatically compile Less files

PhpStorm can be used to automatically carry out the manual steps above once the Less file is edited or saved.

Use File Watchers

PhpStorm uses "file watchers" that watch directories for changes to Less files and compile the changed files to CSS. A Less plugin is available at http://plugins.jetbrains.com/plugin?pr=&pluginId=7059. Initially, the PhpStorm installation doesn't have the Less watcher 'program' specified on the file watcher configuration screen. The file lessc.cmd needs to be downloaded with npm. More information is at https://github.com/marcelklehr/nodist/ and http://lesscss.org/usage/.

To activate the Less file watcher, go in the PhpStorm menu to the File > Settings > Tools > File Watches item (Settings is Preferences on the Mac). Then click the plus sign, "+", and click "Less". Some parameters can be set for this File Watcher by clicking the edit icon (the pencil). This can all be set per project.

File Watcher Settings (using php console.php)

Below is a screenshot showing the settings to use for the Less file watcher. These settings will run the less compiler that is included with Tiki.

PhpStormLessFileWatcher
Some comments on the settings as shown in the above screenshot:

  • Program : Use the path to the PHP executable file used for your server
  • Track only root files: This should be checked otherwise extraneous css files may be created. A separate css file is not needed for less files that are imported into another less file. Checking this box ensures that only the ultimate less file generates a css.
  • Auto-save edited files to trigger the watcher : This is unchecked in the screenshot so that regeneration only occurs upon save. If checked, the css will be regenerated as you type in changes.
  • Show console and Output filters : The settings for these two options in the screenshot are simply the default settings in PhpStorm. They can be changed according to your preference, they will not affect the compilation of the Less files.

Alternative File Watcher Settings (using less integrated with composer)


Once you've run the composer command less program will be available directly.
(In my case MAMP is set to use php from the package itself and the path is not the one state above) .
Below is a screenshot showing the settings to use for the Less file watcher with lessc. They may be a better way running the less compiler that is included with Tiki.

Once set and on your first run you may see an error -255. Just restart Phpstorm and it should go away.

Less With PhpStorm
Some comments on the settings as shown in the above screenshot:

  • Program : From within your tiki use the path to the lessc installed in your vendor_bundled folder: /mytiki/vendor_bundled/vendor/oyejorge/less.php/bin/lessc
  • Arguments: --no-color $FileName$
  • Output path to refresh: $FileParentDir$/css/$FileNameWithoutExtension$.css
  • Track only root files: This should be checked otherwise extraneous css files may be created. A separate css file is not needed for less files that are imported into another less file. Checking this box ensures that only the ultimate less file generates a css.
  • Auto-save edited files to trigger the watcher : This is unchecked in the screenshot so that regeneration only occurs upon save. If checked, the css will be regenerated as you type in changes.
  • Show console and Output filters : The settings for these two options in the screenshot are simply the default settings in PhpStorm. They can be changed according to your preference, they will not affect the compilation of the Less files.

Prior screenshots and instructions

[+]

Initial info

[+]

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Diagram
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw -superseded by Diagram
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Kanban
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend
Terms and Conditions
Theme
TikiTests
Federated Timesheets
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools