GDS 3.0 & Bootstrap

Jan Hruby, Design System Engineer

After more than 80 releases in GDS 2.0, it’s finally time to shake things up again and work towards the next major release! These usually include bigger structural changes and we’d like to give you a peek behind the curtain of what we’re planning.

The first focus of GDS 3.0 is to get rid of one of the biggest pieces of legacy in our design system. We’re getting rid of Bootstrap.

Motivation

First off, what’s Bootstrap? To put simply, it’s a CSS framework. You include it in your project and you get some base styles for your pages as well as some base components like cards or typography.

Bootstrap has been a part of GDS since the very beginning and it helped speed up the early stages of setting up our components. So why are we spending time removing it? Well, like money, Bootstrap is a good servant but a bad master. Its styles are very opinionated. This is fine if you want to quickly set a front end up for a project and be done with it. But we’re far from done with George, aren’t we?

Over time we’ve kept overriding more and more of Bootstrap’s styles with our own as the design kept evolving. Right now, we estimate we override more than 95% of Bootstrap’s styling, making its inclusion in the project completely unnecessary. It’s just dead weight that’s making GDS larger for our clients to download and making our lives more difficult when working with our components.

What you get out of it

You might be asking yourself, what’s in it for you and your project? Bootstrap’s removal is going to make GDS styles smaller, possibly by a noticeable margin. That means less data that needs to be downloaded by your users. And we like less data that needs to be downloaded.

But on top of it, this is going to make the GDS team’s lives so much easier. It’s become an unfortunate part of working on our styles that we need to put extra effort in fighting with Bootstrap’s styling. You might have seen the Family Guy blinds GIF. All this extra energy can go to making your GDS requests faster and more reliably.

What could go wrong?

Removing legacy code is complicated. There are many skeletons in many different closets that can poke out and cause trouble. That’s why we’re doing our best to carefully dissect each skeleton one by one, heavily relying on our visual testing framework. And when we’re done with it, we’re going to do a big test run using GDS’s biggest client—the George web app in a dedicated test environment.

While this is technically a breaking change, we’re doing everything we can not to break any of your projects.

What’s next?

We’re not done here, there are more projects being cooked that we’d like to introduce you in the second part of this miniseries. And if you have any question about GDS 3.0, feel free to reach out to #design-system-web in Slack!