Don’t Stick Only To Bootstrap Use Your Own Framework
By: Yunus Emre Aybey
Tags: HTML, CSS, Bootstrap, Framework, Bootstrap 4

REASONS

1- You Can’t Change the Bootstrap Way

Bootstrap grids always work on a 12-columns grid system. So you can’t change it. Maybe you would like to work on a 24-column system or maybe whenever you create your grid, you want 20px padding in it (you can do this in bootstrap by giving another class name to your row but still that is extra thing to add), or maybe whenever you insert an image into your columns you want them to be aligned automatically to center. These examples will go on but the main idea is you can tell your own framework how to behave and even you can change that behavior for another project according to your needs.

the col-3 effect when you use 24 column system on 8 divs

As you see above, while you can’t create 8 equal divs with the bootstrap you can do it with your own framework. Let’s think about another class of bootstrap: ”btn”. When you give this class name to an element it will behave like a button. Here are the class names of buttons and results of them:

Bootstrap Buttons on Bootstrap

As you see you need to give 2 class names, one for the button itself and another for the background and text color. But what if you want a different background and different effect when hover on the button? Yes, you need to customize it and not always but usually, when someone creates a button for a web page he or she usually uses the same style for every button on the page. Instead of giving 3 class names to an element you can create a custom button for your page and with only one class name you can use it thanks to your framework.

2- You Know What is Behind That Classes

Yeah just like that you know what CSS code has been written inside that classes so you understand them perfectly. But in bootstrap for many parts, you will only know the result of that class but you will not be aware of how it is done. For instance, did you know grid columns in bootstrap has -15px left margin? It is there for a purpose but you can’t know how every bootstrap class works.

3- No More Complicated HTML

While using bootstrap you will see there are too much class names for some elements. It causes confusion. Sometimes, in CSS, beginners chose an element by the class name like .col-3.mt-5.p-3 do you see what is wrong here? Exactly! What if you change mt-5 to mt-4? every time you change a bootstrap class for an element you need a change in CSS too, or for a better solution you might give a specific class name for that element but that also means extra class. So what you are gonna do here is deciding all the features in your grid system. By doing that your HTML will be clean so that you can give one specific class name to that element and apply changes by using that class name.

4- Different Layouts for Different Purposes

For me, the biggest weakness of bootstrap is, it has only one way. Let say you created your own framework, and you wanna create another project but that framework doesn’t exactly fit your project. So you don’t need to create another framework just copy your old framework and make small changes on it and your second framework is ready in minutes. You can name the second framework like blog_layout.css by doing that you will know it is for blogs. You can create as many frameworks as you want. That is the power of using your own framework.

5- You Can Still Use Bootstrap

Even if we criticize bootstrap here you can still use it. Because creating everything that is in bootstrap is really hard. Besides, many of the bootstrap classes will still be useful for your project. Just combine the power of bootstrap and your framework and built pages even faster than before.