Loading...
 
Skip to main content

History: Bootstrap Themes Transition

Preview of version: 10

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 class vs id

Guideline (rule?) about using class or id for an element

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.

Tiki guideline (or rule?): only use classes, never use ids

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.

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


Discusson points:

1.1.1.1. when should an element be a button

1.1.1.2. the default classes for a Tiki button

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

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

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