Managing colors with Sass – Modular Development

Keeping your colors neat and tidy is one part of having a solid website fundamentals, just like the house needs good colors that are consistent in every room, every component(handler, door etc..).

Managing your website or home, s time consuming and daunting! The bigger the website is, the more time you will need to spend in order to maintain it and keep it tidy.

I will talk on how to keep tidy, maintainable and scalable home, uh website in the next article!

Here we will focus specifically about the colors!

 

Introduction

Every website has its own unique colors, some might be the same, some not – but each of them has colors! Some has more, some less.

Colors can get messy and complicated very fast. It’s hard to remember the names of them and track the color functionality – is this color for border or background?

If you’re reading this article, you should be familiar with Sass or Less, I will use Sass for demonstration purposes as I’m more familiar with it. If you’re not using a CSS pre-processor, well, there is one thing I can tell you, go right now and install it!

 

Setting up Colour Variables

Let’s be honest, we all did this when we were staring. Yes, we names the colors by their name, and then we tried to modify it for different shadows, tints and so one. Horrible!

$gray : #595959;

$dark-grey: #363636;

$darker-grey: #303030;

$much-darkey-grey#: 262626;

 

Each time the file got longer and scarier. Each color you added, you forgot the next second. Perhaps you were one of those developers that liked to have different tints of the same color? You might have done something like: red, x-red, xx-red, xxx-red, xxxxx-red, xxxxxx-red and so on. You will not know the difference between x-red and xxxx-red. It’s difficult to remember all of those variables, and you will need to look them up, which can be time consuming. We use Sass so we develop faster, not slower.

This doesn’t tell us anything, and when you have blue, red, green yellow, and each of them have 10different variations, you’ll end up with a file that has 100 lines of colors – ther’s no way you will remember them! Most of them will be probably unused.

The first rule of managing colors it to pick few for the project – but the designer should take care of that!

Here’s what you can do!

The best way to name those colours is to go on a website like  http://chir.ag/projects/name-that-color/ and all you have to do is paste the hex , and It will give you a name that you can use. Don’t worry if you can’t remember those colours, with time you will get better and you will expand your vocabulary too!

You can also use your own colour names, such as snow, fire, grass, whatever works for you, if it doesn’t, keep experimenting!

The way I like to do this is:

 

// #Colours: Define Colours - use this http://chir.ag/projects/name-that-color/

// ============================================================================


                $sunglo                   : #E56265;
                $olivine                  : #9bbb61;


                $mine-shaft               : #323232;
                $scorpion                 : #606060;
                $givry                    : #F9CFC7;

                $alabaster                : #F7F7F7;
                $cancan                   : #DD97A9;
                $grannysmithapple         : #A4DD97;
                $morningglory             : #97D7DD;
                $lightwisteria            : #CB97DD;
                $shocking                 : #DD97C0;
                $white                    : #FFF;
                $tundora                  : #444;
                $brightturquoise          : #2FE6F9;
                $pomegranate              : #F92F38;
                $grey                     : #bbbbbb;

 

What about colours that are very close, and they have the same meaning? Well, you might use a build in Sass mixin to give it a bit of a different colour such as darken($tundora, 5%); and wala!

Give them Meaning

You might think, what now?

Well, give those colors a meaning! A REAL meaning. Don’t name $pomodoro to be $warm-red!

Instead what you want to do is structure your variables for your whole site. If you have a brand color, and you will, then you can name the variable to be $brand-color.

Now, what is the site primary color? The brand color, so you might assign that there. What about secondary color? Is it Pomodoro color? Assign it there.

Perhaps tertiary color will be green, $grass, and it will be assigned to $anchor-color.

Be sure to give those colors a meaning and a purpose. Everything in your project needs to have a purpose and you need to get an idea about it straight away – maybe not as fast.

When developing a site, there are main colours that we need to use. Each brand has one main colour (some two) that they use. On the website, the main components have the main colour spread across, header, button, forms etc…

What I do in my project to keep this stupid simple is I name their purpose:

// #Colors: Colors Meaning

// ==========================================================================


                $brand-color                      : $sunglo !default;
                $color-primary                  : $brand-color !default;
                $color-secondary             : $olivine !default;
                $color-teritary                   : $lightwisteria !default;


                //In the setting file I have more – I just like to divide my website into logical sections


                //Buttons Colors

                $btn-primary-color:                                                       $white !default;
                $btn-primary-bg:                                                            $brand-color !default;



                $btn-water-color:                                                           $white !default;
                $btn-water-bg:                                                                $brightturquoise;



                $btn-fire-color:                                                                $white !default;
                $btn-fire-bg:                                                                     $pomegranate;



                $btn-top-search-color:                                                  #mine-shaft;
                $btn-top-search-bg:                                                       darken($alabaster, 5%);

 

Now I have those names assigned to my components in my project, which are then assigned in the specific object(button, form, card etc…) and they have a meaning. They are easy to manage and easy to find.

Assign those variables

It’s very important for you to assign those variables Like I showed you above. They are going to be unique and memorable, easy to find and easy to add new ones. As your project get bigger, you will no longer find variables in your files that you have no clue what they are.

If you’re in the button file, each button will have a prefix of btn- which you will know what colour they have, and where to find them. You will be able to quickly analyse the colours in your variable.scss or color.scss file, and change or add new values without getting your head overwhelmed.

 

Conclusion

I say it many times that a good website has a strong foundation, and that goes to life in general. You need to have a strong foundation if you want to have maintainable projects that can scale well.

I have showed you my way on doing this, that works very well. It’s time consuming, but remember that we are doing this for the future. Remember – every line you write, you should re-factor it. The project will get messy in a blink of an eye if you try to keep all in your head.

Don’t forget to comment below and happy coding!

Meet the author

Meet the author

Aurelian Spodarec

Front-end WordPress developer that blogs about web development. I like using the right tools for the job. In my spare time, I enjoy cooking healthy food and then eating it. Delicious!

Comments