More on Bootstrap for Your Design System

More on Bootstrap for Your Design System

More on Bootstrap for Your Design System

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

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

November 25, 2019

November 25, 2019

Get weekly design system tips and tricks, directly to your inbox.

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:

  • Does your team have the required skills (Engineering, Design QA, product management, design system evangelists, etc)?

  • What are the consequences if somebody leaves the company?

  • Is design/UI a value proposition for your company?

  • Is your design system a recruiting tactic?

  • Do you have budget to hire resources?

  • Is there room in the roadmap to actually commit to a design system?

  • Are you using any unique technologies that require you to roll your own system?

  • Are you reinventing the wheel or truly doing something different?

Related Courses

Related Courses

Related Courses

Intermediate–Advanced

$3,999

A 90-day program to get an adopted design system up and running by the end of the year.

Intermediate–Advanced

$3,999

A 90-day program to get an adopted design system up and running by the end of the year.

Intermediate–Advanced

$3,999

A 90-day program to get an adopted design system up and running by the end of the year.

Beginner

Free

Watch DSU founder Dan Mall create a design in Figma from start to finish using an existing design system.

Beginner

Free

Watch DSU founder Dan Mall create a design in Figma from start to finish using an existing design system.

Beginner

Free

Watch DSU founder Dan Mall create a design in Figma from start to finish using an existing design system.

Intermediate

$149

$101

A hands-on, 72-module, 10+ hour course that gets you started on everything you need to know to get a design system’s design and code up and running.

Design System University is content & curriculum to help you design at scale.

Subscribe for the latest content about design systems:

© 2023–2024 Design System University. All rights reserved.

Design System University is content & curriculum to help you design at scale.

Subscribe for the latest content about design systems:

© 2023–2024 Design System University. All rights reserved.

Design System University is content & curriculum to help you design at scale.

Subscribe for the latest content about design systems:

© 2023–2024 Design System University. All rights reserved.

Design System University is content & curriculum to help you design at scale.

Subscribe for the latest content about design systems:

© 2023–2024 Design System University. All rights reserved.