YUI3 Responsive Grids builds on top of the existing YUI3 Grids implementation. It adds a single new class name called .yui3-g-r
. You can use this instead of using .yui3-g
as you normally do. All elements with a class name of .yui3-u-*-*
will automatically become responsive if they are direct descendents of a .yui3-g-r.
The HTML
The first gist shows how regular YUI3 grids are written. These grids are unresponsive. They'll always be one-thirds irrespective of the width of the screen. The second gist replaces the yui3-g
with yui3-g-r
, thereby making the one-third columns collapse to full width on lower screen widths.