Waffle
The first cannibal (and lightweight) CSS framework based on inline-block
Built with sweat and tears by @Scintillaluz
Built with sweat and tears by @Scintillaluz
Waffle is a simple, fully responsive and lightweight CSS framework built in Stylus, for building layouts without the hassle of clearing floats. There are two types of grids in Waffle, both sharing the same approach: horizontal blocks are called .row, and each .row can contain a multiple .unit blocks with diverse widths. By default each .row wrap itself on a maximum width defined by a $width_layout variable, here of 1180px. A .wider class applied to the body expand the maximum to 1600px for screens larger than 1800px. Once installed you can change these variables as you wish.
Waffle is based on display: inline-block so it is not supported by IE7. There's a whitespace issue with inline-block, that can be solved using font-size: 0; to avoid writing horrible markup with comment at every line ending. What I did was resetting the font-size to zero on every row, and assigning font-size: 16px on the .unit This has some fallbacks, since it's impossible to work with ems on classes on the .row (but hey, you can still use rems). On the other side resetting the default type size at .unit level is helpful to not get lost in the ems inheriting madness.
This grid is directly inspired and expands Gridism by Cobyism. I too believe that columns are counter-intuitive when designing an online page, so I borrowed this approach and worked with percentages. I've added a .single-centered-column class for the row to use the units as single centered columns; it may be a bit "dirty" but I found out it's a good substitute for narrowing columns with padding. Plus, I make it stack nicely on mobile.
Here comes the juicy part. The split system is based on the idea that the the parent–the .row–is telling the children–the .units contained in the row–how to behave. So a .split3 applied to the .row means that at its largest width the layout is evenly divided in three parts. And so goes on with .split4 .split5 and .split6. This way I can easily govern the .units with the media queries; as you can see playing with the viewport, a .split4, for example, is composed of 4 columns at full width, 3 columns at 800px width, and goes down to 2 columns on mobiles. My idea was to have all the splits stacking on two columns on mobiles. If you don't like that, you can add a .one-column-phones class on the .row after the split to stack on a single column.
Let's have fun with utility classes; don't like gutters? Remove them with .no-gutters on the row. Two classes help you resetting annoying styles for lists: .reset-list removes margin, padding and style from any ul; .menu-list extends .reset-list adding a display: inline-block for horizontal menus/tags. Four classes help you showing/hiding elements for responsive use: .no-desktop .no-phone .only-desktop .only-phone
What I used down here in this fake-gallery it's a good solution to avoid using floats for positioning elements such as navs. Use .row.justify and two .units inside: see the tags and the arrows below; works nicely with absolute positioning (text attributes to arrange elements? Yes, but it's CSS, I cannot be too picky).
I've used Waffle on two different projects: Devcharm, a free and open library of resources about webdevelopment; and Isoverse, a publishing plaform for hosting a portfolio using Dropbox. Isoverse is running on the last version of Waffle, and I've been correcting this framework while working on Isoverse's static site and the theme templates we offer.
I'm eager to receive pull requests and improve Waffle. It would actually be awesome to have Less and Sass versions. Waffle is open source and released under a MIT Licence.