On Building My Own CSS Framework - Base

css Apr 12, 2021

Time is of the essence. Every time you take some time learning about something new you could have been using that time building a product or shipping something new.

When it comes to developing websites it's no different. We have a plethora of options. Luckily, HTML will always stay the same (I hope)...with some sprinkles of Emmet, the typing becomes joyful. Now I wish I could say the same for CSS...It's where developers spend a lot of time in when making their websites. To make this job easier some CSS frameworks such as Bootstrap, Bulma, Foundation, Tailwind CSS to mention a few imagined.

Each of the aforementioned frameworks has its own rules and syntax. Some only use CSS, some include JavaScript too. You can't effectively use any of it without taking some time to understand it. Plus they keep developing and as time passes more features come by that you also have to learn about to make the most out of the framework.

Developers nowadays are kinda shunning away from Bootstrap...maybe because it has been around for such a long time and as we all know the developer community is normally suffering from the Shiny New Object Syndrome (SNOS) - I think I might have coined the acronym. Anyway, SNOS makes developers welcome new kids on the blocks...frameworks such as Tailwind CSS and Bulma are now the talk of the town. Let's wait the next five or seven years when every other site looks like a Tailwind CSS site...then we will see a lot of new frameworks being adopted.

So where am I going with this? Frameworks are made for the general audience...and most of the time they pack so many features that for any one website is just an overkill to download or include all those components. Now I know people will say but you can download whatever modules you want. Well! Maybe. ...What bothers me the most about frameworks is the fact that I have to spend some time learning them. Well! I already know CSS and SASS why should I learn another CSS again enclosed in a framework. And what makes it even impossible for me to consider them is the fact that whenever I have to customize something...it can be a pain at times...I feel as if I have so many restrictions and my custom CSS will start fighting with the framework CSS

So what's the solution? You guessed it right...My Own CSS Framework.

Yes! This is mine alone.

Over the years I have built a whole bunch of websites. And the process is normally the same. First I have to come with a general layout of my website...making sure my general container maybe doesn't exceed 1200px, pick a good Google font, come out with website colors, etc. Always the process is pretty much the same. So why shouldn't I come up with a system, a framework or maybe components whichever name you wanna call it. That will make it easier for me to work on my projects...I will use only what I need and keep on developing it while I pick the good stuff from other frameworks.

So this will be the first blog post on this series of making my own CSS framework. I want it to be simple and joyful to develop in. Moreover I don't want it to have too much constrain on my creativity...On my mind I should feel as if I am coding from scratch...and I should not be limited in any way or be forced to hunt down all the other CSS not agreeing with each other.

Come with me as I build the tiny little framework or maybe just a bunch of components. Let me know what you think.

Please note: I will try to use SCSS, I have come to note that even if a website is just one page...the CSS can easily exceed 300 or 500 lines. So in that case it's better to build from scratch knowing that the CSS file will be bigger than expected. And using SCSS is one of the best ways to manage our different components.

0. CSS Resets

Am building this CSS framework following the steps I normally come up with whenever building a site. The first thing I normally do is to make sure all the browser defaults have been reset and this is the code I normally use:

* {
	margin: 0;
	padding: 0;
    box-sizing: border-box;
  }
CSS Resets

So how this will be used. It can be taken as just CSS and included on top your main CSS file or I will put it as a .scss file and will be part of the main.scss. And the name of the file can be resets.scss

1. Coming up with the Container

When I am coming up with a new site, I normally come up with the width that my main section of the website will be contained in. It is maximum width actually

.container { 
		max-width: 1200px;
        margin: 0 auto;
        }
Main Container

I choose 1200px because screens are becoming bigger and I think that's a good starting point. I might call this file container.css

All our content will be inside our containers. And All containers will be inside sections this is because a section can be wider than the container. And as you saw on the snippet all the containers will be centered on the browser.

2. General Typography

This is where we are going to choose the general font type/s to be used on our website. Normally I grab fonts from Google Fonts and Google allows us to embed our font directly to our CSS. An example would be something like this:

@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');

Google Font

And that's how you import Google font on your stylesheets.

Tip: When you visit Google Fonts...don't just copy...read more about the history of the font and maybe its creator...That section is normally down on the page. Doing that will help you to know more about the uses of the font. For example, through reading that page, I found out Gotu (the font above) makes better headlines.

Depending on which font type I have chosen and which font weights I want I will set up something like this:

html {
	background-color: #fff;
    color: #555;
    font-family: 'Gotu', sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    }
HTML Styling

Now, some of those values are hard-coded for now but with the introduction of variables later on we can have variables such as $default-font-size, $default-font-weight, $default-color, etc. And changing the values in just one area should affect all our style sheet.

...OK, this is part one. Slow but surely!  ...It looks as if am building a website but No! ...It's a system, a framework or whatever you wanna call it.

Tags

Ami Amigo

Ami Amigo (pseudonym) is one of the main contributors to this blog. He is a tech aficionado, developer, blogger and an online instructor. Ami Amigo studied Computer Science and Philosophy in college

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.