History: Bootstrap 3 to 4 transition

• «
• »

            {DIV(class="lead")} [http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/|Bootstrap 4 is beta now] so we're closer to the 4.0 release. There's no official timetable for this but we do know it's coming so we want to get prepared. Tiki, since version 13, is integrating Bootstrap 3 for a layout and styling framework. When Bootstrap 4.0 is released and other factors are positive, Tiki will shift from Bootstrap 3 to Bootstrap 4.{DIV}
("Other factors" might be such things as outside theme developers/designers shifting to Bootstrap 4, upgrades of Tiki's external libraries such as [https://github.com/sorich87/bootstrap-tour/issues/554|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 will back the merge of the branch back to trunk smoother.

 {BOX()} http://sourceforge.net/p/tikiwiki/code/64316 {CODE()}
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
{CODE} {BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64308 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64307 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64306 {CODE()}
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
{CODE}{BOX}
{BOX()} http://sourceforge.net/p/tikiwiki/code/64302 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64301 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64297 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64296 {CODE()}
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)
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64190 {CODE()}
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)
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64184 {CODE()}
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
{CODE}{BOX}
{BOX()} http://sourceforge.net/p/tikiwiki/code/64183 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64182 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64178 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64177 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64176 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64175 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64174 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64173 {CODE()}
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
{CODE}{BOX}

{BOX()} http://sourceforge.net/p/tikiwiki/code/64172 {CODE()}
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
{CODE}{BOX}

!!- Testing a quick and dirty BS4 integration (older information)
To check what's necessary for the transition from 3 to 4, I made a new trunk installation on my local server and put the Bootstrap 4 package in the ''vendors_custom'' directory. I chose one theme to test with - Amelia, probably because it's at the top of the list alphabetically. I used PhpStorm and its SCSS plugin for compiling. 

To get the stylesheets to compile, I made a "bridge file" to map old variables in existing-theme Less files to new Sass equivalents or else just to some value, and kept fixing missing variable definitions until the compile errors stopped.

PHPStorm has a Sass file watcher plugin, but you have to get and install the Sass watcher if you don't have it already. It's a Ruby gem. There are also some PHP scripts for compiling Sass files, so we'll have another chance to work the kinks out of that method.

!!! Steps of the test
* First of all, the theme's "less" directory needs to be renamed "scss". (While the CSS preprocessor is called "Sass", the directory name and file extension is ".scss".)
* To be consistent with the convention, I added an underscore to the beginning of all Sass partial files (the files that are imported), like "_tiki-selectors.scss".
* Within the Sass files, the variable name syntax needs to be converted, so instances of "@variable-name" are changed to "$variable-name".
* In Bootstrap 3, the "variables.less" file is essentially a list of definitions for variables that can be modified for the theme. In Bootstrap 4, there is no exact equivalent. Instead there is a "_custom.scss" file that is empty initially but can contain new definitions of variables to override the Bootstrap defaults.
* To customize a site or theme, the idea now is to use a ''_custom.scss'' file that contains a copy of the rules in "_variables.less" to be edited. Of course not all of the older variable names still exist, and some new ones are added. Since the new _variables.scss" is long and many variables aren't likely to need overriding, a good approach might be to make a general "_custom.scss" template with variables most often/likely specified by themes and compare this to the old "variables.less" file to do the updating/overriding.
* Less-to-Sass syntax conversions are needed in some theme and "base_files" files for things like image paths, color manipulation, etc.

In my test, I just modified one Smarty file - templates/layouts/basic/layout_view.tpl - because on first view the page columns were out of order. I rearranged div#col2, div#col1, and div#col3 into their actual order on the page. I haven't researched it yet, but it seems the "pull", "push", and "offset" classes are no longer used. In Bootstrap 4, column layout uses Flexbox by default, so in grids there is no longer floating columns into place, adding clearfix, and so on.

!!! Test results
With just the basic adjustments to the Amelia theme files, the basic modification of layout_view.tpl, and pointing to the Bootstrap 4 lib (ignoring the Bootstrap 3 lib), the result was that the Tiki site did look and work pretty much like a Tiki site.

!!!! Issues that came up in the test
* Navbars have been revamped (and simplified) so this will have to be done in Tiki as well.
* The vertical menus were displaying horizontally. I didn't check further on this yet.
* Tabs, dropdowns and other lists containing links have new HTML so those will need updating.
* Modals, like the wiki edit help modal popup, aren't working. The shaded background appears, along with the top section of the modal, but the full modal and its content don't appear.
* Wells, panels, and so on have been replaced by "cards" so Tiki's modules, especially, and other instances of the old div classes will have to be updated.
* I understand forms have also undergone significant changes but I didn't look yet at what updating will be needed. 

!! 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 [https://twitter.com/postcss|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://github.com/twbs/bootstrap/milestones]
[http://v4-alpha.getbootstrap.com/]
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__
[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/]