History: Bootstrap Themes Transition
Preview of version: 19
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 bootstrap.js file and rename it to custom.js
4) in the admin panel switch your theme to bootstrap
Bootstrap 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 hyperlinks ( a> tag), sometimes input type submit, sometime buttons
How to unify?
1.1.1.2. usage of navbar
Bootstrap has a navbar component (http://getbootstrap.com/components/#navbar) that could be used as a standard background for buttons.
1.1.1.3. default classes for a Tiki button
A way could be to agree on a naming convention, assign type or class accordingly in tiki templates, than use the smarty function to add the bootstrap class for styling.
An approach could be for example according to functionality:
- Action buttons that result in a commit to the database -> tiki class/type name: "button-action". Use smarty to add btn-primary class for styling
- Cancel action buttons (eg: Cancel Edit) -> tiki class/type name="cancel-button". Use btn-default bootstrap class for styling
- Query buttons (list something, run a report, etc) -> tiki class/type name="button-query". Use btn-default bootstrap class for styling
- Navigation buttons (eg: jump to another screen/feature) -> tiki class/type name="button-navigation". Use btn-default bootstrap class for styling.
issue #1: Bootstrap offers button style and size options, which one to pick? See http://getbootstrap.com/css/#buttons
- btn-default seems ok for most buttons
- btn-primary requiers additional css sytling to have white color for links on buttons
issue #2: use span tag or add class directly in the element?
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/
[-] 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" ...>
- issue #1: not all buttons are picked up for styling, for example the comment button on tiki-page_bar.tpl (it has span class="button")
- issue #2: in Tiki input types such as submit look like buttons, but they are not picked up by this function (eg: Create tracker button on tiki-list_trackers)
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)
gezza: The classes on layout-view.tpl are going to be simplified or we keep them? What is the plan for shadowlayers, fullscreen, fixedwith? Clearfix classes?
<body> <div id="main" class="row"> <div class="col-md-12"> <div class="header_outer row"> <div class="header_container col-md-12"> </div> <div class="middle_outer row"> <div id="middle" class="clearfix fixedwidth middle col-md-12"> <div class="row"> <div class="col-md-12"> <div id="topbar_modules" class="content clearfix modules"> </div> </div> <div class="row"> <div id="c1c2" class="clearfix col-md-9"> <div class="row"> <div id="wrapper" class="clearfix col-md-9 col-md-9-push-3"> </div> <div id="col2" class="col-md-3 col-md-3-pull-9"> </div> </div> </div> <div id="col3" class="clearfix col-md-3"> </div> </div> </div> </div> <footer id="footer" class="footer"> <div class="footer_liner row"> <div class="fixedwidth footerbgtrap col-md-12"> </div> </div> </footer> </div> </div> </body>
IMO (), we can have several layouts and the designer or site admin can choose which to use, or can add another. For example:
- Responsive_fivealive: This one enables replication of the current Fivealive style (has extra divs needed for full-width header and footer background graphics, but fixed-width content). Within each - header, middle, and footer - of course the areas are responsive.
- Responsive_middle: Simpler than the Fivealive layout, but has support for current Tiki layout of distinct header, middle and footer.
- Responsive_simple: Essentially one large container that depends on wiki code, etc. for layout as well as content.
- Other responsive variants
These templates/layouts/responsive_fivealive.tpl etc. layouts can be added or removed as we experiment with the possibilities.
In my opinion, there's no particular reason to keep old divs and div classes like the shadow divs in layouts other than Classic. If one goal of being Bootstrap compatible is to attract devs and designers who are familiar with Bootstrap, we should provide templates that are clean and familiar as much as possible, not cluttered. Also, Bootstrap provides for the "full-width" and "fixed-width" properties, so I don't think we need explicit divs/classes distinct from Bootstrap's.
History
| Information | Version | |||||
|---|---|---|---|---|---|---|
| Mon 13 of Jun, 2016 05:11 UTC Gary Cunningham-Lee URL corrected to fix 404 error. Other edits for clarity. | 43 | |||||
| Mon 09 of Dec, 2013 09:45 UTC luciash d' being ?♂️ | 42 | |||||
| Sun 08 of Dec, 2013 01:39 UTC Gary Cunningham-Lee Updated information. | 41 | |||||
| Sun 08 of Dec, 2013 01:37 UTC Gary Cunningham-Lee Rearranged some content to try to focus more on current state of progress. | 40 | |||||
| Sun 08 of Dec, 2013 01:32 UTC Gary Cunningham-Lee Hiding more discussion as it isn't central to Bootstrap process. | 39 | |||||
| Sun 08 of Dec, 2013 01:31 UTC Gary Cunningham-Lee Updated the information. | 38 | |||||
| Sun 08 of Dec, 2013 01:28 UTC Gary Cunningham-Lee Updated the information. | 37 | |||||
| Fri 29 of Nov, 2013 07:45 UTC gezza button notes | 36 | |||||
| Wed 27 of Nov, 2013 09:17 UTC luciash d' being ?♂️ | 35 | |||||
| Tue 05 of Nov, 2013 02:13 UTC Torsten Fabricius just re-save to trigger alias link | 34 | |||||
| Tue 05 of Nov, 2013 02:12 UTC Torsten Fabricius ML asked to rename for the purpose of SEO optimisation | 33 | |||||
| Tue 29 of Oct, 2013 02:14 UTC Torsten Fabricius added comment and sign | 32 | |||||
| Tue 29 of Oct, 2013 02:13 UTC Torsten Fabricius | 31 | |||||
| Tue 29 of Oct, 2013 01:09 UTC Torsten Fabricius | 30 | |||||
| Tue 29 of Oct, 2013 00:58 UTC Torsten Fabricius | 29 | |||||
| Tue 29 of Oct, 2013 00:56 UTC Torsten Fabricius added comment | 28 | |||||
| Mon 30 of Sep, 2013 15:07 UTC Gary Cunningham-Lee Note about updating button classes. | 27 | |||||
| Mon 30 of Sep, 2013 14:59 UTC Gary Cunningham-Lee Misc. additions. | 26 | |||||
| Sat 28 of Sep, 2013 07:52 UTC gezza | 25 | |||||
| Sat 28 of Sep, 2013 07:51 UTC gezza | 24 | |||||
| Thu 26 of Sep, 2013 07:58 UTC gezza | 23 | |||||
| Mon 26 of Aug, 2013 18:52 UTC gezza more thoughts on grid layout | 22 | |||||
| Mon 26 of Aug, 2013 17:04 UTC gezza starter layout for brainstorming | 21 | |||||
| Thu 22 of Aug, 2013 14:56 UTC gezza view layout thoughts | 20 | |||||
| Thu 22 of Aug, 2013 14:21 UTC Gary Cunningham-Lee Ideas about layout options | 19 | |||||
| Thu 22 of Aug, 2013 11:59 UTC gezza | 18 | |||||
| Wed 21 of Aug, 2013 13:18 UTC gezza more button thougths | 17 | |||||
| Wed 21 of Aug, 2013 10:33 UTC gezza | 16 | |||||
| Wed 14 of Aug, 2013 10:41 UTC gezza some thoughts on external sources and buttons | 15 | |||||
| Wed 14 of Aug, 2013 10:19 UTC gezza | 14 | |||||
| Tue 13 of Aug, 2013 08:55 UTC gezza | 13 | |||||
| Fri 09 of Aug, 2013 05:08 UTC Gary Cunningham-Lee New template ideas to support Bootstrap's grid | 12 | |||||
| Thu 01 of Aug, 2013 15:11 UTC gezza | 11 | |||||
| Wed 31 of Jul, 2013 13:13 UTC Gary Cunningham-Lee Minor edit. | 10 | |||||
| Wed 31 of Jul, 2013 13:12 UTC Gary Cunningham-Lee Comment about ids vs classes, and site layout suggestion. | 9 | |||||
| Wed 31 of Jul, 2013 09:34 UTC gezza | 8 | |||||
| Wed 31 of Jul, 2013 09:02 UTC gezza | 7 | |||||
| Tue 30 of Jul, 2013 08:17 UTC gezza | 6 | |||||
| Fri 19 of Jul, 2013 13:37 UTC gezza | 5 | |||||
| Sun 21 of Apr, 2013 21:44 UTC luciash d' being ?♂️ | 4 | |||||
| Sun 21 of Apr, 2013 21:41 UTC luciash d' being ?♂️ Code Plugin modified by editor. | 3 | |||||
| Sun 21 of Apr, 2013 21:19 UTC luciash d' being ?♂️ | 2 | |||||
| Sat 20 of Apr, 2013 21:36 UTC luciash d' being ?♂️ | 1 | |||||