More on Bootstrap for Your Design System

A counterpoint to “Should You Use Bootstrap or Material Design for Your Design System?”.

By Lee Nelson — 25 November 2019 at 09:17:03 pm

As much as I agree with the succinct nature of the previous article, I’m not convinced that a big decision such as this can be summarized with such few points. Let me share some thoughts…

First off, I think Bootstrap has gotten a lot better at lending itself to custom branding over the years. There was a point in time when Bootstrap was riddled with CSS gradients and overriding them was a major pain in the ass; not to mention, your dev tools would resemble some sort of infinite scrolling hell. While Dan chose to illustrate updating the CSS markup in his example, you could also achieve similar results by just changing the variables inside of your Bootstrap _variables.scss file.

$card-cap-bg: rgba($black, 0.03) !default;
$card-cap-color: null !default;
$card-color: null !default;
$card-bg: $white !default;

Perhaps this suggestion wasn’t surfaced because of the decision to switch to a BEM code convention. While I agree that code conventions are a very good reason for choosing to roll your own Design System, I think the bigger underlying motivation is familiarity, which in a large part can be driven by ego. Let’s face it: as engineers and designers, the majority of us all want to build something that is our own and when you build something that is your own, you're not only motivated and proud but you also know the ins-and-outs of the system. From a management perspective, there's a big employee satisfaction aspect to rolling your own system. This is one of the big reasons why I think people don't like inheriting somebody else's system.

Additionally, at some point you are probably going to rely on a third party component that doesn't follow the same naming conventions as your own system. And let it be known: enforcing naming conventions such as BEM is not easy. The majority of front-end developers are not deeply invested in Design Systems such as this community. Another thing to consider is the simplicity of the Card example. Once you add in JavaScript and start talking about certain edge cases and supporting different browsers, the cost to benefit ratio of rolling your own components drastically changes.

Lee, stop playing devil’s advocate and get to the point…

The reason I chose to chime in is not because I disagree with points Dan made. I’m just not convinced that a decision such as this can be summed up in such few words. Here is a list of other aspects that might come into play when choosing how to get started: