SASS, CSS framework, and Task runners

Many years ago, I worked with a web designer. What she did, was she designed and created the templates for the web applications and gave them to the developers to integrate into the web application. At that time, I never used any CSS frameworks or any pre-processor compiler before. I just used the templates and stylesheet that she created.

But there were many times that I needed to adjust the color, padding, etc in the templates in order to fit my needs. What I did, was I had to either add the custom stylesheet or use it to find and replace the piece of code I needed to change in the templates. I asked myself why I had to do so much work if I just wanted to change the color or small things in the templates.

Since I am a developer, I use conditional, loop, or variables often. Those methods save my development time and make code cleaner and easy to modify. So I started to do some research and found the Bootstrap CSS framework and SASS which is a pre-processor compiler. Plus I learned the grunt and gulp which are the task runners. Combining those three tools, made my work faster and more fun to work with.

Table of Contents

Bootstrap – The most popular HTML, CSS, JS library

Bootstrap CSS framework is one of the popular CSS frameworks. Personally, I use it often. It is easy to use, easy to learn and give me more options to customize to fit my need. Currently, I am updating this post, Bootstrap 5 is the later version. Bootstrap 5 comes with Webpack, Parcel, Vite SASS, CSS variables, a pre-built JS library that is ready to use, and many more. If you never tried the CSS framework, I suggest you learn the Bootstrap framework. Once you get the idea of how to use CSS frameworks and how to customize them via SASS, you can apply the same idea and learn other new frameworks as well.

Moreover, a grid system from Bootstrap is very customizable. You can create more breakpoints and adjust any max-width of each breakpoint to fit your need. I highly recommend that web designers learn the grid system and responsiveness from Bootstrap. It will help the designers understand how to design based on a grid system and how to transfer the design to all devices. Understanding the grid system and design based on the grid system will transfer the design to the developer easier.

Know that, the grid system needs a container, row, column, and grid gutter. The Bootstrap grid system by default comes with 12 columns with equal width. However, if the content doesn’t need the 12 columns, the designer doesn’t need to use the 12 columns but honestly using 12 columns is a good idea. One more thing, using the grid system will help you design consistently. The vertical and horizontal space will be consistent. The alignment will be consistent. I had experience working with a UI designer who doesn’t use the grid system. The result is the space, text style, alignment, and element dimension are not the same every time, I receive the new page design or the revised page design version, I need to add extra CSS rules because nothing can be set as global. I also had experience working with a UX designer who knows the grid system and the design is consistent. When the design is consistent, the designer and developer work faster. Meaning the business saves time and money.

Create a Prototype with Bootstrap framework

I sometimes use the Bootstrap framework to create the prototype to present the idea to my clients. Some clients can not see the whole picture when the idea is in the text or visual presentation (images). But they can see the whole picture when they can interact with the presentation. In most of my cases, I will create the prototype using Bootstrap for a web application project. Also, some of my clients need the prototype quickly in order to present it to the stakeholders or investors.

Remember, Bootstrap comes with HTML, CSS, and JS library (accordion, modal and more). So you can use them right away without any customization to get the prototype up and run. If you need to change the text font, color, or any CSS rules, you can change from the SCSS files from Bootstrap and compile them by task runner (gulp or grunt). You get the result fast this way. Save time means saving budget!

Bootstrap Useful Links

Other CSS frameworks

Apart from the Bootstrap framework, we have;

SASS

SASS is a pre-processor compiler. With SASS, you can use variables, nesting, partials, import, mixins, extend/inheritance, and operators. Additionally, you can use the built-in functions to help manipulate numbers. It is very powerful. Of cause, you can use other pre-processor compilers like LESS or Stylus as well.

Below is what the SCSS code looks like and what CSS code looks like after being compiled.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

As you can see, the SCSS code is more like you write the code when you are developing. You can declare the variables and use them anywhere in your SCSS files. When you change the variable value in one place, it will affect all variables you use in your SCSS file. Once you compile the SCSS files, you will get the CSS rules and ready to use.

SASS Useful Links

On the production, the CSS file will need to be added to the CSS Vendor Prefixes in order to render all CSS features on all browsers correctly. After that, the CSS file after adding CSS vendor prefixes will need to be minified in order to load on the page faster. We do that task by using the task runner.

Other pre-processor compilers

Grunt & Gulp – Task runner

Grunt and Gulp, both are task runners. Personally, I use Gulp since the code is easy to understand and shorter than Grunt. With Gulp, you can install more useful packages and use them in your project. For example, minify CSS and HTML, compile SASS, concatenate the files and compress the images. Besides Grunt and Gulp, you can use Webpack and ParcelJs.

I have a post talking about how to set up SASS and Gulp. If you are interested in SASS and Gulp, visit “How to set up SASS in VSCode“.

Apart from using Gulp for compiling the SCSS file, you can use Gulp to minify Javascript files and compress the images as well. What you need, is the packages that you need to download from npm packages website. Use NPM to install those packages, then write the task in gulpfile. Finally, run the task. My above post will guide you step by step.

Wrap up

Working on a small project and not complex, you may not need the whole set I mention in this post. But if you are working on a big project and complex on the frontend, the right setup from the start will save your time when it comes to customizing or changes. I learn the hard way.

Is my post helpful? please consider buying me a cup of coffee. And that’s it for today.