History: Organization and details of Less files
Preview of version: 2
Overview
This is a description of the CSS and Less files used by Tiki, and how the themes that are distributed in the Tiki package are made.
The history
Historically, Tiki had three general types of CSS files - "feature-related" files such as calendar.css and admin.css, "base CSS files" that covered overall page construction and provided default values for colors and other details, and theme CSS files to produce a variety of visual "skins".
Bootstrap parallel
Some aspects of this arrangement remain, but in the form of a hierarchy similar to that of the Bootstrap CSS Framework. Bootstrap breaks down its CSS into component (or "modular") .less files. Tiki uses those Bootstrap files (as Tiki themes are now Bootstrap themes), and also adds its own collection of modular files to cover things outside of Bootstrap's awareness.
Bootstrap files:
(in /vendor/twitter/bootstrap/less/…
…typography.less,
…panels.less,
…etc.)
On the theme level, these files are imported to construct the theme CSS file. The Bootstrap variables.less file, which defines the values for all the variables used in Bootstrap, is also accessed by the contemporary version of Tiki's "base" style sheet file: tiki_base.css (compiled from themes/base_files/less/tiki_base.less).
What used to be "layout.css" and "design.css", along with some of the "feature CSS" files, has been reduced in size (not enough yet, but this process is on-going), and changed to .less files, each labeled according to the feature or component or page elements that it's related to. These is still a mix of standard CSS and Less syntax, as the conversion is a work in progress. As .less files, these use variables for properties that are likely to be modified globally or by a theme.
The file tiki_base.less imports these component files, along with Bootstrap's variables.less file and a tiki-variables.less file to provide values. Tiki_base.less is compiled to produce tiki_base.css, which is downloaded by the browser along with the theme style sheet (not necessarily as separate files, though, as CSS minifying is likely to be activated).
As mentioned, Tiki theme style sheets are now essentially bootstrap.css variants, differing just in their color, typography, grid details and so on. Themes made with Bootstrap customize are precisely Bootstrap 3 style sheets. These of course have no awareness of any Tiki HTML that differs from an HTML page written with Bootstrap in mind. This is where tiki_base.css comes in. It handles the Tiki-specific HTML, etc.
There are some color defaults in tiki_base.css and, while these attempt to be "neutral", there could be some cases of bad color contrast and so on that might need to be taken care of. The stylesheet could be edited, or custom CSS rules could be input on the Look & Feel admin page.
If the theme is created with knowledge of and access to the Tiki component .less files, then its styling can be more consistent and thorough, as its variable definitions (values) are used by the variable-containing .less files that are complied to produce tiki_base.css).
Less file details
The directory themes/tiki_base/less/ contains
| bootswatch_overrides.less | Most of the Bootswatch themes in the Tiki package are compiled from Less files. This file is to fix conflicts caused by inconsistencies between expected Bootstrap HTML and Tiki HTML, for example. |
| tablesorter-custom.less | Enables custom formatting for individual themes. |
| tablesorter-tiki.less | Less file for the jQuery Tablesorter plugin. Base formatting for all the themes. |
| tiki-admin.less | Converted from former "layout.css" and other legacy CSS files. |
| tiki-articles.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-blogs.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-bootstrap-chosen.less | This is a copy of "vendor/alxlit/bootstrap-chosen/bootstrap-chosen.less" except that its import-variables statement is commented out. The tiki-variables.less file provides the values. |
| tiki-bootstrap_overrides.less | A few places have been found where, because of Tiki HTML, etc., the default Bootstrap CSS needs to be overridden. |
| tiki-boxes_and_panels.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-calendar.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-categories.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-comments.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-cssmenus.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-external_script_overrides.less | Allows overriding CSS in external jQuery scripts, etc. |
| tiki-file_galleries.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-forums.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-image_galleries.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-maps.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-media-print.less | Contains print media rules. |
| tiki-minor_features.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-miscellaneous_global.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-modal_and_managestream.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-modules.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-mytiki.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-search.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-selectors.less | Originally this file was "tiki-color_selectors.less". Color rules were moved here from other files in this directory so that themes could import the file and define the colors per theme. Later other rules were added, that might be defined on the theme level. Also it's convenient to consolidate such rules in one file so they can be edited and have global effect in tiki_base.css. |
| tiki-sheets.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-tabs_and_tables.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-tags.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-toolbars.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-trackers.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-translation.less | Converted from former "layout.css" and other legacy CSS files |
| tiki-variables.less | Contains rules to define variables in tik-selectors.less and other .less files in this directory. |
| tiki-wikipages_and_plugins.less | Converted from former "layout.css" and other legacy CSS files |
| tiki_base.less | Imports the other .less files in this directory to be compiled and produce tiki_base.css. |
Theme Less files (paths from themes/themename/less)
| ../../../vendor/twitter/bootstrap/less/bootstrap.less | Builds the "bootstrap.css" equivalent. |
| bootstrap-variables.less | Provides the theme definitions for Bootstrap variables. |
| ../../base_files/less/tiki-selectors.less | Builds the Tiki CSS additional to Bootstrap. |
| ../../base_files/less/tiki-variables.less | Maps Tiki variables to Bootstrap variables and provides some default values for the additional Tiki CSS. Resulting theme CSS will override the CSS made when this is used in tik_base.less. |
| themename.less | The top file for the theme that imports all other files. |
| tiki-selectors.less | Contains any additional CSS the theme needs beyond the Bootstrap classes, typically for background gradients or images, etc. |
| ../../base_files/less/tablesorter-custom.less | (Optional) imported so the theme can define Tablesorter variables. |