Update Twitter Bootstrap to version 3

[jcoufal]
Newest version of Bootstrap is v3 RC1. Despite the fact that it is release candidate, v3 RC1 is stable and enhances a lot of features. In the case of Twitter Bootstrap, which is mostly CSS library, I don't think that RC is a threat which needs to block us until there is final release out (furthermore they don't have published any schedule).

[david-lyle] I think this is overdue.

[jtomasek]
It seems like a good time to implement this as Bootstrap 3 has been officially released [1].

Implementation steps:
- replace bootstrap js and less with new ( + datepicker for v. 3)
- add glyphicons font, remove old glyphicons images
- upgrade class names according to [2]
- fix styles in horizon.less where needed

[1] http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
[2] http://getbootstrap.com/getting-started/#migration

[jcoufal 2013-08-22]
Yes, Bootstrap 3 release is great news! Hurray! :)

I would like to see more powerful library of font-icons instead of Bootstrap one, so in order not to change icons two times, I suggest to first replace bitmap icons with new font library [1] and then do the bootstrap update without icons.

[1] https://blueprints.launchpad.net/horizon/+spec/font-icons

[jtomasek]
I have started updating bootstrap less files and I bumped into compile problems with the new lesscpy compiler that we use. The compiled css code is incorrect and when running the compilation from terminal, about 200 syntax errors occur. This is probably related to certain features of less not being supported by lesscpy. I have created a GIthub issue for lesscpy [1].
We are not able to use Bootstrap 3 until these issues are resolved.

[1] https://github.com/robotis/Lesscpy/issues/22

[hayashi]
There are a few things I'd like to comment.
Bootstrap 3 doesn't support IE7 or IE6. Is it OK for Horizon? Personally it is no problem though. Also I think it's better to specify which browsers are supported by Horizon. I believe that to ensure working correctly in the browsers is important Horizon is used more in production environments.

Bootstrap 3 has responsive feature, are you going to use this feature?
If so,
https://blueprints.launchpad.net/horizon/+spec/horizon-mobile-ui
It will be related to this BP.

[jcoufal 2013-09-03]
Hi Toshi, this is great note. I think you are right, this is not big deal for us. I think that specifying supported browsers would be sufficient. If we want to provide good look and user experience in the UI, we can't support dinosaurs forever.

Browser statistics:
* In August 2013, usage of IE7 was 0.6 % and of IE7 it was 0.1 %, both still decreasing [1]
* In past year, usage of IE7 is 0.73 %, IE 6 less than 0.5 % (it was unspecified) [2]

And I think that Microsoft already cut support for both IE6 as well as IE7 (if I remember correctly, it was 2010 for IE7).

Just interesting fact, it is already 7 years when IE7 was released and 12 years since IE6 was released (wow).

I would confidently say, that we can safely state that upstream doesn't support IE6 & IE7. I don't think we are going to lose much Horizon users (based on statistics). If any downstream needs support for older IEs, they should add it. (btw, I am not very sure about current IE6 support in Horizon, is it supported?)

[1] http://www.w3schools.com/browsers/browsers_explorer.asp
[2] http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201208-201308-bar

As for responsive features, they definitely won't be part of current blueprint. There is lot of work in renaming all classes just to cover all changes in v3.

My opinion is that we shouldn't invest much time into redoing current styles into responsive way, since we want to help with various UI enhancements and being responsive in those changes, might be the best way to go (since mobile is not our target one). But definitely it would be nice to think of that in our future enhancements.

[jcoufal 2013-09-04]
One more update to IE support, I assured on the Horizon meeting, we support currently IE8+ and from 2014, it would be IE9+ (Microsoft dropping support for IE9). So we are safe with Bootstrap v3 here.

[jtomasek]

As Bootstrap 3 has responsive features out of the box, it means that as we upgrade, we'll get quite a lot of responsive features (mobile layout etc.) for free. It will need some subsequent optimizations but I think it is a good start.

