Introduction

What is Swatch?

Color Swatch is a great CSS color library which makes a great and beautiful UI. The newest toolkit in the front-end world. It contain SASS variables and CSS variables which makes it the most updated version of CSS libraries.


Why should we use Swatch?

Color Swatch is created by SASS laguage and includes the CSS variables which makes it a lot more creative and a lot easier to use, also helps you to have a lot more possibilities in UI design. You can even have a customized Color library depending on your desire of colors you need in your design.


What are the advantages?

First

CSS variables and SASS variables each have different purposes which is quit specific to them and both are useful in their own special places so we decided to use both of them to make sure that we used them both to make this library as powerful as possible and also make it as customizable as possible for you.

Second

It helps you write your code faster and easier with the same or better results in some cases because you can have the colors as getters in you parent class and just call them where ever you need them so you don't have to write the css code for them and call them in your HTML and not to mention to remember the name of the classes you used which is confusing specially on big projects.

Third

As said earlier one of the great advantages that is absolutely lovable is that this is a special library that you can customize yourself for your own specific needs without needing to write a library or a big stylesheet from scratch yourself but the question is how?

We will explain that in dept later but just to clearify here the only coding you need to do to customize the whole library to make it suitable for your need is to define a class with all the variables you need ( not all of them ) with new values that you like. Although for this you need to know the CSS variables and how to use them. But fear not, we will talk about that too.


How do we use it?

Just like a normal CSS file we should link the extracted main.css file from the SASS to our HTML file and use it's classes in the class names. Easy right?

Now click Next below to install the library and give it a try together.