Help me convince coworkers why Bootstrap 4 is not the answer. :(

General Web Dev
1

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. :frowning:

4 Likes
2

Having worked for many larger organizations I always tend to favor what is best for maintaining a project long term. So I always tend to see frameworks of any type as better solutions to custom code. It has nothing to do with code quality or performance. It has everything to do with well known open source projects having large communities, decent documentation, and better targeting of abilities for potential resources. I don’t think because you run into a few problems using a framework that you might not otherwise is a reason to abandon it css or otherwise. Frameworks might have bloat, unused things but they make it much easier to adapt to new problems. Problems that come up in something that needs to be maintained long term. Not to mention framework knowledge significantly increases your value in the marketplace. Addressing Bootstrap specifically flex box does not solve all problems you deal with in a typical web application. It is a good solution for layout but what about building reusable components. Bootstrap already has a suite of reusable components based on popular design patterns that have been tried and tested.

1 Like
3

Hello,

Sorry if my reply doesn’t go in your way. But I work in a big company and create a “branded bootstrap” framework which is now used for most of website (internal and client side).

Why? Because it allow all developpers team to start with all branded stuff, provide the same user experience and mostly quickly upgrade. In your case, I think Bootstrap or other is not the problem, as your dev says, you mix “html/css” framework, with “javascript” framework, basicaly Bootstrap actualy use “jquery” for Javascript components, but there’s adaptation with “angular”, “react.js” and many others.

The main question is not “does Bootstrap fit to my design?” but “could developpers use bootstrap to implement my design?”, we have added some specific component to our bootstrap to be able to fit all the design specification.

So, to resume, I think that Boostrtap or other front-end framework won’t be a limitation for your creativity, but if developpers don’t know how to use it really, you can’t go nowhere.

2 Likes
4

Hi there lindsaybeckworth,

unfortunately, it seems that you’ve come face to face with the…

“ad populum fallacy.”

[quote=“- Jason M. Knight”][color=#069]
Why Bootstrap Is Bad

Bootstrap encourages the use of classes in a presentational manner,
which defeats the reason for keeping HTML and CSS separate.

Bootstrap encourages the use of endless pointless redundant classes
with pointless divs, resulting in two to three times the HTML as one
would have without it, only further compounded by one having to write
as much CSS as one would have without the framework. If it saves one
anything in CSS, it only does so by making one write sufficiently more
HTML that it’s awash. It’s a step sideways on work and a step backwards
on methodology.

Since it’s use results in presentational classes and excessive div and
span elements, it is basically putting presentation in the markup where it
has absolutely no business. HTML and CSS are separate so one can
have multiple appearances, slapping a class in for each of those
possibilities is really nonsensical.

The way Bootstrap works is as flawed as the new, allegedly structural,
tags from HTML 5. It undoes nearly twenty years of progress to the point
where one might as well go back to writing HTML 3.2 and pretending that
CSS never even existed. It can only make one’s work harder.

The HTML should say what things are, not how one wants them to look
like. By using classes to say what things are going to look like, one
violates that most basic rule of what HTML is actually for. That’s why
OOCSS and the the frameworks based on that notion are utter rubbish.

If it looks simpler, one falls into the trap of false simplicity. It is as much if
not more work, resulting in one writing as much if not more code, not
counting the massive size of the framework against it. The only way it
could ‘be simpler’ or ‘easier’ or ‘faster’ is if one doesn’t know enough
about HTML or CSS to to make a rational choice about using a framework.
[/color][/quote]

coothead

5 Likes
5

I have used Bootstrap in plenty of production environments and I don’t see any arguments here that are compelling enough that you shouldn’t use it. It is made for teams with small frontend teams or teams that don’t have the resources to reinvent the wheel for everything on the frontend. You can just throw classes up there and get them to do the basics of what you need, then override the styles you need to customize it.

Customizing BS is incredibly easy because of their variables.scss file, or just by looking into their scss files for the thing you need to mess with and overriding the right classes it generates. I’ve even dug out some helper classes and made changes to those, then ran those along side of the build. It sounds complicated, but it’s way less work than doing everything from scratch.

Like any framework, JS/Backend/CSS, with Bootstrap you’re buying into the ability for anyone to come in to your project and instantly know how you built most of it, as well as being able to rely on external sources for help and bug issues. This is a huge benefit for maintainability and longevity.

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.
…

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

React.js is not an alternative to Bootstrap in any way. As a matter of fact, if you use React with styled components or CSS Modules, it completely eradicates your issues of Bootstrap polluting the global scope, because there is nothing else that lives in the global scope except for BS.

Neither is Angular, but I’m less familiar with the way you build Angular applications. Your JavaScript framework has absolutely nothing to do with the CSS framework.

Feel free to use any JavaScript framework with any CSS framework you like. Or feel free to use no JavaScript framework with no CSS framework you like. Or any combination of the above. Doesn’t matter, they are completely unrelated.

If you needed to customize the UI, you were better off not using Bootstrap.

Untrue. It’s CSS. You just override it. Ridiculously simple. You should never use Bootstrap in an uncustomized way, it looks like garbage, even if customization is just a pre-made theme from somewhere else thrown on top. Bootstrap is very bare bones and not made to be used uncustomized. Because of that, it’s very easy to customize.

because Bootstrap tables

imho, even for tabular data, you should not be using tables anywhere. It puts constraints on the data in ways that aren’t good for responsivness. If you rethink the way you structure your data on the screen, then you can much easier make it easier to use on mobile, rather than trying force responsiveness for an HTML component that is anti-responsiveness. I much prefer to use the role attribute for accessibility, rather than actual table elements. This is largely just my personal opinion, though.

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.

No, you are wrong he is right. I mentioned this above as well. Bootstrap and React tackle entirely different problems. Look in to Reactstrap. It is a set of React UI components built on Bootstrap 4.

The only pieces of Bootstrap that require JavaScript are optional pieces like Modals and Tooltips. Which, if you use with the base Bootstrap library, then you’ll also need to add jQuery. In Reactstrap, they have rebuilt these in ES6 and removed jQuery entirely, which is nice because jQuery is outdated and shouldn’t be used. I was really surprised it was included in BS4.

because the entire company is dated

I mean… yeah. It’s IBM, that’s what they are known for. lol But Bootstrap is not dated. If you want something a little more “modern” because you believe that Bootstrap is old or whatever (even though it isn’t, Bootstrap 4 is less than 6 months old as a full release and uses flexbox by default for its grid), then look at Bulma it’s the new trendy kid on the block right now.

edit:

As far as customizability goes. Open up any of the Spotify, mobile/desktop/web whatever. Click around a bit. Guess what that’s built off of? A heavily modified version of Bootstrap.

3 Likes
6

BootStrap CDN Source:

https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css

I just tried including the BootStrap.css from the above URL into a Google AmpProject and it failed validation.

Google Validation Errors:

The author stylesheet specified in tag ‘style amp-custom’ is too long - we saw 146,786 bytes whereas the limit is 50,000 bytes.

Implications:

This means although the web-page will still render it will not be given preference in mobile searches or have a free Google CDN cached version.

7

@John_Betong thankfully it’s Bootstrap with a huge community and people have created stripped down minified versions specifically for AMP. As long as you are using it correctly, things should still work with reduced styling.

2 Likes
8

Not necessarily true with Angular. Angular material is chosen UX library of google. There is a bootstrap alternative but angular material provides more robust, modern, accessible components that are under constant dev by the google overlords. I was recently on-boarded to a Angular project that uses bootstrap and that is not a decision I would have made. With Angular Material is the BEST way to go. I love Angular because unlike react ever project basically looks the same and Angular provides nearly everything you need out of the box to build large, complex web applications. I much prefer a opinionated, robust and “mature” framework like Angular for projects with ongoing development for team environments. With react projects one react project can be completely different then the next. I would say there is a much higher learning curve for on-boarding devs who know react to a react project then angular because all the application architecture decisions are left to the people who initially create the project where as with Angular a lot of architectural decisions have already been made for you and will be consistent between Angular projects. The only main differences I have seen having worked on five Angular codebases is organization and redux/immutability patterns. Other then those every Angular project tends to have the same foundation. With Angular to things just keeping better and better with every release. Next release 7 I believe they are completely replacing the compiler to be more performant and dev friendly.

1 Like
9

I’d say NO if:

  • you have a custom design that looks different to bootstrap (you will inevitably waste lots of time if you use it)
  • you want the site to look unique and stand out from the crowd, unlike like Joe’s just-across-the-road shoe shop bootstrap website.
10

I think it is critical that the framework be factored into design decisions. This can be done using a style guide. The company I currently work for has a style guide based on material. All design decisions should take into consideration Material design patterns. Using a style guide based on a known UX framework / patterns helps to put the devs and designers on the same page.

2 Likes
11

Using a style guide based on a known UX framework / patterns helps to put the devs and designers on the same page.

This is how we’ve always done it as well. Frameworks do put some limitations on the design, but it’s a small price to pay to save hundreds or thousands of developer hours.

Though, as someone who is very familiar with BS components, I don’t think Bootstrap designs look the same at all. I never really understood the argument by @Andres_Vaquero, but it’s one I hear often. They share some minor similarities, but not much.

12

You’re absolutely right and that’s the way you can save time and headaches. Unfortunately that’s not always the case. Also the question of whether to use it or not depends on quite a lot of different factors which are specific to the project, business needs, budget etc… As with any tool you have to use it for the right reasons.

I guess my point is that if the designs take priority and they are very different to Bootstrap it is probably not a wise idea to introduce it.

3 Likes
13

Hi @lindsaybeckworth, now how would you do this without code duplication either way? At the very least, you’d have to duplicate the table headers so you can display them in each card… which is not a problem at all if the markup is getting rendered from the data.

Anyway, challenge accepted… ;-)

BTW @coothead note that there is not a single (semantic or unsematic) class in the markup, and not a single (pointless or… meaningful?) div.

Anyway as for bootstrap in general, IYAM it often is severely misunderstood (and yes, sometimes also misused). What @mawburn said – it’s not supposed to be a ready-made solution, it’s a framework and supposed to be customised. It’s mostly about layout with a couple of sane defaults for your styles, and if you don’t like those you can easily override them via the corresponding variables.

Saying it’s unsemantic is like saying vuejs violates SoC (neither do you have to write those classes to the markup nor do you have to write single .vue files – but it can be convenient), saying it’s cluttered is like saying lodash is bloated (you don’t have to import everything), saying it’s limiting is like saying jQuery is limiting because it does no DOM diffing by itself.

4 Likes
14

Hi there m3g4p0p,

you have to bear in mind that I am a coder and, as such,
can code CSS, so I have no need or desire for “Bootstrap”.

The comments about “Bootstrap” in my post were, as indicated
just quotes from “Jason M. Knight”

I would suggest that you Contact Jason M. Knight, if you wish to
discuss his assertions more fully. :winky:

The main thrust of my post was actually this link…

“ad populum fallacy” :biggrin:

coothead

15

you have to bear in mind that I am a coder and, as such,
can code CSS, so I have no need or desire for “Bootstrap”.

This is actually often my argument for using Bootstrap. I am a coder, I don’t want to mess around with styling CSS and putting in tons of little hacks or adjustments to get things right on multiple devices and browsers, I just want to focus on the actual functional code, not the CSS. I have the ability to fix or override any thing I need to fix the styles because it’s just CSS. Styling things in CSS in ways that 90% of sites use anyway, is just a waste of developer time that can be better focused at writing code that works. It’s tedious and wasteful.

And if you add in Bootstrap to your build, they make it stupidly easy to configure, customize, and trim down to the things you need. Thanks to these 2 files:

For things like landing pages or sites with a couple pages, you probably shouldn’t be using something like Bootstrap. CSS is your main thing there and it should be small enough to be easily managed. But for applications with tons of moving pieces, it’s waste of time not to.

1 Like
16

Hi there mawburn,

Neither do I. :rofl:

I learned how to code HTML and CSS to help
others learn how to code HTM and CSS. :winky:

Now the current vogue is for frameworks.
WYSIWYG has been replaced by “WordPress” and “Bootstrap”.
I hated the former and I detest the latter.

My skills, for whatever their worth, are really no longer required.

The strange thing, though, is that the O.P. wanted…

“Help me convince co-workers why Bootstrap 4 is not the answer.”

…but the replies. contrarily, try to convince him/her that it is the answer. :eyebrows:

coothead

17

A site I work on regularly (not one I built):

Bootstrap CSS - minified 120kb
Custom CSS - minified 95kb (for stuff BS ca’t do)

Re-done keeping same design/layout etc using - 58kb not minified.

No brainer!

5 Likes
18

Well, I’m a developer and as such, have no desire to reinvent the wheel (and fix the same IE bugs) for every new project. I wouldn’t attempt to rewrite (say) react either just because I can write JS to a degree; if you got the time go ahead, but personally I do embrace open source solutions, and if it’s backed by a big company such as twitter or facebook, just the better.

Granted, for a great deal of projects react would be overkill, and so would bootstrap. It’s a matter of requirements and scale, and that’s a decision the developer has to make.

That is because those coworkers seem to know what they are doing AFAICT… ;-)

