How to build your own custom css framework in SCSS

If you’ve ever used Bootstrap classes to write CSS, you would appreciate how powerful and effective they are. While Bootstrap is great, sometimes it might not be the best solution for your project. Other times, you simply want to create your own classes that do very specialized things you need in your project.

In this article, I would cover how to create a quick custom framework for CSS using SASS to supercharge the process. SASS is a powerful tool that allows us write CSS in non-conventional ways. It takes the “weird” CSS you write in the SASS language(SCSS) and converts it into regular CSS. This is basically why SASS is called a pre-processor. This framework will be based on CSS grid and bootstrap class names.

To setup SASS for VSCode, follow my article here.

Once you are done setting up SASS, it’s time to start creating our custom framework. All your code MUST be written in the .scss file, anything you write in the .css file will not be compiled. Firstly, we need a way to create new rows. We will use CSS Grid to achieve this. The class will be named container.

We will be using similar class names to bootstrap just because I believe their class naming system is very intuitive.

The grid-template-columns property creates a 1-column grid, 12 times. This creates a 12-column grid layout which we will use to create columns that span different sizes.

Now, here is where things get interesting. SASS allows us to write for loops as you would in a normal programming language. This helps us speed up the development process. Also in SASS, variables are declared using the ‘$’ symbol in front of the variable name.

For example, I declare a variable called ‘columns’ which we will use to represent the number 12.

The piece of code above is telling the SASS compiler to write us CSS codes that create classes from ‘col-1’ through to ‘col-12’ with columns that span i spaces/grids.

Here is a sample CSS output for the SASS Code above.

This is what is output in our styles.css file. You can also create a responsive version of the columns by using media-queries and other class names to represent different screen sizes.

This brings us to our second SASS lesson, nesting. In the code below, rather than rewriting the for loop, we can simply nest the responsive classes and media-query within the first loop.

Now that we have a way of creating rows using our container class and columns using our .col class, next thing is for us to create custom classes for our margins and padding. Using the same template for creating the columns, we can do this.

The first part creates a .mt-md class that creates a margin-top of {$i}em. In other words, each time we increment the loop, the value of i increments and the value of the margin-top is also incremented.

Once we are done creating classes for margin-top/bottom/left/right and the paddings, we can now create classes for our colors.

To demonstrate how we can import additional SCSS files, we will create a new file called — colors.scss. One important thing to note is that writing your CSS in SASS bundles all your CSS into one file which means you do not need to make additional HTTP requests to pull in your other CSS files.

For example, say we had a colors.scss and text-styles.scss. Both files will be imported into our styles.scss using the @import keyword. See below. The .scss extension isn’t added when the @import keyword is used.

Now we can create color classes for our background and texts.

for texts, simply create new classes and change the CSS property to color. You can then pass in the variable color names.

Last thing we want to create is a way to increase font-sizes, change font-weights and align texts. Just like above, we declare the classes we wish to use, state the CSS property we want and its corresponding value.

To recap, we now have 4 poweful features in our framework:

background and text colors, margins and padding, rows and columns and text-sizes and alignments.

One last thing before we use our framework. Let’s create a flex class that we can apply to our content quickly.

Now it’s time to see our framework in action.

We will be building the navbar from the Apple.com website.

Here is our HTML.

And here’s what our final navbar looks like.

As you can see, we create a new row using the .container class we created. We can also make it take up the full 12-columns on the page by using the .col-12 class. The navbar is given a grey background using the .bg-dark-grey class we created earlier in the colors.scss document. Next we use the flex class we created .flex-this-nav to ensure that the navbar has a flex property.

If we wanted custom spaces between our list items, we can simply add a class property to the <li> and add in a class of pl-1 and pr-1.

And that’s it!

This is how you create your own custom framework. Of course, you may expand on this and add as many features as you want to yours.

If you are interested in seeing how I’ve used a custom framework I created with a coding partner, check out my github repo.