Should You Use Bootstrap or Material Design for Your Design System?

Weighing the pros and cons of rolling your own design system.

Published on

Around 3 minutes to read

Bootstrap and Material Design are incredibly thorough systems, so it stands to reason that many of our clients ask whether or not it’s worth the effort to create a design system from scratch as opposed to using an already mature platform.

Here’s the answer we typically give:

We’ve found that teams tend to outgrow OPLs—Other People’s Libraries—at about the 3 year mark. (In this context, “outgrow” means you find yourself overriding or removing more of the library than actually using it.)

Let’s see how this works with a simple example. Say you wanted to showcase your headphone product in a card. Using Bootstrap out-of-the-box, you can use this HTML…

<div class="card" style="width: 18rem;">
  <img src="headphones.png" class="card-img-top" alt="Beats Solo(3) Wireless" />
  <div class="card-body">
    <h5 class="card-title">Beats Solo<sup>3</sup> Wireless</h5>
    <p class="card-text">$199.95</p>
    <a
      href="/products/headphones/beats-solo-3-wireless/"
      class="btn btn-primary"
      >Add to cart</a
    >
  </div>
</div>

…to create a card that looks like this:

Default Bootstrap card component

If you’re satisfied with that, great! Bootstrap is a good candidate to jumpstart your design system.

But your team might not be able to live with that, because you need or want your card to look more custom:

Custom-looking card component

Perhaps you’d like your brand typeface for the card heading, so you add a font-family: 'Graphik'; declaration to the card. You use an 8-point grid elsewhere, so you change all of your type sizes, padding, and margin to multiples of 8. And your house coding style is to use a BEM-like syntax, so you modify the markup from <div class="card"> to <div class="c-card">. And you don’t want your cards so contained, so you ditch the borders.

Just for those small amount of changes, we’ve had to touch all but 2 lines of our HTML…

- <div class="card" style="width: 18rem;">
+ <div class="c-card" style="width: 18rem;">
-    <img src="headphones.png" class="card-img-top" alt="Beats Solo(3) Wireless" />
+    <img src="headphones.png" class="c-card_img--top" alt="Beats Solo(3) Wireless" />
-    <div class="card-body">
+    <div class="c-card_body">
-        <h5 class="card-title">Beats Solo<sup>3</sup> Wireless</h5>
+        <h5 class="c-card_title">Beats Solo<sup>3</sup> Wireless</h5>
-            <p class="card-text">$199.95</p>
+            <p class="c-card_text">$199.95</p>
-            <a href="/products/headphones/beats-solo-3-wireless/" class="btn btn-primary">Add to cart</a>
+            <a href="/products/headphones/beats-solo-3-wireless/" class="c-btn c-btn--primary">Add to cart</a>
    </div>
  </div>

…and all of this CSS:

  html {
-   font-family: sans-serif;
+   font-family: 'Graphik', Helvetica, Arial, sans-serif;
  }

- .card {
+ .c-card {
-   border: 1px solid rgba(0, 0, 0, 0.125);
-   border-radius: 0.25rem;
  }

+ .c-card_image--top {
+   background: #deebf2;
+   border-radius: 8px;
+ }

- .card-body {
+ .c-card_body {
-    padding: 1.25rem;
+    padding: 1.25rem 0;
  }

- .card-title {
+ .c-card_title {
-    margin-bottom: 0.75rem;
  }

+ .c-card_text {
+    margin-bottom: 0;
+ }

- .btn {
+ .c-btn {
-    padding: 0.375rem 0.75rem;
  }

- .btn-primary {
+ .c-btn--primary {
-    color: #fff;
+    color: #198ec8;
  }

+ .c-btn--primary:before {
+    content: "+";
+    font-size: 1.5em;
+    margin-right: 0.3em;
+    position: relative;
+    top: 1px;
+ }

- .btn:hover {
+ .c-btn:hover {
-    color: #212529;
  }

- .btn-primary:hover {
+ .c-btn--primary:hover {
-    color: #fff;
+    color: #0056b3;
-    background-color: #0069d9;
-    border-color: #0062cc;
  }

And that’s all just for 1 component. Bootstrap has 24 components in it, so the lift to modify every component isn’t insignificant.

For all that effort, you might as well roll your own.

Further reading

Lee Nelson has written a counterpoint to this article.

Read Next

The Hot Potato Process