Why Do We Under-Estimate the Power of CSS Frameworks

Why do we underrate tools like CSS frameworks? If you understand material UI, Tailwind or bootstrap, you could be a good designer. I am not really into frontend development, but I have worked on multiple projects with raw vanilla JavaScript. It took more weeks before I completed my responsive website😉😉.

Although they came out well, I struggled to resize my site to fit in different types of screens. It was sucking at a time because I understand bootstrap. I was writing raw CSS which could occupy even half the time of working on the project. I let you know that I am a Django enthusiast-backend developer.

But this year I decided to take a journey to learn some front-end tools. React has been my first option, and I am struggling with it. To be good enough, I have learned some amazing bootstrap. It saves time. It saves you from the hectic of resizing your screen. But chill and relax, you must understand CSS deeply before using bootstrap. For those with interest in the frontend, opt to study material UI or Tailwind CSS, I haven’t used them but from the stories, they are good tools.

As a backend engineer, you also need to understand how the front-end processing is done. There are moments when you must optimize the site to achieve performance and memory space. Having all the full-stack knowledge will be an added advantage, especially when working on SOLO projects. We don’t mean you focus too much on both, but at least have some knowledge.

What I have been missing is the bootstrap tool on my list. I never knew you could reverse the columns using this CSS framework. I guess I am good at CSS, but I realized I was wasting a lot of time investing in something that you could just do in a few minutes.

Let me give you some examples lol😂You must see the new things in bootstrap

To reverse the column on the medium screen, they use “order-md-1” or “order-md-2”. This simply means on a medium screen the content of column 1 will transform to column 2 and vice-versa. Wow, this is easier. If you want to swap orders when the site loads, don’t include the md. Just use “order-1” and “order-2”.The middle word will just indicate the type of screen you are targeting. Either Large, small, or medium using abbreviations, lg, sm, and md respectively.

When dealing with columns, and you want to center them, then use “offset-2”. It eliminates the right space that could have remained if the two or several columns did not fill the whole size. You can also add the offset to the second or third column and leave the space on the left.

I also realized you can create your own bootstrap. Relax, there is no secret, it’s just creating a class😂😂, then it becomes the selector in CSS file😂I know you understand this right. That’s all.

Another important thing I loved about bootstrap is the button styling. You have to understand which button is used for a specific purpose. Like deleting button must be red, to signal the user that he/she is making a dangerous move. It’s easier with bootstrap. To delete, just use “btn-danger”.

Let’s assume you want your button to be long and occupy the entire page. ” I think i helped you somewhere. Dont forget to criticize my writing, but understand am not a front-end nigga. Code for life 😂😂😂