History: Bootstrap 3 to 4 transition
Preview of version: 21
("Other factors" might be such things as outside theme developers/designers shifting to Bootstrap 4, upgrades of Tiki's external libraries such as Bootstrap Tour, other themes being available for Bootstrap 4 and so on. But given the long gestation period, the cool things brought by Bootstrap 4, and more and more third parties releasing Bootstrap 4 items, the transition to it is apt to be fairly fast.)
Update: At [https://tiki.org/TikiFestJapan2017}TikiFestJapan2017, a Bootstrap 4 experimental branch was branched from trunk: https://sourceforge.net/p/tikiwiki/code/HEAD/tree/branches/experimental/bootstrap4/.
Bootstrap 4 experimental branch
I've started going through the themes directory making the necessary changes. The first goal was to get a completed SCSS compile, for the base files (tiki_base.css) initially. Of course even after updating many variable names, etc., there were still errors due to the many differences between the Bootstrap versions.
Scout-App
The PHP SCSS compiler that can be accessed from the terminal in PhpStorm, etc. doesn't give much information about compile errors — sometimes just a line number, but we don't know in what file or the nature of the error. Maybe the author can be approached to improve this. For now, I downloaded a free application called Scout-App (http://scout-app.io, available for all OSs) that gives explicit information about compile errors; it watches for file changes and runs a compile process after each change. So I use this to identify places to fix and then use the compiler in PhpStorm for the compiling.
[-] Commits to branch outside of the themes directory:
At Jonny's suggestion, the commits to the experimental branch that aren't in the themes directory are being recorded here. This should smooth the merge of the branch back to trunk.
Revision: 64381 http://sourceforge.net/p/tikiwiki/code/64381 Author: chibaguy Date: 2017-10-26 12:48:52 +0000 (Thu, 26 Oct 2017) Log Message: ----------- [UPD] Update following upgrade to Bootstrap 4 beta 2. Amelia compiles ok now also, but still working out a good arrangement of files, etc. Modified Paths: -------------- branches/experimental/bootstrap4/lib/smarty_tiki/block.accordion_group.php (Replaced CSS selector "panel" with "card", only.) ...
Revision: 64379 http://sourceforge.net/p/tikiwiki/code/64379 Author: chibaguy Date: 2017-10-26 05:45:26 +0000 (Thu, 26 Oct 2017) Log Message: ----------- [UPD] Further update social layout navbar construction and styling. Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/social/layout_view.tpl
Revision: 64316 http://sourceforge.net/p/tikiwiki/code/64316 Author: chibaguy Date: 2017-10-18 16:58:00 +0000 (Wed, 18 Oct 2017) Log Message: ----------- [FIX] Typo (heading should be header). Modified Paths: -------------- branches/experimental/bootstrap4/templates/module.tpl
Revision: 64308 http://sourceforge.net/p/tikiwiki/code/64308 Author: chibaguy Date: 2017-10-18 10:20:21 +0000 (Wed, 18 Oct 2017) Log Message: ----------- [UPD] Plugin warning updated to BS4 (more class changes, etc.). Modified Paths: -------------- branches/experimental/bootstrap4/templates/tiki-plugin_blocked.tpl
Revision: 64307 http://sourceforge.net/p/tikiwiki/code/64307 Author: chibaguy Date: 2017-10-18 10:18:43 +0000 (Wed, 18 Oct 2017) Log Message: ----------- [UPD] Updated button types (classes) for Bootstrap 4 (no more "default"; now "primary, secondary, etc.") Modified Paths: -------------- branches/experimental/bootstrap4/lib/smarty_tiki/function.button.php
Revision: 64306 http://sourceforge.net/p/tikiwiki/code/64306 Author: chibaguy Date: 2017-10-18 09:41:05 +0000 (Wed, 18 Oct 2017) Log Message: ----------- [UPD] Plugin warning updated to BS4. Todo: find (or wait for from Bootstrap) method for auto-inverse text color against dark background. Modified Paths: -------------- branches/experimental/bootstrap4/templates/tiki-plugin_blocked.tpl
Revision: 64302 http://sourceforge.net/p/tikiwiki/code/64302 Author: chibaguy Date: 2017-10-17 15:55:08 +0000 (Tue, 17 Oct 2017) Log Message: ----------- [UPD] Update basic and social layout files to flexbox (social navbar not right yet). Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/basic/layout_view.tpl branches/experimental/bootstrap4/templates/layouts/social/layout_view.tpl
Revision: 64301 http://sourceforge.net/p/tikiwiki/code/64301 Author: chibaguy Date: 2017-10-17 11:55:22 +0000 (Tue, 17 Oct 2017) Log Message: ----------- [UPD] Update to flexbox layout classes. Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/basic/layout_view.tpl
Revision: 64297 http://sourceforge.net/p/tikiwiki/code/64297 Author: jonnybradley Date: 2017-10-17 10:37:26 +0000 (Tue, 17 Oct 2017) Log Message: ----------- [FIX] bootstrap4: popper.js was removed from BS4, replace temporarily with the CDN version for a quick fix (thanks chibaguy) Modified Paths: -------------- branches/experimental/bootstrap4/lib/setup/theme.php
Revision: 64296 http://sourceforge.net/p/tikiwiki/code/64296 Author: chibaguy Date: 2017-10-17 10:02:07 +0000 (Tue, 17 Oct 2017) Log Message: ----------- [UPD] Less to SCSS transition (update file names, variables, etc.). Also (so far) made a simple replacement of "panel" with "card" in module.tpl. Modified Paths: -------------- branches/experimental/bootstrap4/templates/module.tpl (plus theme files)
Revision: 64190 http://sourceforge.net/p/tikiwiki/code/64190 Author: chibaguy Date: 2017-10-10 04:10:27 +0000 (Tue, 10 Oct 2017) Log Message: ----------- [UPD] Beginning Less to SCSS transition (updating variable name syntax). Modified Paths: -------------- branches/experimental/bootstrap4/templates/styleguide/sections/navbars.tpl (plus theme files)
Revision: 64184 http://sourceforge.net/p/tikiwiki/code/64184 Author: jonnybradley Date: 2017-10-09 09:13:47 +0000 (Mon, 09 Oct 2017) Log Message: ----------- [FIX] bootstrap4: Catch all scss exceptions Modified Paths: -------------- branches/experimental/bootstrap4/lib/core/Tiki/Command/ScssCompileCommand.php
Revision: 64183 http://sourceforge.net/p/tikiwiki/code/64183 Author: jonnybradley Date: 2017-10-09 08:40:01 +0000 (Mon, 09 Oct 2017) Log Message: ----------- [FIX] bootstrap4: Removed exceptions display by mistake - oops, back now Modified Paths: -------------- branches/experimental/bootstrap4/lib/core/Tiki/Command/ScssCompileCommand.php
Revision: 64182 http://sourceforge.net/p/tikiwiki/code/64182 Author: jonnybradley Date: 2017-10-09 08:28:55 +0000 (Mon, 09 Oct 2017) Log Message: ----------- [ENH] bootstrap4: Use scss compile directly in the ScssPhp\Compiler, so we can handle exceptions and display the problem rather than outputting them to the css file Modified Paths: -------------- branches/experimental/bootstrap4/lib/core/Tiki/Command/ScssCompileCommand.php
Revision: 64178 http://sourceforge.net/p/tikiwiki/code/64178 Author: jonnybradley Date: 2017-10-09 05:24:33 +0000 (Mon, 09 Oct 2017) Log Message: ----------- [ENH] bootstrap4: Add scss:compile command and remove less (untested, scss files coming soon Modified Paths: -------------- branches/experimental/bootstrap4/lib/core/Tiki/Command/ConsoleApplicationBuilder.php Added Paths: ----------- branches/experimental/bootstrap4/lib/core/Tiki/Command/ScssCompileCommand.php Removed Paths: ------------- branches/experimental/bootstrap4/lib/core/Tiki/Command/LessCompileCommand.php
Revision: 64177 http://sourceforge.net/p/tikiwiki/code/64177 Author: jonnybradley Date: 2017-10-09 04:43:29 +0000 (Mon, 09 Oct 2017) Log Message: ----------- [UPD] bootstrap4: Add leafo/scssphp and remove less.php Modified Paths: -------------- branches/experimental/bootstrap4/vendor_bundled/composer.json branches/experimental/bootstrap4/vendor_bundled/composer.lock
Revision: 64176 http://sourceforge.net/p/tikiwiki/code/64176 Author: jonnybradley Date: 2017-10-09 04:09:40 +0000 (Mon, 09 Oct 2017) Log Message: ----------- [FIX] bootstrap4: Add include for bundled popper.js now required for bootstrap4 dropdowns Modified Paths: -------------- branches/experimental/bootstrap4/lib/setup/theme.php
Revision: 64175 http://sourceforge.net/p/tikiwiki/code/64175 Author: chibaguy Date: 2017-10-09 03:44:03 +0000 (Mon, 09 Oct 2017) Log Message: ----------- [FIX] Use correct Bootstrap 4 beta information. Modified Paths: -------------- branches/experimental/bootstrap4/vendor_bundled/composer.json
Revision: 64174 http://sourceforge.net/p/tikiwiki/code/64174 Author: chibaguy Date: 2017-10-09 03:40:27 +0000 (Mon, 09 Oct 2017) Log Message: ----------- [FIX] Use correct Bootstrap 4 beta information. Modified Paths: -------------- branches/experimental/bootstrap4/vendor_bundled/composer.lock
Revision: 64173 http://sourceforge.net/p/tikiwiki/code/64173 Author: chibaguy Date: 2017-10-09 02:10:06 +0000 (Mon, 09 Oct 2017) Log Message: ----------- [FIX] Use better Bootstrap 4 version number. Modified Paths: -------------- branches/experimental/bootstrap4/vendor_bundled/composer.json
Revision: 64172 http://sourceforge.net/p/tikiwiki/code/64172 Author: chibaguy Date: 2017-10-08 16:40:00 +0000 (Sun, 08 Oct 2017) Log Message: ----------- [UPD] Switch to Bootstrap 4 beta. Modified Paths: -------------- branches/experimental/bootstrap4/vendor_bundled/composer.json
[+] Testing a quick and dirty BS4 integration (older information)
Two kinds of changes to deal with
Looks like there are basically two kinds of changes we'll need to cope with. One is the switch from Less to Sass. That's pretty straightforward as it mostly involves file names and variable names in those files (@variable to $variable, etc.). Of course, there are some method differences but probably not many that will cause trouble for us (one I came across is a color function - Less uses "spin" and Sass uses "adjust_color"). Also, paths like the image path variable have slightly different syntax. But I adjusted these as I came across them and will post some docs.
The second kind of change is with the Bootstrap bits themselves. In my "trunk - bootstrap 4 alpha", I found the grid layout and typography worked nicely already (BS4 switches to rem for the grid and for the typography), but panels and wells have been replaced by the card class, so in the templates we're going to have to do those replacements. Forms, especially horizontal forms, have changed quite a bit and will need to be adjusted. Also, the navbar is being simplified, as apparently we're not alone in having trouble wrangling content into that area. Menus and tabs weren't working yet either in my installation or at the Bootstrap 4 demo so apparently, they're still being worked out.
Looks like there are also Sass-variable files for Chosen; not sure about Table-sorter, but with Sass being more popular actually than Less, chances are good we can find support.
Interestingly, for Bootstrap 6, they're planning to move from Sass to PostCSS. I'm still reading about PostCSS, which has a lot of momentum. Apparently, its power comes from the modules you add to it; it can do the standard Sass thing but can be configured to do custom things so you're not limited to the abilities of Sass or Less or whatever.
Useful links
Bootstrap 4
https://getbootstrap.com - Overview - currently v4.0.0-beta
https://getbootstrap.com/docs/4.0/layout/overview/ - Bootstrap 4 documentation
https://github.com/twbs/bootstrap/milestones
http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/
https://www.quackit.com/bootstrap/bootstrap_4/examples/
https://scotch.io/bar-talk/whats-new-in-bootstrap-4
http://bootstrapbay.com/bootstrap4/ (Bootstrap 4 Cheatsheet)
https://medium.com/wdstack/bootstrap-4-whats-new-visual-guide-c84dd81d8387#.b2sxbfsf6
http://www.hongkiat.com/blog/boostrap-4-best-features/
https://hackerthemes.com/bootstrap-cheatsheet/
https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/
https://www.udemy.com/bootstrap-4/
http://codepen.io/search?q=bootstrap+cards&limit=all&depth=everything&show_forks=false
SCSS (Sass)/Less
http://scout-app.io - Scout-App - Easy/informative SCSS compiling
https://gist.github.com/chriseppstein/674726 - Sass/Less Comparison
https://css-tricks.com/sass-vs-less/
Flexbox (Bootstrap 4 default layout method)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/