Breaking Away From Bootstrap CSS Framework

I began teaching myself how to code a little less than a year ago to give myself the ability to start any website I wanted without having to hire a programmer.

While I've genuinely enjoyed figuring out how to solve the logical problems required to make certain tools and apps, I absolutely loathe working on any front-end aspects dealing with UI and design.

Due to my hate for front-end programming and the fact that I had experience working with Bootstrap in the past WordPress websites I made using page builders, I just assumed using Bootstrap or another CSS framework was my best bet.

Bootstrap Does Speed Up Development

For my first coding projects, I used React-Bootstrap ("The most popular front-end framework Rebuilt for React") and React Select (for easy dropdown selection fields).

As you'd hope from something calling itself "Bootstrap," it did make it incredibly easy to shit out a halfway decent looking website. From memory and a bit of "ctrl + fing" the docs, I could knock out most of the design work for a new website in less than an hour.

The Problems With Bootstrap

The problems came whenever I wanted a unique look for a React-Bootstrap component. For Bootstrap to work, you need to use its CSS. This means that I had to overwrite the existing CSS any time I tried to custom style a bootstrap component.

Glossing over unused and duplicate code issues, this is a pain in the ass, at least for someone as awful at CSS as myself.

When adding a bootstrap component, you end up with a bunch of "phantom code." You write one line of code, that's actually a component with multiple lines. While this is the entire benefit of Bootstrap, it actually makes it a colossal pain to even find the correct element to target in your CSS.

I'd end up spending more time and writing as much CSS than if I'd just written custom code for everything.

CSS is Easy. What was I thinking?

I've been working on a new website recently in the golf niche. One type of content on the site is product round-ups (e.g., The best XYZ).
A requirement I had was a scrolling carousel of all the products in each guide. This allows readers who want a quick breakdown of each product to find answers to their questions above the fold. It also doesn't require too much scrolling down the page for readers who want more info (e.g., Things to Consider When Choosing XYZ).

If you're not sure what I'm talking about, here's a not quite finished but functional example I built, as you can see in this article.

Anyway, after hours trying to figure out how to make this utilizing Bootstrap, I cut my losses and decided to rewrite all of the front-end code for my website.

I watched a video on CSS Flexbox and spent about 10 minutes reading a couple of articles on the subject before beginning my start from scratch.

Well, it ended up taking me only a couple hours to rewrite all the front-end code I had and create the product carousel.

While I definitely need a web designer's help if I want to improve the looks of everything, I'm now confident I could make just about anything UI related in a somewhat reasonable amount of time. My code is also much cleaner and there are no risks of serving unused CSS.

I Should Have Done This Sooner

What's the point of this article?

I should have taken a few minutes to learn the basics of CSS a long time ago! After a few weeks of this, I actually find it far more straightforward than using a CSS framework.

I'm now preemptively kicking myself for the next major mistake I'll find out I've been making a year from now.