Loading...
 

History: Pre-Tiki 13 CSS transition to the Bootstrap Framework

Preview of version: 11

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 (see below).
  • 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 administration (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: Tiki Trunk Theme Selection Layout Settings And UI Effect Controls 2014 01 29 15 09 26

  • 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

Making a Tiki theme as a bootstrap.css variant


Theme file were committed as part of working out a method for making Tiki themes using the Less CSS pre-processor and a copy (custom-variables.less) of the Bootstrap variables.less file. This is about the themes in the Tiki package, but the same process can be used to make Tiki themes independently. The variables are edited as needed to get the look and feel for the theme. For elements and properties, etc. that are outside the scope of bootstrap.css, there's a custom-other.less file. These are in the styles/thenewsbs directory. The styles/thenewsbs.less file imports the variables files and it's all compiled to produce thenewsbs.css.

This method is described by Thomas Park, who does the Bootswatch themes,
at http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/ .

Thenewsbs.css and the other CSS files shouldn't be edited directly. All
editing for the theme is done in the styles/thenewsbs/ *.less files. PhpStorm handles the compiling transparently. The CSS files are produced
or updated automagically after each .less file change. Or another method can be used to watch for edits and compile. Check Less pre-processor references online.

This so far is just a proof of concept/method. Most style details for this theme still need to be added, and eventually it'll be renamed
"thenews.css", replacing the pre-Tiki13 thenews.css.

So far also there's no importing of design.css. (I wanted to keep things
simple for now, to work out this process.) But a (hopefully much reduced
and converted to a Less file making using of variables) design.css can
also be imported by thenewsbs.less and the other theme stylesheets so
that all the rules are in one file.

  • 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


Alias

BS css

History

Advanced
Information Version
Mon 21 of Apr, 2014 09:22 GMT-0000 Gary Cunningham-Lee 16
View
Mon 21 of Apr, 2014 09:20 GMT-0000 Gary Cunningham-Lee Clarified method to choose theme (planned). 15
View
Sun 20 of Apr, 2014 02:58 GMT-0000 Gary Cunningham-Lee Updated some theme information. 14
View
Thu 27 of Mar, 2014 05:30 GMT-0000 Gary Cunningham-Lee Workflow comment added. 13
View
Wed 26 of Mar, 2014 10:00 GMT-0000 Gary Cunningham-Lee Removed unwanted linebreaks. 12
View
Wed 26 of Mar, 2014 09:58 GMT-0000 Gary Cunningham-Lee Info about using Less to make a theme added. 11
View
Wed 29 of Jan, 2014 06:51 GMT-0000 Gary Cunningham-Lee hard return removed, hopefully to correct list formatting. 10
View
Wed 29 of Jan, 2014 06:50 GMT-0000 Gary Cunningham-Lee Typo corrected. 9
View
Wed 29 of Jan, 2014 06:48 GMT-0000 Gary Cunningham-Lee design.css details added. 8
View
Wed 29 of Jan, 2014 06:38 GMT-0000 Gary Cunningham-Lee Screenshot added. 7
View
Wed 29 of Jan, 2014 05:47 GMT-0000 Gary Cunningham-Lee Typo corrected. 6
View
Wed 29 of Jan, 2014 05:18 GMT-0000 Gary Cunningham-Lee Added details. 5
View
Mon 25 of Nov, 2013 04:40 GMT-0000 Gary Cunningham-Lee Typos, etc. 4
View
Tue 05 of Nov, 2013 02:19 GMT-0000 Torsten Fabricius ML asked to rename for the purpose of SEO optimisation 3
View
Tue 29 of Oct, 2013 02:37 GMT-0000 Torsten Fabricius 2
View
Tue 29 of Oct, 2013 02:35 GMT-0000 Torsten Fabricius started with .css 1
View

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config