oscarmlage.com

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.

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

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

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

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:
1. We don't want to change all the html, so the new-css-stuff has to be compatible with our html markup
2. 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…)
3. The new-css-stuff documentation is the key to know how to properly create new contents.