More flexibility, less limitations.

This is an old experiment. See my blog for my latest responsive layout philosophy.

Shiro is small but powerful layout system that combines a traditional grid with a modern responsive web design build (and it’s still accessible in older browsers — even IE6).


Introduction

Mobile First

Shiro complements your mobile-first build. Starting with an accessible baseline, Shiro uses media queries to add grid-like layout as the browser viewport gets wider.

Legacy Support

Rather than faking media queries in Internet Explorer 6–8 it’s better to provide a fixed-width layout. They’re desktop browsers, after all. Shiro is a great building block for this technique.

Features & Benefits

  • Minimal

    Use Shiro to aid your mobile-first build. Amend the margins and breakpoints to suit your design.

  • Type-friendly

    A grid that allows you to maintain a straight left edge and vertical rhythm throughout.

  • Internet Explorer *

    Internet Explorer 6 is served a fixed-width layout and IE 7–8 are semi-fluid. Have a look yourself.

  • Shiro.js

    Layout support for old IE is done with a little help from JavaScript (less than 1000 bytes minified).

Coming soon …


Download

This is a preview — a full release will be out soon. In the meantime, look under the hood and hack it to pieces!

License

Shiro will be available under both the BSD and MIT licenses, meaning it’s free to use as you wish!

Author

David Bushell is a web designer and front-end developer working at Browser. Learn more about this project.