2 Likes
19

Perhaps a problem we have today is that there are too many of those open-source solutions and somehow not enough solution architects… which leads to tooling for the sake of tooling, fatigue, or choosing one tool over another not because of what the tool itself can do, but rather because of other more subjective reasoning… And then we can easily end up with bloated software which we no longer know what it does… and that affects maintainability and performance in a great way…

We have more tools than ever and the web is evolving faster than ever which means those tools are getting dated faster than ever as well. Personally if I wanted an application to last for a very long time I would be extremely careful and conservative of what tooling or frameworks to employ… Most web software companies are still trying to get rid of dinosaurs deeply ingrained in their projects…

And in this lovely mess of website industry this great quote always comes to mind:

I think there’s a huge collective anxiety – a sort of sunk-cost fallacy – at play with web developers. We invest deeply in some tool, and so we’re eager to justify, to ourselves and others, why the decision to use one tool over another was rational. I think this makes it hard to have a good dialog about how tools compare. Brian Ford – Angular Team

6 Likes
20

Excellent answer and I totally agree on all points.

My reluctance about using open-source solutions dates back to using Delphi One. Many Free libraries offered easy solutions but failed to update their scripts to Delphi Two. The solutions were to remain with Delphi One, find another comparable library or write equivalent functionality. The latter usually required an in-depth knowledge of the language which took a considerable learning time.

I have also found that it can be quite difficult to make small changes to scripts and annoying when the changes are lost during an update :slight_smile:

1 Like