coloraiz.css [open source project]

[Rawnly]

Hello everyone, I present Coloraiz, is an open source project that integrates a quick palette of colors in CSS through classes, EC also a full version in SCSS to be even more “comfortable.”

Not really much to explain then, you will understand better after visiting the website (www.coloraiz.webe.io).

The project is still under development, for now the colors available are few, but each has 13 shades. They are 6 light and 6 dark, the 13th is the starting color.

purple-l6 // lighter color
purple-l5
purple-l4
purple-l3
purple-l2
purple-l1
// purple base color
purple-d1
purple-d2
purple-d3
purple-d4
purple-d5
purple-d6 // darker color

For property using classes I mean something like bootstrap. To give just a background to give a class “.bg-colorName” while the text just the color name (ex. .colorName)

Otherwise, to use the SCSS version you make a simple “@import” of the file “colors.scss”.

@import ‘colors’

In the site you will find a grid of colors and a download button, the resources may be outdated, so I recommend to check back often because every day we add something new, to be always sure council directly link the style sheet:

    <Link rel = “stylesheet” href = “http://www.coloraiz.webe.io/CSS/colors/colors.css&#8221; />

Tell me what you think, and thanks for your time!

[rkieru]

I love the idea of pre-populated color palette options, but I would offer up the following suggestions to transition your CSS from a personal project to something more framework-orientated.

Adopt a CSS Prefix and a more standardized naming system.

Right now you’re using a format of [color]-[saturation_level] which is nice, but it seems like you could be more specific. You’re also prefacing any background with bg- which seems like it could cause a lot of confusion as quite a few other frameworks utilize bg-.

Instead you could do something like this:

.cz-purple-1 { color: #a577cd; }
.cz-purple-1.cz-bg { background-color: #a577cd; }

Don’t worry about ‘Light’ and ‘Dark’

If every base color comes in a fixed number of shades (right now it’s 13) … why not just stick with that. Make that your maximum number of shades and then in your formatting -1 is always the lightest and -13 is always the darkest.

Pop this on a CDN

You don’t want people linking to http://www.coloraiz.webe.io/CSS/colors/colors.css if this becomes popular! Make sure people are only ever pulling from a CDN you’ve uploaded the code to and save yourself a potential headache in the future.

[Author]

Posts