Building your own frontend framework from scratch — 4. The Base

So as you may or may not not know, browsers have different defaults for web pages. One example is, if you look at the default un-styled button on an OSX vs Windows vs Linux machine, they’re all different. So in order to make it as consistent as possible, we must set up our own defaults.

The first part is to set up Reset or Normalize. They do similar things in reducing inconsistencies. I’ve come to prefer Normalize, and luckily it’s already part of this project, so no extra work for you.

The second part is to set up your own base rules, fonts etc. This file evolves as you go along. Let’s start with fonts as that will be the easiest. Google Fonts has a really awesome collection of free fonts. So let’s go pick one. I like sans serif fonts because they are easier to read but also just clean.

Okay so I’m back. I was gone for about 20mins. Not even joking. Sometimes it’s difficult choosing a font. So I settled with Poppins. Sometimes you can get 2 fonts because some fonts are good for headings and others for normal text. But with this one I was happy for it to take care of all text. It has 18 font weights. We don’t need all 18. I just took 300, 400, 700 and 900. That should cover most if not all of our text needs. Also you don’t want to load all styles because it takes longer and it’s not a great user experience waiting for the page to load the fonts, the damn fonts!

Okay so lets add this font to our project. Google Fonts is actually has a tool that makes it easy for you to use the fonts. I won’t go into to explaining how to use it because it’s beyond the scope of this, but also I’m just super lazy! Maybe if it’s of any value I’ll write a post on how to do it. But it probably isn’t.

Anyway lets create a new file called src/sass/config/_fonts and inside it will be this single line:

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,700,900');

Well it looks like 2 lines because Medium likes this whole skinny column look, but it’s actually one line. You may think that it’s pointless having a whole file with just one line in it, but it’s not because now you know exactly where your fonts are and what’s being loaded — again, maintenance.

Let’s also create another file called src/sass/config/_site.scss and in it let’s put this code in:

$primary-font:     'Poppins', 'Arial', sans-serif;
$text-colour:      $colour-dark-grey;

Again, we’re setting up some variables we can use anywhere in our sass. And in the case of $text-colour we’re using a variable we set up in _colours.scss , nice!

Let’s create one more file called src/sass/_base.scss and in it let’s add:

html, body {
  width: 100%;
  height: 100%;
}
body {
  font-family: $primary-font;
}

Nice! Now for us to see any of these changes, we need to add these new files to app.scss . So let’s do that. My app.scss file now looks like this:

@import "normalize";
@import "boilerplate";
@import 'config/fonts';
@import 'config/colours';
@import 'config/site';
@import 'base';

I took the normalize and boilerplate lines from src/sass/main.scss so now we can actually delete that file because now it has nothing in it. We can also get rid of src/sass/_sandbox.scss because we never use it. We also need to remove this line:

<link rel="stylesheet" href="css/main.css">

from src/index.html because we just deleted src/sass/main.scss and therefore will no longer get compiled.

And lastly on line 59 of src/sass/_boilerplate.scss we must remove this:

@import "sandbox";

because we just deleted that file as well and it won’t compile looking for a file that no longer exists.

Awesome! We are making great progress.

With regard to our app.scss , it’s important to note that the order of each of those line is important. Fonts need to be loaded before you can reference them in config/site and also we need to load config/colours before config/site because colours that we set up are referenced in config/site . Make sense? The order of files is rarely a problem, unless you’ve done something really bad that causes some cyclic dependency issue. But that won’t happen if you keep it simple!

I believe we’re now in a good place to start building our features now. We’ve come a long way, but there’s still quite a way to go. But if you’ve come this far then I’m already proud and happy! We can do this!

*** You can reference the code at https://github.com/thabotitus/griffin-ui