The Sinter Grid System
Sinter is a minimalist, responsive fixed grid system for Compass.
It does not represent much new thinking; Sinter is a synthesis of various bits I liked from several different grid systems, both in terms of their structure and the Compass implementation. They are, in no particular order:
If you've used any of the above, Sinter's lineage will be obvious.
Sinter is a framework for usage with Compass. There are no plans for creating a standalone CSS version.
My original impetus was a desire for various screen layouts to be divisible by three and four. Less provides a fantastic breakdown of media queries, but I was unhappy with the column layouts.
Sinter is based on 960's 12-column grid. It consists of 60-pixel columns with 20-pixel gutters. Like 960, the gutters are evenly distributed on either side of the column, meaning that each column has 10 pixels of padding on either side.
Here are the various device layouts:
- 320px (portrait iPhones): four columns, 300px wide, with 10px padding for the grid container.
- 480px (landscape iPhones): 6 columns, 460px wide, 10px padding.
- 768px (portrait iPads): 9 columns, 700px wide, 34px padding.
- 960px (default layout): 12 columns, 940px wide, 10px padding.
- 1200px (wide desktop): 15 columns, 1180px wide, 10px padding.
- 1280px (720p HD): 16 columns: 1260px wide, 10px padding.
Every layout is divisible by two, three, or four. The most significant wart in this system is the padding on the 768px layout.
What doesn't it do?
Sinter does not supply any form of CSS reset. Compass provides several great mixins for that purpose.
Anything relating to typography is unhandled by the framework. Compass provides some great facilities for vertical motion in type, there's no need to duplicate that work in the grid system.
What other cool features does it have?
Honestly, read the source. There's really not much there.
Some stuff I liked and wrote or cherry-picked:
- Sass functions for computing column widths for when you need to add padding or a border to some element, as well as a specialized variant for input fields.
- A background grid mixin, which utilizes Compass's built-in CSS3 grid generator:
- A mixin for automatically setting a contrasting selection color given a text color:
How do I use it?
In the future, this will probably become a proper Compass plugin. For now, the usage is ghetto-stupid: copy the following to wherever you put your Sass files:
Avail yourself of the source until some proper documentation can be written.
What browsers are supported?
I haven't tested anything yet. There's a fix for the IE6 double-margin bug which you can strip out of the columns mixin, but it has no negative effects on other browsers.
Short answer: BSD. Long answer: this reuses code from all over, so check out
Contributors & Thanks
Sinter was... sintered together by Idan Gazit / @idangazit.
No kidding, Sinter is 99% theirs and 1% mine. Thanks to:
- Joni Korpi / @jonikorpi
- William Wells / @williamhanwells
- Nathan Smith / @nathansmith
- Chris Eppstein / @chriseppstein
- Eric A. Meyer / @eriiicam