Replace Bootstrap grid with YUI grid.

Replace Bootstrap grid with YUI grid.

- Submitted on behalf of Huw due to test bug
- removed the bootstrap grid
- adding the YUI grid css and updating the elements
- move to a 18 column grid rather than 12 column for more flexibility

https://code.launchpad.net/~rharding/juju-gui/yuigrids/+merge/154927

(do not edit description out of merge proposal)

[rharding, 2013-03-22 11:48:06]

Please take a look.

[rharding, 2013-03-22 11:56:40]

Thanks Huw. I see that all the class="spanX" are replaced, but the bootstrap
files are still included in the CSS list. Is there something else that bootstrap
is still needed for you found?

If not, can we remove those files in this branch so that it's not running both
sets of grids?

[bcsaller, 2013-03-22 13:41:18]

On 2013/03/22 11:56:40, rharding wrote:
> Thanks Huw. I see that all the class="spanX" are replaced, but the bootstrap
> files are still included in the CSS list. Is there something else that
bootstrap
> is still needed for you found?
> 
> If not, can we remove those files in this branch so that it's not running both
> sets of grids?

What is the motivation for this branch, it isn't clear to me. We currently use
_some_ bootstrap styles in our code base in addition to their grid. While this
dependency is pretty thin we'd have to audit our use of classes everywhere in
the app. Additionally I believe we extend some of their classes in LESS for
dealing with things like our rounded corners and so on. 

What is the motivation to replace bootstrap? Its been largely trouble free for
us. AFAIK we don't depend on any of the jquery plugins and don't load those. We
have however provided a similar impl of one or two of the plugins riding on top
of their styles.

[rharding, 2013-03-22 13:51:35]

On 2013/03/22 13:41:18, bcsaller wrote:
> On 2013/03/22 11:56:40, rharding wrote:
> > Thanks Huw. I see that all the class="spanX" are replaced, but the bootstrap
> > files are still included in the CSS list. Is there something else that
> bootstrap
> > is still needed for you found?
> > 
> > If not, can we remove those files in this branch so that it's not running
both
> > sets of grids?
> 
> What is the motivation for this branch, it isn't clear to me. We currently use
> _some_ bootstrap styles in our code base in addition to their grid. While this
> dependency is pretty thin we'd have to audit our use of classes everywhere in
> the app. Additionally I believe we extend some of their classes in LESS for
> dealing with things like our rounded corners and so on. 
> 
> What is the motivation to replace bootstrap? Its been largely trouble free for
> us. AFAIK we don't depend on any of the jquery plugins and don't load those.
We
> have however provided a similar impl of one or two of the plugins riding on
top
> of their styles.

It's a couple fold. The initial thing is that much of the browser we want to do
as responsive blocks that work in fullscreen and sidebar modes with one set of
html. Things like the hooks tab and charm detail view. We also have the goal of
reworking the UI to work as a 100% width layout. 

Finally, so much of bootstrap has been ripped out, with the release the YUI
responsive grids in 3.9.0 we could kill a bunch of birds with one stone. The new
YUI grids can provide the responsive bits, is lighter than bootstrap, is
approved tech, and we can move off the extra dependency. Since we've got to do
the work to update the layout to function 100% width it requires auditing and
going through the css anyway to update that.

When it was brought up to Gary and Deryck we didn't realize there were plugins
tied to the styles. I'll look into that. Do you know what these are off the top
of your head?

[bcsaller, 2013-03-22 13:59:35]

On 2013/03/22 13:51:35, rharding wrote:
> On 2013/03/22 13:41:18, bcsaller wrote:
> > On 2013/03/22 11:56:40, rharding wrote:
> > > Thanks Huw. I see that all the class="spanX" are replaced, but the
bootstrap
> > > files are still included in the CSS list. Is there something else that
> > bootstrap
> > > is still needed for you found?
> > > 
> > > If not, can we remove those files in this branch so that it's not running
> both
> > > sets of grids?
> > 
> > What is the motivation for this branch, it isn't clear to me. We currently
use
> > _some_ bootstrap styles in our code base in addition to their grid. While
this
> > dependency is pretty thin we'd have to audit our use of classes everywhere
in
> > the app. Additionally I believe we extend some of their classes in LESS for
> > dealing with things like our rounded corners and so on. 
> > 
> > What is the motivation to replace bootstrap? Its been largely trouble free
for
> > us. AFAIK we don't depend on any of the jquery plugins and don't load those.
> We
> > have however provided a similar impl of one or two of the plugins riding on
> top
> > of their styles.
> 
> It's a couple fold. The initial thing is that much of the browser we want to
do
> as responsive blocks that work in fullscreen and sidebar modes with one set of
> html. Things like the hooks tab and charm detail view. We also have the goal
of
> reworking the UI to work as a 100% width layout. 
> 
> Finally, so much of bootstrap has been ripped out, with the release the YUI
> responsive grids in 3.9.0 we could kill a bunch of birds with one stone. The
new
> YUI grids can provide the responsive bits, is lighter than bootstrap, is
> approved tech, and we can move off the extra dependency. Since we've got to do
> the work to update the layout to function 100% width it requires auditing and
> going through the css anyway to update that.
> 
> When it was brought up to Gary and Deryck we didn't realize there were plugins
> tied to the styles. I'll look into that. Do you know what these are off the
top
> of your head?

Bootstrap also has responsive grids but I'll try to answer your questions. 

A quick glace at the code tells me (I'm sure I missed some).

we use btn styles many places
we use info,warning, etc color codes a few places
we use the row highlight styles
notifications uses the open/close handling triggered from YUI

[huwshimi, 2013-03-25 05:37:47]

On 2013/03/22 13:59:35, bcsaller wrote:
> A quick glace at the code tells me (I'm sure I missed some).
> 
> we use btn styles many places
> we use info,warning, etc color codes a few places
> we use the row highlight styles
> notifications uses the open/close handling triggered from YUI

Rick, that pretty much covers what I found as well. I figured I would replace
the grids now as that was a reasonably self contained task and re-visit removing
the bootstrap dependency as part of the redesign integration as I will be
touching much of what Ben listed.

[rharding, 2013-03-25 11:32:44]

On 2013/03/25 05:37:47, huw.wilkins wrote:
> On 2013/03/22 13:59:35, bcsaller wrote:
> > A quick glace at the code tells me (I'm sure I missed some).
> > 
> > we use btn styles many places
> > we use info,warning, etc color codes a few places
> > we use the row highlight styles
> > notifications uses the open/close handling triggered from YUI
> 
> Rick, that pretty much covers what I found as well. I figured I would replace
> the grids now as that was a reasonably self contained task and re-visit
removing
> the bootstrap dependency as part of the redesign integration as I will be
> touching much of what Ben listed.

lgtm then I guess. I'm hesitant to add more deps without taking away, but I
guess as long as we've got a picture of what needs to be done and we work
towards that.

[jeff.pihach, 2013-03-27 14:06:18]

LGTM but lets work quickly towards moving the bootstrap css deps as having those
hanging around is no doubt going to cause us styling issues in the near future.

[rharding, 2013-03-27 14:34:59]

*** Submitted:

Replace Bootstrap grid with YUI grid.

- Submitted on behalf of Huw due to test bug
- removed the bootstrap grid
- adding the YUI grid css and updating the elements
- move to a 18 column grid rather than 12 column for more flexibility

R=bcsaller, huwshimi, jeff.pihach
CC=
https://codereview.appspot.com/7969043