This page documents Bootstrap classes transition targeted for Tiki 13 and onwards to help Tiki themers and designers.
1) download bootstrap files (http://getbootstrap.com/), copy bootstrap.css to your /styles folder
2) create a bootstrap folder in the /styles folder
3) copy to /styles/bootstrap the downloaded boostrap.js file and rename it to custom.js
4) in the admin panel switch your theme to bootstrap
about using class or id for an element
guideline #1: 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.
Vendor (external) source codes contain lots of own formatting. This causes problems when trying to achieve a unified look&feel. Simply adding needed classes might not be the good way. For example jquery-ui is nice, but has its own styling. How would a jquery-ui dropdown will look the same as a dropdown anywhere else in Tiki?
A purifier function (in lib/smarty_tiki/?) could purify first, than another function would add the desired classes to element selectors (classes) all over tiki.
Questions:
How to approach and handle buttons
Tiki sometimes uses hyperlink ( a> tag), sometimes buttons
Bootstrap offers button style and size options, which one to pick?
There should be difference if it is a save or a cancel button.
Suggestion: lets group buttons
External sources come with their own styling. How is this neutralized and turned into Tiki styling?
eg: I dont like that the edit page save button class is btn-primary, I want it to look like btn-warning, how do I do that in my css file without modifying any other source files
btn class added;
<span class="button" ...>
renders now in mobile mode as
<span class="btn button" ...>
otherwise
<a class="btn" data-role="button" ...>
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.
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).