simplify modifier classes

Created by: tlindig

I do not know, if this is the right place for a discussion, but I found no better for now. So I start it here.

The bone of contention

Many controls and components have their own class modifier, but want say the same.

For instance

• class="text-danger" for paragraphs
• class="danger" in tables rows or cells
• class="btn btn-danger" for buttons
• class="alert alert-danger" for alerts
• class="progress-bar progress-bar-danger" for progress bars
• class="panel panel-danger" for panels
• class="label label-danger" for labels

All that want one result, a different look, a modification of the default look, but we need to use 7 different ways to say it.

The proposal

For me it would be looks easier to learn and to document, if we combine the base class with common modifier classes. So we would have some classes to specify the coloring:

• default
• primary or brand or highlight
• success
• info
• warning
• danger or error

we would have some classes to specify the state:

• active or pressed
• focus
• hover
• disabled

and some for size:

• size-xs
• size-sm
• size-md
• size-lg

To modify an item, you than could combine this modifiers:

• a big danger button would look like this:

class="btn danger size-lg" instead of class="btn btn-danger btn-lg"

• big danger progress bar would look like this:

class="progress-bar danger size-lg" instead of class="progress-bar progress-bar-success progress-bar-lg"

I know, this would be a big change and could only realized in the next major version, but I think this would improve Bootstrap and I like to know, how you think about this.