History: Bootstrap 3 to 4 transition

• «
• »

            As if this writing, the Bootstrap 4 development is at its sixth alpha release, so soon there will be a beta release phase, and then the official 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.

(By other factors, this might be such things as outside theme developers/designers shifting to Bootstrap 4 as well, other themes being available for Bootstrap 4 and so on. But given the long gestation period and the cool things brought by Bootstrap 4, the transition to it is apt to be fairly fast.)

To check what's necessary in 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. 

* 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 underbar 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.

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. But there were some problems:

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

There's new JavaScript for modals and other JS-related changes.

I'll add to this page as I do more testing, etc.

!! Useful links
[http://v4-alpha.getbootstrap.com/]
[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]

[https://gist.github.com/chriseppstein/674726] - Sass/Less Comparison
[https://css-tricks.com/sass-vs-less/]