On my previous blog post, I shared my intent of making my own CSS framework and also started working on the names for different SCSS files. Today, I am going to focus on other areas of building my CSS framework...I will work on Layouts and other stuff. Come along
My CSS framework will be Flexbox based. I won't use Floats or CSS Grids. In general, I will have a combination of two columns, three columns and four columns in styling my layout. In two columns, a container will have equally divided columns with each having a width of 50%. The same applies for three columns (33.33% each) and four columns (25% each)
I decided to go with only four columns because those are the most that you're going to use most of the time. And even when you don't want to use only those you can easily configure your own flex-basis with the width of your choice.
The first thing on laying out our elements is to make sure our container has a display property of flex. It's optional though. If you don't want a flex container you can leave it out.
50% width column
This class will be donated by flex-50, meaning it's a flex item with a width of 50% or a half of the container width.
33.33% width column
This class will be donated by flex-33, meaning it's a flex item with a width of 33% or a third of the container width.
25% width column
This class will be donated by flex-25, meaning it's a flex item with a width of 25% or a quarter of the container width.
Note About Flex Width ( Basis | Shrink | Grow):
The advantage of using Flexbox Layout is that when we have a specific width for one flex item e.g 25%. We can easily set the width of another flex-item to be 75% by just having: flex-grow: 1 - this will force the whole column to expand and fill up the remaining width (100% - 25%). Cool! Right?
Now for my CSS framework, the class for flex-grow: 1 is going to be just flex-g meaning flex item should grow. Because by default flex-grow is 0 - meaning the flex-item doesn't grow.
The same applies to flex-shrink. Flex-shrink determines if a flex-item will shrink or not. Now by default, flex-shrink is set to 1, meaning it forces an item to shrink if it doesn't fit the width of its container. There are scenarios when you don't want this. So because by default we know it's gonna shrink, we don't have to worry about that, we are only going to set up a class for when we don't want it to shrink
A class flex-ns, meaning flex-no-shrink will be used
Flex-Basis is used to set up the width of an item. By default it's set to auto, we have already set all the flex-basis for our flex-items above so we don't have to worry about that now.
Alright! Alright! Things are cooking...
While we're still here on the layout...it's important to consider that the width that we have set will cause the flex-item to be next to each other. See below
As you can see above...the two flex items which have 50% width each do cover the whole container. There is no margin between them and also no padding at all. So in this scenario all the content, if it's text or images will be touching each other...a situation we don't want.
So in this part we're going to add some margins and paddings. It's also important to note that there are some situations you will want the two flex-items to touch each other e.g when making a gallery.
Utility Classes (Margins & Paddings)
Am going to use Utility classes to have some pre-made margins and paddings.
What are Utility classes you may ask, Utility classes are classes that serve just one specific purpose. Normally are used in margins and paddings.
For margins, am going to have a zero margin class, 5px margin, 10px, margin, 15px margin, 20, 30, 40 and 50. There are some situations where you will of course have to custom-make your margins
The same drill for paddings am going to have a zero padding class, 5px padding, 10px padding, 15px padding, 20, 30, 40 and 50. There are some situations where you will of course have to code your own custom paddings. But in most cases these should suffice.
Those should be pretty straightforward. Now our layouts can have both margins and padding if we choose to.
My CSS framework is slowly getting in some shape now.
If we want to have a container with three items inside side by side, here is how our HTML will look like
Just like that, we should have a container with three equal-width items inside just like this:
Ok...Part Two is over. My CSS framework is kinda starting to look good. We have our base and layout already. Let's see what's next.