On Responsive Layout and Grids · Links

Mobilism 2015, Beyond Borders, Beyond Mobile

Mobilism 2015 is over

25 March 2013 · Stephen

First, props to David Bushell for calling bullsh*t on all those crazy grid systems out there. Kudos to him as well for using his own relatively simple solution instead. I love that.

That said, things like:

<div class="grid-unit"><!-- feature 1 --></div>

can be avoided by moving one's "grid system" to a CSS preprocessor in order to avoid class dependencies. Of course, class dependencies aren't necessarily a problem, but it helps to know that the complexity of a good grid system set up through a preprocessor can be almost painless.

Anyway, no pot shots here; I admire David's dismissal of complexity and over-abstraction and his solutions has just as many pros or cons as any solution out there. At the end of the day, all grid systems are hacks trying to deal with the fact that we don't yet have layout on the web. But we have shadows and rounded corners and we can animate stuff. Oh yeah, and we've got a rover wandering around Mars.

David mentions Flexbox, which is fantastic and will be the first CSS module which will offer is true layout, especially for UIs/components. But for general page layout Flexbox is still not the best thing. What we really want is the template syntax of Grid Layout, or better yet, ditch Microsoft's table-like syntax altogether and go with my personal favorite: Template Layout Module.

A guy can dream, right?