History: Bootstrap Themes Transition
Preview of version: 14
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
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 (eg: to define main zones). Feature specific styling should not include id selectors.
[+] Discussion
Selector purifier?
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:
- Does this make sense?
- Where/how the "desired" selectors are defined?
- ?
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. default classes for a Tiki button
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
- Action buttons that result in a commit to the database
- Cancel buttons
- Query and navigation buttons
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
[-] lib/
[-] smarty_tiki/
[-] function.button.php
btn class added;
<span class="button" ...>
renders now in mobile mode as
<span class="btn button" ...>
otherwise
<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).