Templates in the staff client which are a single column can be easily converted from using YUI grids to using Bootstrap grids.
How? Can you detail the main changes you applied?
In order to accomplish Bug 14546 ("Make staff client templates responsive") we can build on the already-included Bootstrap library and make incremental changes to the templates.
The simplest way to start this process is to modify pages which have the simplest YUI grid: Single columns, no sidebar. There are two variations on this layout:
- Fixed-width centered page with no sidebars
- Fluid-width page with no sidebar
A typical change will look something like this:
-<div id="doc2" class="yui-t7">
- <div id="yui-main">
+ <div class="main container-fluid">
+ <div class="row">
+ <div class="col-md-8 col-md-offset-2">
I think using standard Bootstrap classes makes sense because it makes it easy for developers to use Bootstrap documentation to understand what the classes are doing.
In this case, the "container-fluid" class makes the contents fluid rather than fixed-width. The "row" class delineates a grid row. The "col-md-8" class means that the (single, in this case) column occupies 8 of 12 grid columns when the browser width is at or above 970px (the "md" part of the class name). Below 970px the column is full-width.
There are very few YUI-specific selectors in staff-global.css. Almost all of the existing ones affect multi-column layouts and can be addressed when we start making changes to those layouts.
Regarding codifying this change in the QA scripts, we may want to wait until removal of the YUI grid is complete. It would be easier to look for any "yui" class than try to pick out only a few.