Loading...
 
Skip to main content

History: Updating a Tiki theme from Bootstrap 3 to 4

Preview of version: 3

This document is a work in progress, as Bootstrap 4 is still in beta at the time of this writing. But theme-related details are probably pretty stable so the method described here should continue to be useful.

The Bootstrap developers have taken pains to facilitate custom themes compared to what was offered for release 3, and this helps us as Tiki theme creators/maintainers. For an overview of (generic) Bootstrap theming, see http://getbootstrap.com/docs/4.0/getting-started/theming/.

Less to SCSS (Sass)

Bootstrap 4 uses SCSS precompiling rather than Less, so the workflow needs to be switched accordingly. As before, compiling can be done with PHP in the terminal in PhpStorm. Or the .scss files can be compiled by another method. In my work on this so far, I found that PHP compiling isn't very verbose when there are errors, and when updating or making a theme there tend to be a lot of errors in my experience.

Scout

So I found that if you are compiling with PHP (such as in the PhpStorm terminal), there is little in the way of error notices, so debugging is hard. But there's an application called Scout (http://scout-app.io/) that can work nicely as part of the workflow to compile the theme files and get better error notices when things need to be fixed. It's free and available for MacOS, Linux, and Windows. After installing Scout, just add the theme as a project and Scout will watch for file changes as you edit the .scss files, and will compile in the background and specify the problematic file and line and nature of the problem when there's an error. (Then, if you're working on the Tiki project files so need to use PhpStorm for inter-developer consistency, when the compiling goes smoothly you can compile again in PhpStorm and commit the files.)

(Next steps coming soon...)



History

Advanced
Information Version
Mon 29 of Oct, 2018 18:33 GMT-0000 luciash d' being ?‍♂️ 11
Sat 13 of Oct, 2018 00:02 GMT-0000 luciash d' being ?‍♂️ 10
Fri 12 of Oct, 2018 21:42 GMT-0000 luciash d' being ?‍♂️ 9
Sun 15 of Jul, 2018 16:49 GMT-0000 Gary Cunningham-Lee Updated "MyTheme.scss" contents. 8
Wed 17 of Jan, 2018 08:19 GMT-0000 Gary Cunningham-Lee Added link: CSS Flexible Box Layout 7
Fri 15 of Dec, 2017 14:02 GMT-0000 Gary Cunningham-Lee Added more info. 6
Fri 15 of Dec, 2017 13:34 GMT-0000 Gary Cunningham-Lee Info added. 5
Fri 15 of Dec, 2017 12:41 GMT-0000 Gary Cunningham-Lee Wording improvement. 4
Fri 15 of Dec, 2017 11:42 GMT-0000 Gary Cunningham-Lee 3
Fri 15 of Dec, 2017 11:41 GMT-0000 Gary Cunningham-Lee Info added about compiling. 2
Fri 15 of Dec, 2017 10:54 GMT-0000 Gary Cunningham-Lee Page created. 1