Building a landing page with Cruip — Changing the color palette
This is the second part of a series of step-by-step tutorials where we will walk you through every aspect of customizing a Cruip landing page template from the ground up.
Didn’t you know about Cruip? Check it out 👇
Premise
Behind every Cruip template, there is a solid design project. Davide Pacilio is the head of design and the man who ensures the respect of the best design standards. He uses to provide an essential (but very accurate) design system that guarantees a consistent visual identity for each template.
The color palette
On the left, there is the color scheme we’ve built for one of the most-downloaded Cruip templates of all time: Evelyn.
The palette includes:
- 3 shades for grey (for the typography)
- 3 shades for grey (for the background)
- 3 shades for blue (primary color)
- 3 shades for green (secondary color)
- 2 additional colors (to generate gradients)
Since the development of Evelyn, we’ve evolved and refined this color scheme, but the basic approach remains the same.
Let’s have a look at the file that contains the CSS variables and select the src/scss/abstracts/_variables.scss file (it includes many other variables but let’s focus on the $color map for now)👇
As you can see the color scheme reflects the color palette above with the only difference of the typographysub-map, which includes 2 extra colors (1iand 2i) used to invert the typography color scheme when you have a darker background (e.g on the hero section).
How to get colors from the palette
In CSS you would normally use background: #FFFFFF; to set a white background color, right? Well, in this case, the syntax is a bit different because we are using a variable (i.e. $color), which is a map of values.
I guess you are wondering: How can I extract the #FFFFFF color from $color->bg->1? To make things super-simple, we have included a Sass function to get a color from a map in an easy and understandable way 👇
Function usage is very simple:
color(bg, 1)returns#FFFFFFcolor(typography, 2)returns#5B6F82color(primary, 3)returns#007585- … and so on …
So, stop using colors like this: background: #FFFFFF; and go withbackground: color(bg, 1); instead. Using this technique, you can change the value of #FFFFFF in one place, and all the instances where it has been used will change as well. It’s nice, is it? 😉
Playing around with the color variables
From that point on, you should have a clear understanding of how to get colors and where color variables are, so let’s get our hands dirty with some experiments!👨💻
Open the Terminal and use the command line to navigate to the root directory of your template (cd /path/to/evelyn). Then type npm run watch command (as we have shown in the first tutorial). It will start a new server, open up a browser and watch for any SCSS or JS changes in the src directory.👇
Ready to go! Open the template folder with an editor of your choice, change color values into thesrc/scss/abstracts/_variables.scss file and save changes. 👇
Et voilà! Changes are immediately reflected in the browser! We’ve only changed primary and secondary colors and Evelyn has already got a new look and feel. Let’s have a look at the page before and after the color updates👇
As you can notice, for a few elements colors have not changed. Here is the full list of elements who aren’t affected by color palette changes:
- Header and footer logos
- Social proof logos
- Product features icons
- Images/illustrations below the section Meet Evelyn
- Social icons
That’s pretty normal because all the elements listed above are SVGs, and color properties are defined inside the SVGs themselves… Of course, we’ll talk about SVG customizations during the next series!
Some final things that don’t look very good are the buttons. The primary button (on the right-hand side) looks acceptable. However, we can’t say the same for the secondary one (on the left-hand side).
We will walk you through button customizations during the next tutorial. In the meantime, if you’ve missed the first part of building a landing page with Cruip, follow the link below 👇
