I would advise against using CSS grid systems. Code like class="article column-12" looks wrong. Use stuff like Neat instead: https://github.com/thoughtbot/neat

Neat's grid system is an awesome alternative to CSS based grid systems. What's the benefit to it other than having cleaner markup?

It's your choice to go in for the dogma, but don't force it on those of us who allow form to follow function on this one.

Agreed. I took the Neat approach months ago, and it has been incredibly rewarding.

Here's a brief, easily repeatable example of a lightweight grid system with [optional] @class handles: http://snipplr.com/view/68642/simple-grid-system-in-scss-wit...

Can you describe what made it rewarding?

1. For one, when viewing HTML source, it's cleaner. I feel more confident that I'm supplying a minimum viable product.

2. The HTML document payload is smaller (and this is a feature-to-scale).

3. The same basis behind SASS's "placeholder" approach: use only classes on a contextual basis.

4. Everything in one place: Now I can manage all of my properties in one Layer (not "file" as many people suggest; "files" are a myth), the Presentation Layer.

5. Collaboration is easier since we can define variables which represent our standards. That way, we can talk at a high level about UI modules without worrying on the impact to our deadlines. (More fun and productive work activity!)

There are others. Philosophically, it's just cleaner and easier to think about my assets. If I disperse .classes all over my markup, I then have to worry about "presentation-points" like data-points (where server-side tags are placed). That's complicated. CSS, like the DOM, is complex, but it shouldn't be _complicated_.

Anything that improves the organization of your assets is awesome. For non frontend developers, something like bootstrap is a lot easier to pick up than neat. They can integrate this into their projects right away and immediately reap the benefits.