Everybody needs a design system. Its an easy way to keep yourself on brand and on track to finish any project. Reusable components for development and design can save you a lot of time when working on something new.
This project was started to create a unified and documented place for a team of 30 back-end developers to reference and use front-end components without having to code anything new from scratch.
Requirements
- Searchable
- Code Examples
- Design Examples
- Interactive Examples
Tools
- Jekyll Framework
- LiquidJS
- Lots of HTML
Step 1
Find the most familiar CSS library.
A poll showed that every developer on the team had experience with the Bootstrap Framework, with only a few being familiar with MaterialUI and Foundation. The next step was determining necessary browser support. This specific client needed to support Internet Explorer 11 so that meant going with Bootstrap 4, the highest version with support for IE. I poured one out for Bootstrap 5. Later it was discovered that their current site used a customized version of Bootstrap 2 so the learning curve wouldn't be too high going with Bootstrap 4.
Step 2
Clone the entire Bootstrap 4 documentation site.
The Bootstrap project keeps its entire documentation site hosted in Github so downloading a copy of that was straightforward. This would also jump us far ahead in the project since we wouldn't be coding each framework page from scratch. Bootstrap 4 runs on the Jekyll Framework which is one of the first Static Site Generators out there. One of the cons is its dependency on Ruby which can have some compatibility issues with Windows.
Now that the framework was downloaded, we set up a Ruby pipeline in Azure DevOps to process and output the files to a static Azure CDN for hosting.
Step 3
Implement the new design.
I typically don't use SASS unless I am on a substantially large project or working with a team who is all equally skilled in writing it, but for Bootstrap 4, it was necessary. It's a very large platform and since it was decoupled from their main project, SASS would be very effective at managing their style variables and mixins. Every component in the framework was touched to some degree, along with several custom components that compiled into a nice minified format to be hosted on Azure CDN.
I also included a design/development toggle that would hide the code examples and code-related verbiage, so designers could quickly jump to the part they needed.
Step 4
Toss that technical debt in the junk.
With the design system finished after three months, it was time to refactor their site. Over the course of the next three months, we were able to shed over 2mbs of CSS and JS combined. This not only sped up the site but it made it infinitely easier to update components across the site. If the brand changed direction on their colors, updating became a breeze.
If you think good design is expensive, you should look at the cost of bad design.
Finito! (The End)
Thanks for reading!