The vast majority of the time we don’t think much about the height of the web page we are building. Maybe we try to get the most important content “above the fold”, for whatever that’s worth these days, but otherwise we create complex frameworks for horizontal grids while letting the vertical dimension scroll as it wants.
And most of the time that’s just fine. But once in awhile the situation arises where you care about a defined height for a page. That happened to us recently with a metrics status board we have on our wall. This is a single-screen’s worth of our most important numbers, constantly updated throughout the day with no user interaction. After tweaking something or other to fit on the screen for the seven hundred and thirty-second time, and I got fed up and decided this thing should just understand it’s own height and the amount of space each row has within that. I wanted a framework that was just like the grid system we’re already using, only vertical…
So I made it. And I called it: vertical_grid. Maybe a little too on the nose, perhaps?
Here's the gist with screenshots. With Bootstrap you have a horizontal grid system like this:
vertical_grid helps you expand it into a vertical grid system, so you get something like this:
(Basically we're mostly looking to avoid this:)
It’s based on Bootstrap because we’re already using that. Anything already taken care of by Bootstraps horizontal grid we don’t need to recreate. It’s also written using Sass because I don’t need to type the same stuff twelve times over.
The framework is working well for us, but it’s still fresh from the oven. If you try it and come up with some issues or improvements we’d love to see them. Hit us up on the GitHub with bugs and pull requests.
Hope you like ‘er!