This is just absurd:

    div#alpha {
      @include span-columns(1);
    }

    div#beta {
      @include span-columns(11);
    }

    div#gamma {
      @include span-columns(2);
    }

    ...

How is this any better than col-xs-2, col-xs-4, etc.? I see absolutely no reason to obsess over semantic markup anymore. We all have work to do and grid frameworks help us actually get things done.

In this way the HTML is static and when you have to change a presentation detail (like the width of the columns) you just have to edit the CSS - as it's meant to be.

Until you have a ton of automated tests. Then a markup (class) change breaks all the selectors used in the tests - not fun. I prefer to abstract the styling so I don't have to fix the tests if the styling needs to change.

An HTML element can have both a class and an ID or multiple classes. Your tests should not have any knowledge of your framework's classes.

So your saying that tests should always rely only on the id attribute? Tell me how you target elements that have id attributes auto-generated by a framework either on the front end, Ember for instance, or the back end?

It's a nice idea, but falls over pretty spectacularly in the real world when you have a complicated web application.

Read my comment again. You can select elements using whatever CSS/XPATH selectors you want. Whether those elements have additional presentational CSS classes on them is completely irrelevant since the selectors will still work.

Thanks for the link. I know that Bootstrap can be used in a similar way (in theory, I haven't tried it myself) but this just seems much lighter and focused on that specific use-case rather than "also you can use it like this" in Bootstrap.