The Bootstrap Dilemma

The Bootstrap Dilemma
0

#1

So, I was working at an established startup (30 developers/designers) for the past year or so and loved every aspect bit of it. We had an exceptional in house UI/UX team and as a developer my frontend chops levelled up like crazy.

One practice which we painfully learned in one of our initial project was that while using Bootstrap might help you get from 0 to 90% really quickly that last 10% worth of custom solutions are always a huge pain - since you had to deal with specificity related issued and write ‘!important’ all over.

As a result we ended up opting for SMACSS/ OOCSS model and write our own solutions for everything. The project as result became super maintainable and highly flexible.

Which leads us to today.

I recently joined a super early stage startup which has 7 developers in total with just 3 of them being front end developers and 1 of the front-end developer being an intern.

Now the project is a FIN-TECH product.

Just yesterday we received the onboarding UI. And the project manager is asking us to build the whole thing using - you guessed it - BOOTSTRAP.

What should I do?

I tried sharing my experience no to avail.


#2

If they already have a design in mind for you to implement, take a close look at it to determine what is possible in Bootstrap and what modifications it would take to make it work.

If there is no design, but just features / user stories, then just build the thing in Bootstrap. At least the Bootstrap will be easy for the intern to pick up, right?

Bootstrap doesn’t have to be super hard to modify if you spend a little time getting familiar with the source code for it. They provide some tips on customizing it here: https://getbootstrap.com/docs/4.0/getting-started/theming/

With appropriate class naming and awareness of selector specificity you shouldn’t need to fall back on !important except for exceptional circumstances.

However, if you really want to push back: Is the other front-end dev more or less experienced than you? What’s their opinion? Why is the PM so wedded to the idea of Bootstrap, even in the face of your rational objections?


#3

You may also take a look at tailwindcss thats a very nice utility framework to work with.


#4

Hey @JacksonBates I absolutely agree with your point that if the design requirement has elements that bootstrap offers out of the box - customising the looks of those elements shouldn’t be an issue.

However in our case - they’ve outsourced the designs - and it would require creating custom solutions from time to time.

My grudge with bootstrap is simply the pre-forced selector specificities. That comes just by including bootstrap.css in your project.

Simply head over to their css hosted on CDN - https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css

and Ctrl+F or cmd+F the term !important - 889 references (as of today) :open_mouth:

Anyhow,
Fellow Frontend colleagues will take the-Bootstrap-option in a heartbeat - since that’s more comfortable for them and will save them the hassle of having to learn CSS Flexbox and Grids.

I think the founder’s (also PM) logic stems from the same place - hiring an entry level Frontend developer with bootstrap experience is easier.


#5

Thanks for the suggestion @sorinr. I’ve heard a good deal about it but don’t really know about many enterpresies that are using it as a solution.


#6

I hear you I’ve also personally started dreading working with Bootstrap, we have now been working with Bulma CSS and it has been a blast it is very easy to use, no JavaScript needed and your styles can overwrite the library pretty easily. You should try it.


#7

@Yiosh Bulma is pretty great - I use it in my mid-size side projects often - another one is Skeleton CSS which I’ve started to like. But here’s the thing - anything enterprise level with a digital product in pipeline - I’d rather use

  1. Use/include any tried and tested grid/layout solution from one of the popular frameworks.
  2. Use scoped components (think styled components) - where CSS are tied to the components.

Just these two practices I’ve found make scaling an absolute breeze.