I’m kinda confused, your argument against Bootstrap’s grid seems odd to me.
First of all, class attribute is meant to hook styles (and nowadays, scripts) from markup, so Bootstrap’s naming in markup is not a problem, even with separation of concern in mind. Class attribute is the bridge between markup and styles, the only HTML attribute that doesn’t imply anything in markup. Separation of concern, if religiously applied, should prohibit the use of class attribute since it mixes styles and markup. To sum up, describing grid with class name can’t be a problem.
The same argument can be used for containing div, since this a semantically neutral markup tag. The only thing we could blame when using too much div is that markup is harder to read. But that’s not bad practice at all. And moreover you don’t have to use div in order to use Bootstrap’s grid. Your take on semantic markup.
When you say “Grid and flexbox layouts do not need to be described in markup”, neither does a floating grid. This is just for convenience, to be easily understood by beginners. Tools like Susy (that you quote) proves it.
And moreover your counter-example are inappropriate, since they distinguished themselves from the Bootstrap’s example using :nth-child() selector — which had poor support when Bootstrap 3 was released, but we definetly can rewrite its grid using :nth-child() and removing some of the class names you point out.
However Bootstrap’s classes are meant to be reused anywhere, in any markup context, on any tag. This is why those classes are descriptive. Your examples are very contextuals and cannot be reused in another context. So which one is best?
Thus don’t you think we’ll see new frameworks like Bootstrap with reusable grid systems based on grid module? Some using flexbox are already there, and more are coming. And we’ll keep going with describing class names in markup. Because well, that’s not a problem.
I wrote a lot on this detail because I’m sad to read those kind of arguments in a such high level article. This is to easy and those things aren’t that simple.
However your demonstrations are very impressive, and probably some of the clearest I’ve read for now! I often use flexbox and am very enthusiastic about grids, hoping just as you that we’ll be able to use it very soon.
(Sorry for the very long comment and my hazardous english).
Gaël
I’m kinda confused, your argument against Bootstrap’s grid seems odd to me.
First of all, class attribute is meant to hook styles (and nowadays, scripts) from markup, so Bootstrap’s naming in markup is not a problem, even with separation of concern in mind. Class attribute is the bridge between markup and styles, the only HTML attribute that doesn’t imply anything in markup. Separation of concern, if religiously applied, should prohibit the use of class attribute since it mixes styles and markup. To sum up, describing grid with class name can’t be a problem.
The same argument can be used for containing div, since this a semantically neutral markup tag. The only thing we could blame when using too much div is that markup is harder to read. But that’s not bad practice at all. And moreover you don’t have to use div in order to use Bootstrap’s grid. Your take on semantic markup.
When you say “Grid and flexbox layouts do not need to be described in markup”, neither does a floating grid. This is just for convenience, to be easily understood by beginners. Tools like Susy (that you quote) proves it.
And moreover your counter-example are inappropriate, since they distinguished themselves from the Bootstrap’s example using :nth-child() selector — which had poor support when Bootstrap 3 was released, but we definetly can rewrite its grid using :nth-child() and removing some of the class names you point out.
However Bootstrap’s classes are meant to be reused anywhere, in any markup context, on any tag. This is why those classes are descriptive. Your examples are very contextuals and cannot be reused in another context. So which one is best?
Thus don’t you think we’ll see new frameworks like Bootstrap with reusable grid systems based on grid module? Some using flexbox are already there, and more are coming. And we’ll keep going with describing class names in markup. Because well, that’s not a problem.
I wrote a lot on this detail because I’m sad to read those kind of arguments in a such high level article. This is to easy and those things aren’t that simple.
However your demonstrations are very impressive, and probably some of the clearest I’ve read for now! I often use flexbox and am very enthusiastic about grids, hoping just as you that we’ll be able to use it very soon.
(Sorry for the very long comment and my hazardous english).