I also agree that HTML classes and ids should describe the content and CSS mixins should be used to connect the right style to each HTML id.
At first it seemed to me that Responsive did not use mixings, but this is not completely true. The utilities are all mixings but the partials are fixed instantiation of mixins (`.row { @extend .clearfix; }`).
In my perfect world it `.row` would be `.row { @extend row; }`, so I can be able to avoid using the "row" class altogether and do things like `#definitions > p { @extend row }`.
I'm totally with you on this - I hate seeing column/row references etc in CSS identifiers. With the ease of use of Less/SASS etc, there's no reason not to have the grid rules in a mixin and reference those from semantic identifiers.
We do it this way, it was a piece of cake to set up the initial mixins and we haven't had to think about them since. Just reference something like .column(3) and bam, that element spans 3 columns.
That aside, this looks like a nice alternative to Bootstrap/Foundation.
I struggle with this constantly. I was a Bourbon Neat[0] (grid via mixins) user for a while, but lately I've really enjoyed the PureCSS[1] grid which uses classes. Mixins feel more "correct" but classes are just so darn easy.
Comments
Whenever I see frameworks like this I immediately try and work out whether it uses mixins or classes to achieve layout.
I have it ingrained in me that css identifiers (classes/ids) should be semantic to the data and not the visual side.
I know this isn't a big factor for some people, and on that front it looks super and design philosophy is very cool (lightweight is great!).
I also agree that HTML classes and ids should describe the content and CSS mixins should be used to connect the right style to each HTML id.
At first it seemed to me that Responsive did not use mixings, but this is not completely true. The utilities are all mixings but the partials are fixed instantiation of mixins (`.row { @extend .clearfix; }`).
In my perfect world it `.row` would be `.row { @extend row; }`, so I can be able to avoid using the "row" class altogether and do things like `#definitions > p { @extend row }`.
But once the .row class is defined, you can do @extend .row in sass and it will do what you want...
I'm totally with you on this - I hate seeing column/row references etc in CSS identifiers. With the ease of use of Less/SASS etc, there's no reason not to have the grid rules in a mixin and reference those from semantic identifiers.
We do it this way, it was a piece of cake to set up the initial mixins and we haven't had to think about them since. Just reference something like .column(3) and bam, that element spans 3 columns.
That aside, this looks like a nice alternative to Bootstrap/Foundation.
I struggle with this constantly. I was a Bourbon Neat[0] (grid via mixins) user for a while, but lately I've really enjoyed the PureCSS[1] grid which uses classes. Mixins feel more "correct" but classes are just so darn easy.
0 - http://neat.bourbon.io/
1 - http://purecss.io/