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).
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.
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
Use Shiro to aid your mobile-first build. Amend the margins and breakpoints to suit your design.
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.
Coming soon …
This is a preview — a full release will be out soon. In the meantime, look under the hood and hack it to pieces!
Shiro will be available under both the BSD and MIT licenses, meaning it’s free to use as you wish!
David Bushell is a web designer and front-end developer working at Browser. Learn more about this project.