Customizing utility classes with Bootstrap

169

While working on a method of creating all kinds of utility classes by myself, I was doing research to all kinds of frameworks who do this.

My top 3 css frameworks

  1. Bootstrap

  2. Tailwind

  3. Foundation

Recently I also discovered:

  1. Vanilla framework

  2. Tachyons

But while I was figuring out the technique behind Bootstrap I stumbled upon the power of the way it generates the utilities.

It has this list of utilities which contains the information of the class, the property, desired values and even the option to say it needs to be responsive. In this way it’s similar to the “plugins” of Tailwind.

In both cases you have the power to generate the utilities in a very efficient way. You can easily extend or limit the number of utilities. Even controlling the naming convention is a peace of cake by changing the parameters.

Because I am more comfortable with scss than javascript, I prefer Bootstrap over Tailwind and am currently testing the Bootstrap api for generating all desired utilities. The current state of the project can be found here.

Profile picture Marco van Zomeren

About

Marco van Zomeren is a designer on a audio visual journey. Currently working full time at a company with several subsidiaries in the financial sector. Besides his day job he spends most of his spare time on producing electronic music. More...

Leave a Reply

Related

Get all Material design colors with SCSS and CSS variables

Today I tried an expiriment with translating the Material design colors to a SCSS map. It turned out quit usefull. While combining the colors with a lightness and alpha variable,…

Read more

Kleuren kiezen voor je website

Een van de eerste dingen die ik ben gaan doen voor het re-design van mijn website is het vaststellen van een kleurenpalet. Ik ben tot de kleuren gekomen naar aanleiding…

Read more

Example of utility first design

To demonstrate the power of a utility first approach I have made an first example. Here you can see with which html structure and classes you can create a simple…

Read more

Supercharging my css with Scss

At least an attempt. 😄 While Sass is still quite new for me, I am getting to know it better and better these days. The language really helps me to…

Read more

Wacom Bamboo pen and touch Catalina fix

Recently I wanted to use my Wacom Bamboo Pen & Touch again, so I plugged it in… without any success. The driver didn’t support it. So after testing it for…

Read more

Make your website dark-mode ready

Today I looked into the option to prepare your website for the dark-mode user setting. By applying different css styles for the preferred dark mode, I was able to translate…

Read more