Stylesheets

This page is about Tiki's transition to using the Bootstrap CSS Framework, and specifically about the organization and use of CSS files.

Pre-Tiki 13 tasks

• Revamp of pre-Tiki 13 stylesheet organization
  • Switch to using bootstrap.css rules as much as possible, to reduce the number of rules in design.css and the css directory files
    • Rename design.css to tiki.css
      Suggested by LP, this is because the purpose of the file is not to provide design rules, but to enable legacy functions and other functions outside the scope of bootstrap.css, such as show/hide display rules.
    • Rules in design.css currently:
      • Position modules - admin module, etc.
      • Position elements in middle center of page - wiki action icons, etc.
      • Provide wikiplugin and module style details.
      • Provide feature layout and styling
      • etc. (identification in progress)
    • Replace color rules in legacy CSS files with Bootstrap colors as much as possible
      This is to reduce rule redundancy and to avoid color contrast conflicts and improve color consistency (aesthetic and information-wise).
• Update packaged theme files (those that would be an asset)
  It's fairly straightforward to make the files in styles/ compatible with Bootstrap, so these will mostly be kept and updated.
• Maybe only the themes in mods.tiki.org that people request to be updated will in fact be updated; IOW, only do work where there is demand.
• Document how to convert a (WP, Joompla or other) Bootstrap theme to

use with Tiki

+Some conversion projects prior to Tiki 13 release will give some information on this process.

Theme admininstration (Look & Feel) mini-revamp

A smooth process is needed, to support various theme situations:

1. Using an included Tiki theme - no change from previous Tiki versions
2. Changing the layout template to match the style (wider side columns, one or two side columns, no side columns, etc.)
   This was formerly possible with theme stylesheet and sometimes theme-specific tiki.tpl; now a switch needs to be made in templates/layouts/ because the grid column width classes are hard-coded in layout_view.tpl.
3. Using an external bootstrap.css file
   • Users should have the option to use a custom bootstrap.css file instead of the default one - the packaged one shouldn't be loaded; no reason to use two mostly-identical 100KB files
   • This theme file upload and file switching needs to be in L & F admin

Screenshot with this added pref:

• Using an external file that supplements the bootstrap.css file (in the same way that a pre-Tiki13 theme file supplements design.css) - process similar to that in previous Tiki versions

Related tasks

• Tiki file system revamp:
  • Consolidate location of CSS files
  • Consolidate theme files (.css and .tpl, etc.) in one directory
  • Have all "custom" files in one place

• Docs for optimizing responsiveness of your site
  • Using grid divs in wiki text areas
  • Handling wide images and tables, etc.
  • Using modules, etc. to achieve Bootstrap layouts

BS css