About
This page documents Bootstrap classes transition targeted for Tiki 13 and onwards to help Tiki themers and designers.
WIP
Work in progress... jump in if you are interested but first read
this page
quick bootstrap testing
If you want to test quickly (trunk for Tiki12):
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
5) If you want an "alternative tiki.tpl" to replace or add divs with bootstrap-compatible classes (for responsive layout, etc.), try using the new "Site layout" feature (follow the example of templates/layouts/classic).
[+] CSS selectors (class vs id)
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. Feature specific styling should not include id selectors. If you find an id, change it to class.
[+] Discussion
Main point is that id must be unique and can appear once only in a page. So why use ids? You can never know when you will need to display that element more than once on a page.
Please argue with this statement (the goal is to have an easy to follow rule).
Isn't now pretty much a "best practice" that ids shouldn't be given CSS style properties? Their CSS style properties are too hard to override with class properties without resorting to !important, etc.
Sorry Gary, probably my bad but I don't understand your comment Can you clarify if id should be used or not as selector for elements (eg for divs)? . Sorry from me, too, for not being clear. I think ids should not be used for CSS style properties.
Overview of the main elements classes changes
How to approach and handle buttons
bootstrap buttons
1) read the Buttons section @
http://getbootstrap.com/css/
2) they say: "As a best practice, we highly recommend using the button> element whenever possible to ensure matching cross-browser rendering." - How does this effect Tiki?
What are the default classes?
1.1.1.3. how to manage externals (eg: jquery dialogs)
External sources come with their own styling. How is this neutralized and turned into Tiki styling?
1.1.1.4. how to customize (write down how to do it)
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
[-] smarty_tiki/
btn class added;
Copy to clipboard
<span class="button" ...>
renders now in mobile mode as
Copy to clipboard
<span class="btn button" ...>
otherwise
Copy to clipboard
<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)