The Winsupply Pattern Library is a collection of UI components used across all of the applications we are developing for desktop, tablet, phone, and even warehouse scan gun devices. We have developed three different versions of this design system - one for Bootstrap 3 applications, one for Bootstrap 4 applications, and one with an in-development in-house framework built with CSS Grid.
The Winsupply Design System contains most of the common, shared components we use across all of our applications and very much acts as a style guide as well. This includes things as small as typography choices and button styles to things as complex as cards and panels.
To build this, I began in Adobe Illustrator, creating a static, vector version of our design system at the time. After that, I recreated all of our components in Axure as a reusable and shareable widget library. Then, with Bootstrap 3, I created the first version of the design system, writing all of the HTML and SCSS myself.
Because some of our applications were already under development at the time I joined Winsupply, much of the design system had to be reverse engineered so we could create reusable components with a centralized CSS file that all of our apps could reference. We then hosted the design system on a company created CDN so that it was accessible company-wide.
Eventually, I ported the design system from Bootstrap 3 to Bootstrap 4. Most of our current apps are being built on Bootstrap 4, so we needed to be able to represent all of these components with that framework. The challenge behind this was that the underlying grid for Bootstrap changed from a float-based grid to a flexbox-based grid. Many naming conventions for classes changed as well.