This page documents Bootstrap classes transition targeted for Tiki 13 and onwards to help Tiki themers and designers.

Boostrap files

Location: vendor/bootstrap/

To include bootstrap in a tiki theme, create a theme css file (eg. tiki-bootstrap.css) in the following folder: styles/

In the created css file use the @import css function before any css setting as described below:

/*Import Bootstrap*/
@import url("../vendor/bootstrap/dist/css/bootstrap.css");

css selectors

use classes, don't use ids - Tiki uses id selectors only in some core areas (eg: to define main zones). Feature specific styling should not include id selectors.

[+] Discussion

Styling of external sources

External sources come with their own styling. How is this neutralized and turned into Tiki styling?
Vendor (external) source codes contain lots of own formatting. This causes problems when trying to achieve a unified look&feel. For example jquery-ui is nice, but has its own styling. Using bootstrap how will a jquery-ui dropdown will look the same as a dropdown anywhere else in Tiki? Or a button?

One way is to simply add the needed classes, stop and override the usage of external css. This might work for buttons, tables, hyperlinks, etc, but how about divs?

Overview of the main elements classes changes

Buttons

How to approach and handle buttons

1.1.1.1. when should an element be a button or a link

Tiki sometimes uses hyperlink ( a> tag), sometimes buttons

1.1.1.2. usage of navbar

1.1.1.3. default classes for a Tiki button

Bootstrap offers button style and size options, which one to pick? See http://getbootstrap.com/css/#buttons

Suggestion: lets group the buttons

• Action buttons that result in a commit to the database
• Cancel action buttons (eg: Cancel Edit)
• Query and navigation buttons (list something, jump to another feature)
• ?

1.1.1.4. how to customize

eg: I dont like that on the edit page the save button class is btn-primary, I want it to look like btn-warning, how do I do that without modifying php or tpl source files?

[-] lib/

<span class="button" ...>

<span class="btn button" ...>

<a class="btn" data-role="button" ...>

Overview of grid layout issues, etc.

These changes will be made in templates/layouts/bs_grid (or some name indicating Bootstrap grid compatibility. At issue is where to add class="row" container divs.

In parallel with this, presumably the idea of moving everything in the center column to modules will happen. This will simplify the template and give a lot of flexibility to page layout as well.

Overall page

This includes the top module zone, topbar module zone, side columns, center content (less div#role_main, which should be addressed separately), page bottom module zone (bottom of center column), and footer (bottom module zone).

Page center content (div#role_main)