oscarmlage.com

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===== Bootstrap research =====

After creating the mockup I'm playing with different bootstrap versions + the html we have to take some decision about what to do with bootstrap.

==== General ====

=== Bootstrap 2.3.0 (the one we have in production) + our css/js code ===
  * Layouts are mostly working (spanX...)
  * Minor adjustments needed (padding, margin, fonts, line-heights...), check the ''Specific rules'' in the source code of the mockup.
  * Replace all the responsive rules for proper ones, because all the environment (wrapper) has changed, responsive rules are not valid anymore.
  * Adjust font-style in titles
  * Adjust the video area
  * Delete the .spanX class to pick te 100% of the space (profile, webinars...)
  * Same issues found in Bootstrap-2.3.2 (last version in branch 2.x)
  * **IMHO**: Easy to move our version to the last of this release (2.3.2), we have to adjust details but it's doable. As we're going to change environment (common parts) we should go page per page but changes should be few and common.

^ pros ^ cons ^
| The easier way to proceed | |
| It's running .less as we do now | |
| Changing the environment (common parts) don't need too much changes | |
| | Need a quick page per page check |
| | Too old (27.Jul.2013), unresolved bugs |


=== Bootstrap 3.3.7 (last version of 3.x branch) + our css/js code ===
  * Fonts need adjusts
  * Buttons CSS are not working
  * Layouts depending on spanX are not working. Span rules are not working at all, we should need to go through all the pages to check layouts
  * Replace all the responsive rules for proper ones, because all the environment (wrapper) has changed, responsive rules are not valid anymore.
  * Adjust font-style in titles
  * Adjust the video area
  * Delete the .spanX class to pick te 100% of the space (profile, webinars...)
  * **IMHO**: Not that easy to change to the 3.x branch because the syntax has changed a lot (''spanX'' is no longer existing, now it's like ''col-md-X''...)  and we should review page per page to check the layout. Sooner or later we should review page per page to adapt our contents to responsive resolutions... and don't know really if it's better to adapt the content to bootstrap-3 (or bootstrap-4) or just use bootstrap for .js components and make our own layouts. But this task is probably out of the scope of this ticket,

^ pros ^ cons ^
| Future releases are going to keep the new syntax | |
| It's the stable release | |
| It's running .less as we do now | |
| | Layout syntax has changed A LOT from 2.x branch |
| | Some other elements (as buttons i.e.) has changed too |
| | Need to check page by page, deeply check because layout syntax is not the same |


=== Bootstrap 4.0-alpha (last version of 4.x branch, v4-alpha) ===
  * They've dropped support for IE8 and IOS6 (IE9 and IOS7+ are ok)
  * Bootstrap4 changes LESS -> SASS
  * Changed font-base 14px -> 16px
  * Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
  * Dropped the Affix jQuery plugin
  * They're using node + grunt + npm + ruby_bundler to create the //dist// (css/js) from source
  * We can just download the compiled css/js to use it but we lose all the mixins features
  * http://v4-alpha.getbootstrap.com/getting-started/build-tools/#tooling-setup
  * http://v4-alpha.getbootstrap.com/migration/
  * **IMHO**: Too much changes for a refactor. Probably it worths starting from scratch, but it's not our case.

^ pros ^ cons ^
| Last release (with all the consequences) | |
| | LESS -> SASS (not a big inconvenient because syntax is 90% the same) |
| | It's an alpha release, not closed yet |
| | Layout syntax has changed A LOT from 2.x branch |
| | Some other elements (as buttons i.e.) has changed too |
| | Need to check page by page, deeply check because layout syntax is not the same |


=== Subjective summary from my point of view ===

  - I would discard any alpha version, it's not closed/stable yet and things are moving. On the other hand -> too much work to move from ''2.x'' to ''4.x''.
  - Upgrade from ''2.x'' to ''3.x'' is hard too, syntax has changed and we need to review every page. On the other hand we should review every page some time to try to adapt contents at least to tablet resolution. Dunno if the moment is now.
  - Upgrade from ''2.3.0'' to ''2.3.2'' is the faster option. It's almost done because the syntax has not changed. We have to check every page to see if the new css code (the new one from common parts) is doing bad things out there, but it should be not that difficult.
  - Use our own layouts + bootstrap for js components: If we depend the less from bootstrap we're not going to be involved in issues like this one, but there are some spots to discuss here:
    - We don't want to change all the html, so the ''new-css-stuff'' has to be compatible with our html markup
    - Have to look through all the pages changing/adapting only layout markup BUT other JS elements has to run as they are now (modals, dropdowns...)
    - The ''new-css-stuff'' documentation is the key to know how to properly create new contents.