On Building My Own CSS Framework - Layout

css Apr 16, 2021

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.

Layout Classes

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.

//This class should be used in a container which we want to display flex

.flex { display: flex}
Flex Container

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.

//A column (flex item) with 50% width

.flex-50 { flex-basis: 50% }
50% width flex item

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.

//A column (flex item) with 33.33% width

.flex-33 { flex-basis: 33.33% }
33.33% width flex item

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.

//A column (flex item) with 25% width

.flex-25 { flex-basis: 25% }
25% width flex item

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.

// A flex-item is forced to grow to fill up the remaining width

.flex-g { flex-grow: 1 }
Flex Grow Property

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

// A flex-item is forced not to shrink

.flex-ns { flex-shrink: 0 }
Flex No Shrink Class

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...


What's next?

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

A container with two items

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

\\mg = margin (This apply to all sides: top, bottom, right and left

.mg-0 { margin: 0; }
.mg-5 { margin: 5px;}
.mg-10 { margin: 10px; }
.mg-15 { margin: 15px; }
.mg-20 { margin: 20px; }
.mg-30 { margin: 30px; }
.mg-40 { margin: 40px; }
.mg-50 { margin: 50px; }

\\mg-rt = margin-right
.mg-rt-0 { margin-right: 0; }
.mg-rt-5 { margin-right: 5px; }
.mg-rt-10 { margin-right: 10px; }
.mg-rt-15 { margin-right: 15px; }
.mg-rt-20 { margin-right: 20px; }
.mg-rt-30 { margin-right: 30px; }
.mg-rt-40 { margin-right: 40px; }
.mg-rt-50 { margin-right: 50px; }

\\mg-lt = margin-left
.mg-lt-0 { margin-left: 0; }
.mg-lt-5 { margin-left: 5px; }
.mg-lt-10 { margin-left: 10px; }
.mg-lt-15 { margin-left: 15px; }
.mg-lt-20 { margin-left: 20px; }
.mg-lt-30 { margin-left: 30px; }
.mg-lt-40 { margin-left: 40px; }
.mg-lt-50 { margin-left: 50px; }

\\mg-tp = margin-top
.mg-tp-0 { margin-top: 0; }
.mg-tp-5 { margin-top: 5px; }
.mg-tp-10 { margin-top: 10px; }
.mg-tp-15 { margin-top: 15px; }
.mg-tp-20 { margin-top: 20px; }
.mg-tp-30 { margin-top: 30px; }
.mg-tp-40 { margin-top: 40px; }
.mg-tp-50 { margin-top: 50px; }

\\mg-bm = margin-bottom
.mg-bm-0 { margin-bottom: 0; }
.mg-bm-5 { margin-bottom: 5px; }
.mg-bm-10 { margin-bottom: 10px; }
.mg-bm-15 { margin-bottom: 15px; }
.mg-bm-20 { margin-bottom: 20px; }
.mg-bm-30 { margin-bottom: 30px; }
.mg-bm-40 { margin-bottom: 40px; }
.mg-bm-50 { margin-bottom: 50px; }

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.

\\pd = padding (This apply to all sides: top, bottom, right and left)

.pd-0 { padding: 0; }
.pd-5 { padding: 5px;}
.pd-10 { padding: 10px; }
.pd-15 { padding: 15px; }
.pd-20 { padding: 20px; }
.pd-30 { padding: 30px; }
.pd-40 { padding: 40px; }
.pd-50 { padding: 50px; }

\\pd-rt = padding-right
.pd-rt-0 { padding-right: 0; }
.pd-rt-5 { padding-right: 5px; }
.pd-rt-10 { padding-right: 10px; }
.pd-rt-15 { padding-right: 15px; }
.pd-rt-20 { padding-right: 20px; }
.pd-rt-30 { padding-right: 30px; }
.pd-rt-40 { padding-right: 40px; }
.pd-rt-50 { padding-right: 50px; }

\\pd-lt = margin-left
.pd-lt-0 { padding-left: 0; }
.pd-lt-5 { padding-left: 5px; }
.pd-lt-10 { padding-left: 10px; }
.pd-lt-15 { padding-left: 15px; }
.pd-lt-20 { padding-left: 20px; }
.pd-lt-30 { padding-left: 30px; }
.pd-lt-40 { padding-left: 40px; }
.pd-lt-50 { padding-left: 50px; }

\\pd-tp = padding-top
.pd-tp-0 { padding-top: 0; }
.pd-tp-5 { padding-top: 5px; }
.pd-tp-10 { padding-top: 10px; }
.pd-tp-15 { padding-top: 15px; }
.pd-tp-20 { padding-top: 20px; }
.pd-tp-30 { padding-top: 30px; }
.pd-tp-40 { padding-top: 40px; }
.pd-tp-50 { padding-top: 50px; }

\\pd-bm = padding-bottom
.pd-bm-0 { padding-bottom: 0; }
.pd-bm-5 { padding-bottom: 5px; }
.pd-bm-10 { padding-bottom: 10px; }
.pd-bm-15 { padding-bottom: 15px; }
.pd-bm-20 { padding-bottom: 20px; }
.pd-bm-30 { padding-bottom: 30px; }
.pd-bm-40 { padding-bottom: 40px; }
.pd-bm-50 { padding-bottom: 50px; }

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.

To recap:

If we want to have a container with three items inside side by side, here is how our HTML will look like

<div class="container flex">
	<div class="flex-33">
    Item One
    <div class="flex-33">
    Item One
    <div class="flex-33">
    Item One
HTML for three columns

Just like that, we should have a container with three equal-width items inside just like this:

A container with three columns

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.


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.