[Koha-bugs] [Bug 19980] Omnibus: Update single-column templates to use Bootstrap grid

[bugzilla-daemon at bugs.koha-community.org]

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=19980

--- Comment #2 from Owen Leonard <oleonard at myacpl.org> ---
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

See:
https://wiki.koha-community.org/wiki/Interface_patterns#Common_page_layouts

A typical change will look something like this:

-<div id="doc2" class="yui-t7">
-<div id="bd">
-  <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.

-- 
You are receiving this mail because:
You are watching all bug changes.