Different coloured buttons

[kaydwithers]

What is the method to use for a different coloured button? I would have thought that buttons would be components instead of objects?

If we seperate our styled and non-styled CSS. We would have an .scss file for _objects.buttons.scss and _components.buttons.scss ?

Something like..

<div class="o-btn o-btn--small c-btn--red">

Or should I use a theme background class..

<div class="o-btn o-btn--small t-red"> ?

[csshugs]

Or should I use a theme background class.

@kaydwithers No, I think a theme class just gives you a scope to set the whole page into a new skin. A good example for that would be the compass website where you can switch between two themes.

The thing with the inuit buttons object is, that it's a bit conflicting with the OOCSS principle of not mixing skinning and positioning, because the button object already brings some default skinning (background-color). I have no problem with that and am distinguishing the objects-layer and the components-layer for myself more in a manner of reusability (objects) like a button and uniqueness (components) like a hero-banner. So I would have a markup something like this:

<button class="o-btn o-btn--small o-btn--red">Button</button>

So I would just extend the inuit button object to my needs and just override the background-color with .o-btn--red (except I would never, ever use something like "red" in a class name. But that'a another story).

But you can go with a component class, too, if you go more the classical skinning/positioning OOCSS way:

<button class="o-btn o-btn--small c-btn--red">Button</button>

In this case you could say that inuit makes it wrong, because the default skinning in the buttons module doesn't belong to the objects layer.

[kaydwithers]

Thanks so much csshugs. Out of interest why would you not use o-btn--red? For our project we have many types of button colours and text colours. We have all types of greys, t-grey, t-greylight, t-greydark etc.

I am quite the fan of using numbered naming conventions. u-heading-1, u-heading-2, u-mb1, u-mb3 etc. We were even thinking of giving our buttons numbered naming conventions. o-btn o-btn--small c-btn--grey-1 etc. I'd be really interested to know what you think.

[csshugs]

@kaydwithers

[...]except I would never, ever use something like "red" in a class name. But that'a another story[...]

OK, I got to take back that statement partly. I would say, it depends whether it is save to use classes like o-btn--red or text--blue etc.

When --red someday becomes --blue, you got a problem. This might seem unlikely (although this actually happened to me once) for a common project, but when you are working on some kind of white label project, it is pretty usual to keep the markup between the different labels and just altering the CSS. So maybe o-btn--red might work for label a, but for label b the class makes no sense anymore.

However, when you are working for Twitter, I would say: go with o-btn--blue. It's pretty clear to grasp for anyone and the brand color of twitter will unlikely change from blue to whatever in the next few years.

So, as I said: It depends. I was working a lot on white label projects recently and hence got used to write classes like o-btn--primary, o-btn--secondary, text-brand etc. which will work no matter what colors being used.

[kaydwithers]

That's really helpful @csshugs thanks so much. I've also found your InuitCSS kitchen sink to be incredibly helpful. If you don't mind, can I ask you about colours. What would you do for a text colour? Lets say text-blue would this be a component (c-text-blue) a trump (u-text-blue) or simply a base layer? (text-blue). And for background colours I was going to use c-bg-white, or does bg-white sound okay?

Do you know of any websites that are using ITCSS? I'd really like to inspect the code to get a better understanding on how to do things properly. I've noticed that the Uber website (https://www.uber.com/) is using the older version of Inuit, but so far I haven't found a site that is using ITCSS/BEMIT. Do you know of any that you could share?

[csshugs]

@kaydwithers

I've also found your InuitCSS kitchen sink to be incredibly helpful.

Thank you, too, for the feedback! Glad to here from so many people that the kitchen sink was helpful to them.

I place these color classes in the trumps-layer (both, text-colors and background-colors). These are definitely no base layer styles, because the base layer carries no classes at all, per definition. It's also too abstract for a component. I'd always vote for u-text-blue/u-bg-white trump classes, because... A: These classes are almost inline-styles; They just carry one declaration (color: blue / background-color: white). B: When we are assigning these classes in the markup, we want these (almost inline) styles to definitely take effect. This is the core principle of the trump layer: We want something extremely specific to definitely take effect, hence a trump class with the according !important declaration. There is no possible alteration of this class. The background color of a container is either white or not i.e. either the container has a class or not.

---

Do you know of any websites that are using ITCSS?

Have a look at the Werder Bremen website. The new inuit version is used on that site, along with the BEMIT approach (and square brackets in the markup to group classes, hell yeah!).

[anselmh]

I think this should be defined in your custom code rather than in the framework itself. While we could introduce something like primary / secondary this should not indicate any color.