Kimono Responsive Grids builds on top of the existing Kimono Grids implementation. It adds a single new class name called .k-g-r
. You can use this instead of using .k-g
as you normally do. All elements with a class name of .k-u-*-*
will automatically become responsive if they are direct descendents of a .k-g-r.
The HTML
The first gist shows how regular Kimono 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 k-g
with k-g-r
, thereby making the one-third columns collapse to full width on lower screen widths.