Split in 2 CSS classes (with one dedicated to color)?

[C-Duv]

Could the library updated to use 2 CSS classes instead of one: one to say it's a checkbox with material design and the other to give it's color?

For example (where u-colorTeal only contains color-ing stuff):

<div class="icheck-material u-colorTeal">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId">Click to check</label>
</div>

I see some advantages:

• It's clearer (IMHO, which is just an opinion)
• It can work with CSS frameworks.
• One can change the color by simply swapping a class.

What do you think?

[bantikyan]

Hello, sorry for late reply.
It is already done with _icheck-material-base.scss and _icheck-material-theme.scss files
You can use icheck-material-custom.scss to specify your colors
Thanks

[C-Duv]

All existing classes have both the notion of styling the checkbox with material design AND giving it color.
And a single class is added to the <div>.

When I need a new color for my checkboxes I need to create a new set of CSS

• named icheck-material-SOMETHING
• containing lots of ancestor operators and pseudo elements

What I meant in my first post was having:

• one icheck-material class containing all the design but no color.
• a my-app-red-theme (no enforced namespace here) class containing only the red-tones color CSS properties.
• a my-app-pink-theme class contraint only the pink-tone color CSS properties.

But, on a second though, looking at how CSS works I realizes it might not be feasible for this great CSS-only library.

SCSS can offer ease of use (variables and mixins to easily create new themes, even without the namespace constraint or following it but using aliases to avoid repetition): so I guess using it resolves the issues I had.

PS: the only direct advantage I can hold on is: If all checkboxes styles by this library have the icheck-material CSS class (not icheck-material-red or icheck-material-pink is that selecting theses checkboxes with jQuery is easier (non-regex selector) :)

Thanks for the answer.

[bantikyan]

Thanks for explanation.
I constructed files structure that way, that with scss you be able to generate and use only colors you need in your project.

1. _icheck-material-base.scss is responsible only for actual checkbox
2. _icheck-material-theme.scss is responsible to create a single color class

As you can see in icheck-material-custom.scss we import both (base and theme) files, and then we create lot of color classes

About your point "When I need a new color for my checkboxes I need to create a new set of CSS" , no, you can create any number of color classes in a single file, like we did all colors in icheck-material.scss.

For example, if you use scss, you can use icheck-material-custom.scss, in that file I added just one .icheck-material-custom color class, just for example, and mainly users will use once color. but you can include 2, 3, .. any number of color classes

If you want to use scss in your theme class, you can import only _icheck-material-theme.scss in your file, can keep base in different file.

I mean if you using sass, everything is very flexible. If not, you can just remove from main css file color classes, and add them in your theme files..

About having 2 classes, I do not see if that is critical.
Again, you can simple swap one class))

If you warry about jQuery selector, you can add second class, icheck-material, and use that. You free to add any class you want..
Or you can use starts with selector, $("[class^='icheck-material-']")