Regarding to horizon-mobile-ui blueprint, I think this is unrelated as horizon-mobile-blueprint goes for totally separate UI designated specifically for mobile phones. (see blueprint description). Although I am not 100% sure about the necessity of that blueprint.

[hayashi]
For the IE, it sounds good to me. How about other browsers such as Chrome, Firefox and Safari?
I think it would be better to guarantee for the browsers working well at least the latest stable version.
Although It is rare to encounter cross browser issues recently, sometimes still happen ( I encountered some SVG issues in Firefox recently). As my experience, developers check only their favorites browsers :-), in terms of UX, we should check the new feature works well in the browsers if the feature relates UI. I'm sorry this might be another topic from this BP, but I think it is important for UX matters.

Regarding responsive feature, that's make sense. There are a lot of tasks to improve UI before being responsive. As jtomasek mentioned I'm not sure the necessity of horizon-mobile-ui blueprint as well. We don't have much resource to develop, to create and maintain 2 versions of UI is high cost. So I think using responsible feature is affordable choice for the mobile UI.

[jtomasek]
I agree with making sure that everything works properly in all browsers. Less and Bootstrap are great helping tools, as they are already taking care of browser support across the board, so when using it's features we can be sure that it is supported in all browsers.

You can have a look at Bootstrap docs on supported browsers here: http://getbootstrap.com/getting-started/#browsers I am making sure that I add necessary meta tags.

Gerrit topic: https://review.openstack.org/#q,topic:bp/Added,n,z

Addressed by: https://review.openstack.org/49710
    Upgrade bootstrap 2 to bootstrap 3

Addressed by: https://review.openstack.org/49712
    Bootstrap 2 to Bootstrap 3 update

[jtomasek]
I have created 2 patches ^. First one is using the lessc library to compile Less so it is possible to review the Horizon with Bootstrap 3 now. The second one is using lesscpy library that is currently in Horizon and that is not able to compile Bootstrap 3 code at the moment. So next step is to get lesscpy library to support all necessary Less features. The repository is here: https://github.com/robotis/Lesscpy. I have already identified most of the issues, although I'll go through the compilation errors again and then try to help fix them.

[2014-01-12 david-lyle] Moving to i-3 due to being blocked by lesscpy shortcomings. If lesscpy doesn't support newer features soon, maybe considering another framework besides bootstrap.

[2014-01-13 Toshi]
How about Sass Bootstrap? It is using Sassy CSS (SCSS) instead of Less to build the Twitter Bootstrap components. Basically sass is almost similar grammer to less(more powerful than less!).
Sass uses ruby though, also it seems there are a few python port of sass.
http://alademann.github.io/sass-bootstrap/
http://pythonhosted.org/scss/
https://github.com/Kronuz/pyScss

[2014-02-03 Toshi]
FYI, Now Bootstrap officially supports Sass.
https://github.com/twbs/bootstrap-sass

[2014-02-03 david-lyle]
lesscpy appears to be ready https://review.openstack.org/#/c/70619/

[2014-02-04 enykeev]
it is not ready http://paste.openstack.org/show/62414/ and it probably won't be in a near future. Here is a difference between lessc (left column) and lesscpy (right column) output on a less.js test suite: http://paste.openstack.org/show/62420/ Lesscpy wasn't able to successfully compile more than a half of the files and has a bunch of important differences in the files he was able to compile. It seems like lesscpy is based not on a less.js but on a merely an authors understanding of how less should be compiled.

[david-lyle 2014-02-16] given the state of lesscpy and discussion required for the path forward, moving out of icehouse

Gerrit topic: https://review.openstack.org/#q,topic:bp/bootstrap-update,n,z

Addressed by: https://review.openstack.org/90371
    Use SCSS instead of LESS

Addressed by: https://review.openstack.org/107042
    Update Twitter Bootstrap to version 3