Help me explain to my coworkers why Bootstrap 4 is not the answer. :(

[scribbles1188]

Hi all. I’m a designer (previous Front End Developer at IBM).

I’m working as a single designer at a company that has not updated its code base in 20 years. The developers there have 20+ years in the industry and have grown stagnant and comfortable using old code.

We do not have any professional Front End Developers. They are trying to use Bootstrap 4 as a front end framework, and we are already running into issues. They are using Bootstrap tables because they are “responsive.” However, the tables I designed are responsive, not because they scale down to view, but because their layout changes from a tabular layout, to a card-based layout on mobile phones. Bootstrap cannot handle this without code duplication. (They are duplicating the code and showing / hiding it based on the sizes.)

The main guy who prides himself on Front End Development is arguing that Bootstrap 4 is amazing. They’re pulling only the components they need via SASS, so it’s not heavy – nor is it “cluttering” up the CSS with its unsematic markup. (I haven’t seen the CSS yet, so I cannot confirm, but in my experience, trying to override Bootstrap has always led to messy files. But I also tried explaining that if he wants a modular component structure, React is a better way to go because of the fact that you can have automated structural, style, etc. unit testing – and React Storybook is hella nice for documentation.

On top of that, I tried explaining what Bootstrap was developed for: Internal tooling, and that it should not be used in production for a site with a long lifespan and a continuous deployment model.

His response was, “I’m seeing a lot of feelings, opinions, and speculation instead of facts.”

However, I’m not really in agreeance with that, but I am looking for some feedback on the “facts” that Bootstrap is not intended to be used in this way. If he wants responsive, I recommended Flexbox Grid as a better alternative – but he says that Flexbox Grid and Bootstrap are basically the same.

In my opinion, the facts are:

1. We’re duplicating code.
2. Bootstrap components do not work as designed.
3. Bootstrap’s framework has excess, non-semantic classes and litters markup.

Some of the logic I used to backup my arguments were:

With Bootstrap’s framework, you’re getting a one-size-fits-all (example, the problem with the tables) instead of something that actually works according to design. If you are using it for responsive web design, a better alternative is Flexbox Grid.

Bootstrap was originally created and intended for Twitter’s internal tools. Things that needed to be developed, quickly, for internal use, that would stick to a simple UI. If you needed to customize the UI, you were better off not using Bootstrap.

Bootstrap’s framework has excess, non-semantic classes and it completely litters markup. If you want to create layouts that best fit the business, you don’t want to go with something like Bootstrap that is strictly going to limit the capabilities on the front end. We’re already looking at code duplication because of Bootstrap’s framework. (Basically we’re going to have to copy the same code for mobile, because Bootstrap tables, while “responsive” <– I use this term loosely because they really aren't that great at it, cannot be changed via purely CSS into a different layout.) In the example of the Order Management table, you're actually better off creating a custom design with custom breakpoints (because it actually is faster than overriding class after class of Bootstrap framework code.)

Since I know a lot of developers here have almost no front end experience, I think it's important to note that while Bootstrap is fast and easy to implement, creativity is compromised as a result. Any design I pump out that defies Bootstrap conventions are basically taken off the table, especially when you have a tight time constraint.

Basically Bootstrap cripples projects in the long run – which is why it's not meant for a production site that is looking to continuously deploy and improve upon its features. It was not built for that, and I don't know anyone in my network that has ever considered Bootstrap a viable alternative to the many other amazing options that are out there that do a much better job.

• Flexbox Grid for Mobile Responsiveness
• React.js for modular components and automated unit testing (structural, interaction, css/style, and manual, etc.)
• Angular directives for modular components

He also said I'm confusing CSS Helper stuffs that they're using for layout with Javascript client-side development frameworks – however as far as React is concerned, it's a JavaScript library that's specifically geared towards developing User Interfaces, so I think he's mistaken in that regard as well.

I'm trying to come up with an explanation that will help him understand what we're trying to accomplish, because the entire company is dated, and I'm trying to help them bring themselves into the 21st century, but I get pushback left and right, when I'm really trying to get them to help themselves. :(

[Author]

Posts