Besides the Bourbon and it's Neat (grid framework) I've installed also Bitters so to have some simple predefined look and feel. However, I have trouble with overriding the styles defined in Bitters. Here is an example.
By default, all input text fields are set to width:100%. I have a form, where I want input field to be eg 6 columns width. I am not able to write this:
.foo {
@include span-columns(6);
}
since this will be over-ruled with the 100% rule. I can fix this by wrapping the field in another div of the above class.
Is there any better way? I would not like to add divs just because of me not being able to override the rules.
I see Bitters as something you should change, a lot. It is different from Bourbon/Neat as it gives you some CSS already, and I believe it is not build that much to be extensible, but to be re-used. In other words, install it and change it as much as you need. If you don't need your inputs to be 100% just remove that.
I had a problem with e.g. buttons, since default button from Bitters and custom button created by Bourbon does not look the same, so had to remove Bitters buttons. Another issue with aligning the label and input in one line, etc. Since then I just use Bitters as a initial layer that I change as much as I need.