DEV Community

Manan Gouhari
Manan Gouhari

Posted on • Updated on

Flexbox changed my life, bye bye boostrap

Learning flexbox changed my life.

Well, you could say it's an overstatement, but worth it.
To add a little context, I am a developer focused on backend web development, so I simply used to use a framework like Bootstrap for two major reasons -

  1. Responsiveness
  2. Creating layouts using the grid system

But recently I had been getting frustrated with how ugly and generic my sites would end up looking because of Bootstrap. I knew it in me if I could conquer a beast like backend development, how tough could CSS be? This initiated my foray into the pure custom wrote CSS.

I honestly never felt that I would have fun writing CSS and designing UIs, but man it is addictive.
When you combine basic CSS skills with a sprinkle of aesthetic sense, it's a combination worth moving people. Non-tech people can't usually appreciate what goes on at the backend of a software, UI, the frontend is all they see, the cover of the book does have quite a lasting impact.

Flexbox provided me the power to tackle both, mobile-responsiveness and making layouts through pure CSS, now I won't ever use Bootstrap unless it's forced upon me.
Flexbox has a few core concepts, when applied top-down, help you in creating great layouts with ease.
What do I mean by applying the flexbox concepts top-down?
Think of your whole layout as a flexbox container, then drill down on the individual components. Your navigation bar, lay it out using flexbox. Your main area, lay it out using flexbox. Information cards, yes, flexbox will help you lay them out too.

Resources I found most effective -

Stay tuned, I am planning to write a blog post explaining the intricacies of Flexbox.
Edit - Here's the promised blog post -

If you find anything in this post that requires correction, please let me know. (this was a very quick and spontaneous write.)

Discussion (11)

Collapse
thechrisjasper profile image
Chris Jasper • Edited on

I get what you are saying but Bootstrap is a poor choice for solving the two major reasons you listed in the first place. While it does contain layout and responsiveness utilities, that is not the main goal of the project. I'm also primarily a backend developer. I agree that the base style of Bootstrap is not exactly attractive, it is extremely easy to override for your specific design. The major benefit I find is the unified style across my entire sites instantly. I've found that on our projects with multiple devs where preference can vary wildly, Bootstrap adds a bit of sanity and forces a consistent look and feel.

Collapse
manangouhari profile image
Manan Gouhari Author

I see what you mean. In your case Bootstrap definitely does the job. But my use cases are different coz I don't usually work in teams consisting bunch of people yet, still on the learning journey.
Again, thanks for pointing out those very valid points.

Collapse
pcvonz profile image
Paul

Have you tried CSS grid? That's a real 🤯

Collapse
manangouhari profile image
Manan Gouhari Author

Yes, I feel the grid is better for sections of layout, not the whole. For example, if I had to display my projects in a grid as a card on my portfolio, I would end up using grid over flexbox.

Collapse
adisreyaj profile image
Adithya Sreyaj

Flex for Life ♥️

Collapse
rosskenney profile image
Ross K • Edited on

Bootstrap 4 uses flexbox for its grid. If you check out the sass files, you can pull out just that. I think it is helpful to go through and understand the underlying code that makes up the framework. I also like the reset they use which is a customized version of normalize. Those two things are all you need.

Collapse
manangouhari profile image
Manan Gouhari Author

Oh, to be honest I hadn't considered that. Maybe will try.

Collapse
maditya profile image
Aditya Menon

Wes Boss has a lovely free course called What the Flexbox. Check it out!

Collapse
manangouhari profile image
Manan Gouhari Author

Yes, I just found out about it today, it's so amazing.

Collapse
duanecreates profile image
Duane Creates

I feel in a similar position!

Collapse
nieuwepixels profile image
Nieuwe Pixels

Look into kindling on Github. An extendable boilerplate SCSS to customize to your needs.
I've built my in-house framework on top of it.