Building your own frontend framework from scratch — 3. Colours
What’s a framework without colour? Bootstrap 😝. Anyway I like colour, and I like colours that blend really well together whether they pop with brightness or are more pastille like. I’m admittedly not the best with making up great colour palettes (or colour theory in general) but one place I like to go to is ColourLovers. There are so many amazing colour palettes that you can go wild choosing one or putting your own one together.
So I’m just going to do a quick browse and see what colour palette grabs me!
Okay I’m back and I’ve chosen a pretty simple colour palette that can do enough to grab some attention.
I’m already getting excited about what we can do with this. So let’s break down the colours and then turn them into some code we can use throughout our project. The nice thing about ColourLovers is that they lay all these colours out for you very nicely with the hex and rgb values. We only need the hex values.
Cool, so lets use these colours! In src/sass let’s create a file called app.scss . We will use this file to bring all our custom styles to one place. Also in src/sass let’s create a folder called config and in that folder we can create a file called _colours.scss .
Now in app.scss we can add this line:
@import 'config/colours';What this does is when the scss is being compiled to css, it will all be compiled to a file called app.css . With that in mind, we need to add this line to our src/index.html file:
<link rel="stylesheet" href="css/app.css">By the way, all the changes we make will be in the src directory. One way I like to check if things worked is by adding a general css rule in the file I’m adding to see if it gets compiled.
So in _colours.scss add :
body {
background: red;
}and save. Run gulp serve in your terminal if it isn’t already running. This will compile your scss and open up a new tab in your browser. The background should now be red. If not, then something’s gone wrong. Also, you can leave gulp serve running. Every time you make a change to your code(and save), it will re-compile and automatically show your changes on the page in the browser. So that being said, you should always run gulp serve when you’re starting to do your work so you can see the changes come through immediately.
So if that worked, you can remove that code from _colours.scss because now we’re going to add in some proper, useful code.
This is what my _colours.scss looks like now:
$colour-orange: #fb6900;
$colour-red: #f63700;
$colour-navy: #004853;
$colour-turquoise: #007e80;
$colour-teal: #00b9bd;
$colour-dark-grey: #2f2f2f;
$colour-light-grey: #efefef;
$colour-white: #fdfdfd;$primary-colour: $colour-navy;
$secondary-colour: $colour-orange;
The $colour-* represents a variable which can now be used everywhere in the project. And if I want to change a colour, I only have to do it one place, which then makes our code maintainable which is something we should always be striving for.
What I’ve also done is thrown in a dark-grey, a light-grey, a slightly darker version of a white and set up what I’ve made my primary and secondary colours.
Now we have set up some colours we can now start using them. Now onto the next bit of work, setting up our Base.
*** You can reference the code at https://github.com/thabotitus/griffin-ui
