Loading...
Skip to main content
Navigation and related functionality and content
Home Page
About
Marketplace
Sample page
Wishlist at dev site
Sitemap (Categories)
Tiki Customization
Creating a theme
Converting a Bootstrap theme
Contributing, sharing or selling
Customizing icons
Tips
Template Tricks
CSS Tricks
Feature Examples
Articles
Blogs
Calendar
Forums
FAQs
Trackers
Files
Links Directory
Wiki Pages
Find
Related content
Upcoming event :
Tiki Roundtable Meeting
Thu 18 of Jul, 2024
Tiki Roundtable Meeting
Start: Thursday 18 July 2024 14:00:00 GMT-0000
End: Thursday 18 July 2024 16:00:00 GMT-0000
Tiki 27 will be the focus at this month's meeting, along with other topics that you can add to at ((Roundtable Meeting 2024 07))
Save this to my calendar
Subscribe to feed
History: Bootstrap 3 to 4 transition
View published page
Source of version: 56
(current)
{DIV(class="lead")} [http://blog.getbootstrap.com/2018/01/18/bootstrap-4/|Bootstrap 4.0.0] has now been released. Tiki, since version 13, has been integrating Bootstrap 3 for a layout and styling framework. On April 21, the Bootstrap 4 experimental branch (of the Tiki development files) was merged into trunk; branching of branch 19 is scheduled for September, with Tiki 19 set for release in October).{DIV} 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/]. !! Recent Progress (post branch 19 fork) The Bootstrap 4 experimental branch has been merged into trunk, and branch 19 has been created and is running on the "pre-dogfood" servers such as nextthemes.tiki.org. Themes.tiki.org is scheduled to be the first of the live project sites to be updated to branch 19 for testing. Issues to be dealt with that show up in this testing or local testing are listed on ((Theme and config issues at pre-dogfood servers)). !! 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. Update: All of the themes in the Tiki package now compile without errors and most styling details are implemented; in other words, the themes are mostly updated from Bootstrap 3 to Bootstrap 4 compatibility. !! 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. !! Browser Support As Bootstrap 4 states "Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3." since Tiki 19.x we are dropping the support for these too. See https://getbootstrap.com/docs/4.0/migration/#browser-support !! Updating a Tiki theme from Bootstrap 3 to 4 Please see ((Updating a Tiki theme from Bootstrap 3 to 4)) for a description of the process that I ({sign user="chibaguy" datetime="2017-12-15T10:37:36+00:00"}) have used to update the themes in the Tiki package, as well as the [https://zukathemes.com|Zukathemes] files. !! Tiki code migration !!! Generic Bootstrap changes For a summary of Bootstrap changes between 3 and 4, please read [https://getbootstrap.com/docs/4.0/migration/] . Some main points for Tiki (my {sign user="chibaguy" datetime="2018-03-01T11:21:43+00:00"} quick check): * Dropped [https://getbootstrap.com/docs/4.0/migration/#panels|panels], thumbnails, and wells for a new all-encompassing component, [https://getbootstrap.com/docs/4.0/components/card/|cards]. So all instances of these in templates, etc. and references in CSS will need to be updated. * Dropped the Glyphicons icon font. So the related files should be removed from themes/icons. * Dropped -+.page-header+- - class. The use of this in Tiki needs to be checked. * Renamed .img-responsive to .img-fluid. - This needs to be updated in the img plugin and other locations. * [https://getbootstrap.com/docs/4.0/migration/#forms-1|Forms] - multiple changes that'll need updating in Tiki tpls, etc. * Buttons: Removed .btn-default and added .btn-secondary. - Instances of btn-default in tpls, etc. will need to be updated so (in this order): # Change instances of btn-primary to btn-secondary. # Change instances of btn-default to btn-primary. * Dropdowns: Dropdown items now require the -+.dropdown-item+- class, so this needs updating. * [https://getbootstrap.com/docs/4.0/migration/#modal|Modals] - multiple changes to deal with. Update: thanks to Jonny for making modals work in the experimental branch. * [https://getbootstrap.com/docs/4.0/migration/#navs|Navs] and [https://getbootstrap.com/docs/4.0/migration/#navbar|navbars] - Totally rewritten using flexbox. Also, .navbar-inverse and .navbar-default are renamed to .*-dark and .*-light, matching color schemes used elsewhere. Also .navbar-primary is supported, so I think Tiki's Admin Look & Feel should have a checkbox to choose which navbar color scheme to use per site. Themes should support all three variants. * [https://getbootstrap.com/docs/4.0/migration/#pagination|Pagination] - Totally rewritten using flexbox. * [https://getbootstrap.com/docs/4.0/migration/#carousel|Carousel]: "Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons." !!! Specific Tiki code tasks/bugs * Side column show/hide anchors don't work properly. ** {icon name="thumbs-up"} Fixed in r66950 for basic layout; implement in other layouts and test. * Card (formerly "panel") background and foreground colors aren't set by card classes, but by separate text and background color classes, like -+bg-primary+- and -+text-dark+-. Discussion is needed about how to replace our previously used -+panel-default+- coloring for former panels coded directly in .tpl files. For modules, the color classes can be input as parameters. ** This is being resolved, with standard (no particular coloring) cards plus alert colors where needed. Maybe remaining instances to convert. * Navbars, instead of having -+*-default+- and -+*-inverse+- classes for coloring, now use -+*navbar-light+- and -+*-dark+-, and -+bg-light+- and -+bg-dark+- classes can also be used, and other background color possibilities possible. So themes should support at least light and dark. The color of the navbar itself (as a menu) can be set in admin-modules (so works already for the "social" fixed-top layout's top ).%%% {icon name="exclamation"} But there should be an admin L&F selector for the top and topbar divs beyond the navbar, for the site. * {icon name="exclamation"} (CMS) Article display will need revising to accommodate FB link image specs. The BS4 equivalent of what is being used now for Tiki's CMS articles is very simple and has no CSS opportunities for modifying the displayed image size. * {icon name="exclamation"} Hopefully the article layout revising can also enable positioning the article image / featured image either to the side or above the article text ([https://dev.tiki.org/item6596-Wish-enable-post-article-layout-that-has-large-image-above]). * --The new drag-and-drop menu admin doesn't seem to work.-- {icon name="thumbs-up"} Ok now. * --Popovers containing links disappear too quickly on hover so the links can't be clicked.-- Fixed. ** --Was fixed but now unfixed again. Discussion started about open on click vs. open on hover. High priority to fix because it's hard to admin a test site with this broken.-- Fixed again {icon name="thumbs-up"}. * {icon name="exclamation"} Tour doesn't work, in a quick test of an existing tour. The first popup appears but the second doesn't. But according to [https://github.com/sorich87/bootstrap-tour/issues/554|the Bootstrap Tour site] it should work so we need to be sure we're linking to the latest master and that our implementation is ok. !!! Other possible related changes * --Consolidate layout templates to reduce redundancy. Maybe the two fixed-navbar layouts could be reduced to one, and maybe the "classic" and "wide side column" layouts could be reduced to one. Or maybe all could be reduced to one if there is a checkbox in L&F admin for "Fixed-top navbar".-- {icon name="thumbs-up"} Reduction to three layout templates is done other than renaming and maybe other details. * Consolidate menu types ("Bootstrap" and "CSS/suckerfish" and Tiki legacy) and add Smartmenus ([http://smartmenus.org/]) to enhance default Bootstrap menus. ** Pluses: *** Simpler menu backend construction *** Simpler CSS to maintain (and learn, for new theme authors) ** Minuses: *** Bootstrap menus natively have only parent and child levels (but this can be overcome with Smartmenus) *** Bootstrap parent link only opens dropdown and isn't for navigation (but [https://stackoverflow.com/questions/25692514/bootstrap-how-do-i-make-dropdown-navigation-parent-links-an-active-link], etc.). * Related to these, maybe a good time to implement ((Off-canvas menus and sidebars)). * Put wiki page elements (like wiki topline, pagebar, action icons for print, etc.) in modules for more flexibility in page layout. * Make the meaning of button colors intuitive and consistent: See ((Organization of button colors in Tiki)). ** {icon name="thumbs-up"} Mostly done. * Add second horizontal scroll bar at the top of scrollable tables and other wide content - [https://github.com/sniku/jQuery-doubleScroll] or equivalent (the Github link to the demo site, etc. is now broken) but there's a demo at [https://codepen.io/hellokatili/pen/yegxjP]. {sign user="chibaguy" datetime="2018-07-27T10:08:59+00:00"} !!+ 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. {BOX()} http://sourceforge.net/p/tikiwiki/code/65126 {CODE()} Revision: 65126 http://sourceforge.net/p/tikiwiki/code/65126 Author: chibaguy Date: 2018-01-08 06:14:25 +0000 (Mon, 08 Jan 2018) Log Message: ----------- [UPD] Update Classic layout's module.tpl (has shadow div) relative to default modoule.tpl, and to Bootstrap 4 beta 3. Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/classic/module.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/65112 {CODE()} Revision: 65112 http://sourceforge.net/p/tikiwiki/code/65112 Author: chibaguy Date: 2018-01-07 12:26:15 +0000 (Sun, 07 Jan 2018) Log Message: ----------- [FIX] Update navbar class for fixed-top position (.navbar-fixed-top -> .fixed-top). Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/fixed_top_modules/layout_view.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/65093 {CODE()} Revision: 65093 http://sourceforge.net/p/tikiwiki/code/65093 Author: chibaguy Date: 2018-01-05 17:53:05 +0000 (Fri, 05 Jan 2018) Log Message: ----------- [FIX] Adjust grid classes on center, left and right columns for correct size and order in various display sizes. Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/fixed_top_modules/layout_view.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/65092 {CODE()} Revision: 65092 http://sourceforge.net/p/tikiwiki/code/65092 Author: chibaguy Date: 2018-01-05 17:47:55 +0000 (Fri, 05 Jan 2018) Log Message: ----------- [FIX] Adjust grid classes on center, left and right columns for correct size and order in various display sizes. Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/header_middle_footer_containers_3-6-3/layout_view.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/65091 {CODE()} Revision: 65091 http://sourceforge.net/p/tikiwiki/code/65091 Author: chibaguy Date: 2018-01-05 17:03:14 +0000 (Fri, 05 Jan 2018) Log Message: ----------- [FIX] Adjust grid classes on center, left and right columns for correct size and order in various display sizes. Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/basic/layout_view.tpl branches/experimental/bootstrap4/templates/layouts/classic/layout_view.tpl branches/experimental/bootstrap4/templates/layouts/social/layout_view.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/65089 {CODE()} Revision: 65089 http://sourceforge.net/p/tikiwiki/code/65089 Author: chibaguy Date: 2018-01-05 14:06:02 +0000 (Fri, 05 Jan 2018) Log Message: ----------- [FIX] Put side-col-toggle divs in a row div to prevent interference with content columns. (Todo: find out why flex widths aren't working.) Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/social/layout_view.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/65088 {CODE()} Revision: 65088 http://sourceforge.net/p/tikiwiki/code/65088 Author: chibaguy Date: 2018-01-05 12:48:15 +0000 (Fri, 05 Jan 2018) Log Message: ----------- [FIX] Adjust grid classes on center, left and right columns for correct size and order in various display sizes. Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/social/layout_view.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/65033 {CODE()} Revision: 65033 http://sourceforge.net/p/tikiwiki/code/65033 Author: chibaguy Date: 2017-12-31 09:36:39 +0000 (Sun, 31 Dec 2017) Log Message: ----------- [UX] Don't display side-column toggles in narrow screens; adjust grid classes. Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/basic/layout_view.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/64411 {CODE()} Revision: 64411 http://sourceforge.net/p/tikiwiki/code/64411 Author: chibaguy Date: 2017-10-28 10:07:43 +0000 (Sat, 28 Oct 2017) Log Message: ----------- [UPD] Add dropdown-link classes in Page actions dropdown. Modified Paths: -------------- branches/experimental/bootstrap4/templates/tiki-wiki_topline.tpl Modified: branches/experimental/bootstrap4/templates/tiki-wiki_topline.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/64410 {CODE()} Revision: 64410 http://sourceforge.net/p/tikiwiki/code/64410 Author: chibaguy Date: 2017-10-28 08:48:26 +0000 (Sat, 28 Oct 2017) Log Message: ----------- [UPD] Add Bootstrap 4 classes to navbar ul item and a . Modified Paths: -------------- branches/experimental/bootstrap4/lib/smarty_tiki/block.tabset.php Modified: branches/experimental/bootstrap4/lib/smarty_tiki/block.tabset.php {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/64409 {CODE()} Revision: 64409 http://sourceforge.net/p/tikiwiki/code/64409 Author: chibaguy Date: 2017-10-28 08:22:36 +0000 (Sat, 28 Oct 2017) Log Message: ----------- [UPD] Increase thumbnail size. Modified Paths: -------------- branches/experimental/bootstrap4/templates/admin/include_look.tpl Modified: branches/experimental/bootstrap4/templates/admin/include_look.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/64408 {CODE()} Revision: 64408 http://sourceforge.net/p/tikiwiki/code/64408 Author: chibaguy Date: 2017-10-28 08:17:16 +0000 (Sat, 28 Oct 2017) Log Message: ----------- [UPD] Update theme selector and thumbnail to Flexbox. Modified Paths: -------------- branches/experimental/bootstrap4/templates/admin/include_look.tpl Modified: branches/experimental/bootstrap4/templates/admin/include_look.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/64407 {CODE()} Revision: 64407 http://sourceforge.net/p/tikiwiki/code/64407 Author: chibaguy Date: 2017-10-28 07:50:33 +0000 (Sat, 28 Oct 2017) Log Message: ----------- [UPD] Update remaining layout files to Flexbox. Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/basic/layout_view.tpl branches/experimental/bootstrap4/templates/layouts/classic/layout_view.tpl branches/experimental/bootstrap4/templates/layouts/fixed_top_modules/layout_view.tpl branches/experimental/bootstrap4/templates/layouts/header_middle_footer_containers_3-6-3/layout_view.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/64383 {CODE()} Revision: 64383 http://sourceforge.net/p/tikiwiki/code/64383 Author: chibaguy Date: 2017-10-26 16:09:30 +0000 (Thu, 26 Oct 2017) Log Message: ----------- [FIX] Fix content column order. Modified Paths: -------------- branches/experimental/bootstrap4/templates/layouts/basic/layout_view.tpl Modified: branches/experimental/bootstrap4/templates/layouts/basic/layout_view.tpl {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/64381 {CODE()} 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.) ... {CODE}{BOX} {BOX()} http://sourceforge.net/p/tikiwiki/code/64379 {CODE()} 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 {CODE}{BOX} {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} {BOX()}http://sourceforge.net/p/tikiwiki/code/65853{CODE()} Revision: 65853 http://sourceforge.net/p/tikiwiki/code/65853 Author: jonnybradley Date: 2018-04-01 07:47:12 +0000 (Sun, 01 Apr 2018) Log Message: ----------- [FIX] bootstrap4: Fix three of the ways bs modals are opened for AJAX content use, buttons with data attributes, openModal and clickModal (i.e. tracker fields) and plugin edit. Some refactoring and convergence would be nice after we merge back to trunk... Modified Paths: -------------- branches/experimental/bootstrap4/lib/jquery_tiki/pluginedit.js branches/experimental/bootstrap4/lib/jquery_tiki/tiki-jquery.js {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. There are also Sass-variable files for Chosen. And https://github.com/haubek/bootstrap4c-chosen can be added. It's MIT licensed but not at Packagist.com currently. But it works great, enabling theme colors nicely in Chosen selectors. Interestingly, for [https://twitter.com/mdo/status/591364406816079873?lang=en|Bootstrap 5], they're planning to move from Sass to [https://twitter.com/postcss|PostCSS]. ("Bootstrap 6" written originally in the previous sentence was a typo; thanks to Marc for correcting that.) PostCSS 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__ [http://blog.getbootstrap.com/2018/01/18/bootstrap-4/] - Bootstrap 4.0.0 release announcement [https://getbootstrap.com] - Overview - Currently v4.0.0 [https://getbootstrap.com/docs/4.0/getting-started/introduction/] - Bootstrap 4 documentation [https://github.com/twbs/bootstrap/milestones] [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/] [https://github.com/haubek/bootstrap4c-chosen] __Flexbox__ (Bootstrap 4 default layout method) [https://css-tricks.com/snippets/css/a-guide-to-flexbox/] [https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/|Smashing Magazine: What Happens When You Create A Flexbox Flex Container?] -= Page Alias=- (alias(Bootstrap+3+to+4+transition))