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.
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:
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
I choose 1140px 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:
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:
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.