Loading...
 

History: Bootstrap Themes Transition

Preview of version: 22

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 bootstrap.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).

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 css
Copy to clipboard
/*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

 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?

 jquery buttons

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;

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" ...>

  • 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?

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.

To keep these layouts simple I guess the layout_view.tpl has to be clean of any functionality other than layout arrangement. If there is other functionality, logics inside, than it would become hard to maintain them as one would need to copy functionality changes all over the different layout_view.tpl files. So these need to be moved out to separate tpls?:

  • share
  • tell a friend
  • error report
  • full screen?
  • social networks
  • google analytics
  • endbody code?
  • js?


Any thoughts on changes affecting Tiki module zones? (Top, Topbar, Pagetop, Left, Right, Pagebottom, Bottom). If someone new comes, this might be confusing having also header, main, middle, footer etc.

Proposal #1 (not sure if possible to do, but seems simple to follow)

The current layout_view can be separated into 3 areas:
1) header: everything until the start of the body tag. Designers dont need to work with this and it remains unified in all layouts when code evolves.
2) body_layout: this is where the designers create the layout. It contains only the grid layout with the module zones. See starter sample below. This way basically all the desingers have to do is to create their favoured grid layout and place the module zones where they want. The only thing newcomers have to learn is that Tiki has some zones for content and they have to place them all into the grid.
3) footer: everything before the closing of the body tag that is not related to grid layout (JS file calling, endbody code, things from footer.tpl etc). Designers dont have to work with this, it remains unified in all layouts when the code evolves.

1) and 3) remains in one file and this file is considered as a system file. 2) goes into a separate file and gets called from the system file depending on the layout selection in theme administration.

Example: the current layout_view.tpl contains header, start of body, than an inclusion of body_layout.tpl (where the layout is defined by the designer), than footer stuff and close of body. Various body_layout.tpl files are shipped with Tiki. In case of a 2 main folder structure (see http://dev.tiki.org/File+and+directory+structure+revamp) the various body_layout templates shipped by Tiki are stored in system/templates/layouts/. If someone wants to create own, can do it in the local directory of local/themes/mytheme/ (or local/example.com/themes/mytheme in case of multitiki).

[+] sample starter layout

History

Advanced
Information Version
Mon 13 of Jun, 2016 05:11 GMT-0000 Gary Cunningham-Lee URL corrected to fix 404 error. Other edits for clarity. 43
View
Mon 09 of Dec, 2013 09:45 GMT-0000 luciash d' being ?‍♂️ 42
View
Sun 08 of Dec, 2013 01:39 GMT-0000 Gary Cunningham-Lee Updated information. 41
View
Sun 08 of Dec, 2013 01:37 GMT-0000 Gary Cunningham-Lee Rearranged some content to try to focus more on current state of progress. 40
View
Sun 08 of Dec, 2013 01:32 GMT-0000 Gary Cunningham-Lee Hiding more discussion as it isn't central to Bootstrap process. 39
View
Sun 08 of Dec, 2013 01:31 GMT-0000 Gary Cunningham-Lee Updated the information. 38
View
Sun 08 of Dec, 2013 01:28 GMT-0000 Gary Cunningham-Lee Updated the information. 37
View
Fri 29 of Nov, 2013 07:45 GMT-0000 gezza button notes 36
View
Wed 27 of Nov, 2013 09:17 GMT-0000 luciash d' being ?‍♂️ 35
View
Tue 05 of Nov, 2013 02:13 GMT-0000 Torsten Fabricius just re-save to trigger alias link 34
View
Tue 05 of Nov, 2013 02:12 GMT-0000 Torsten Fabricius ML asked to rename for the purpose of SEO optimisation 33
View
Tue 29 of Oct, 2013 02:14 GMT-0000 Torsten Fabricius added comment and sign 32
View
Tue 29 of Oct, 2013 02:13 GMT-0000 Torsten Fabricius 31
View
Tue 29 of Oct, 2013 01:09 GMT-0000 Torsten Fabricius 30
View
Tue 29 of Oct, 2013 00:58 GMT-0000 Torsten Fabricius 29
View
Tue 29 of Oct, 2013 00:56 GMT-0000 Torsten Fabricius added comment 28
View
Mon 30 of Sep, 2013 15:07 GMT-0000 Gary Cunningham-Lee Note about updating button classes. 27
View
Mon 30 of Sep, 2013 14:59 GMT-0000 Gary Cunningham-Lee Misc. additions. 26
View
Sat 28 of Sep, 2013 07:52 GMT-0000 gezza 25
View
Sat 28 of Sep, 2013 07:51 GMT-0000 gezza 24
View
Thu 26 of Sep, 2013 07:58 GMT-0000 gezza 23
View
Mon 26 of Aug, 2013 18:52 GMT-0000 gezza more thoughts on grid layout 22
View
Mon 26 of Aug, 2013 17:04 GMT-0000 gezza starter layout for brainstorming 21
View
Thu 22 of Aug, 2013 14:56 GMT-0000 gezza view layout thoughts 20
View
Thu 22 of Aug, 2013 14:21 GMT-0000 Gary Cunningham-Lee Ideas about layout options 19
View
Thu 22 of Aug, 2013 11:59 GMT-0000 gezza 18
View
Wed 21 of Aug, 2013 13:18 GMT-0000 gezza more button thougths 17
View
Wed 21 of Aug, 2013 10:33 GMT-0000 gezza 16
View
Wed 14 of Aug, 2013 10:41 GMT-0000 gezza some thoughts on external sources and buttons 15
View
Wed 14 of Aug, 2013 10:19 GMT-0000 gezza 14
View
Tue 13 of Aug, 2013 08:55 GMT-0000 gezza 13
View
Fri 09 of Aug, 2013 05:08 GMT-0000 Gary Cunningham-Lee New template ideas to support Bootstrap's grid 12
View
Thu 01 of Aug, 2013 15:11 GMT-0000 gezza 11
View
Wed 31 of Jul, 2013 13:13 GMT-0000 Gary Cunningham-Lee Minor edit. 10
View
Wed 31 of Jul, 2013 13:12 GMT-0000 Gary Cunningham-Lee Comment about ids vs classes, and site layout suggestion. 9
View
Wed 31 of Jul, 2013 09:34 GMT-0000 gezza 8
View
Wed 31 of Jul, 2013 09:02 GMT-0000 gezza 7
View
Tue 30 of Jul, 2013 08:17 GMT-0000 gezza 6
View
Fri 19 of Jul, 2013 13:37 GMT-0000 gezza 5
View
Sun 21 of Apr, 2013 21:44 GMT-0000 luciash d' being ?‍♂️ 4
View
Sun 21 of Apr, 2013 21:41 GMT-0000 luciash d' being ?‍♂️ Code Plugin modified by editor. 3
View
Sun 21 of Apr, 2013 21:19 GMT-0000 luciash d' being ?‍♂️ 2
View
Sat 20 of Apr, 2013 21:36 GMT-0000 luciash d' being ?‍♂️ 1
View

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config