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 -
- Responsiveness
- 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 -
- DevEd - Youtube
- Traversy Media - Youtube
- Complete guide to Flexbox -
css-tricks.com - The Thought Process Behind a Flexbox Layout -
css-tricks.com
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.)
Top comments (11)
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.
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.
Have you tried CSS grid? That's a real 🤯
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.
Flex for Life ♥️
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.
Oh, to be honest I hadn't considered that. Maybe will try.
Wes Boss has a lovely free course called What the Flexbox. Check it out!
Yes, I just found out about it today, it's so amazing.
I feel in a similar position!
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.