A Collection of Components.

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.

Finally, I began porting the design system one more time. This time, my plan was to completely remove Bootstrap entirely. My rationale was that, by removing Bootstrap and creating our own framework internally, we could speed up our applications by loading smaller CSS files and less javascript over all. And by building the entire thing with CSS Grid, we'd even reduce our HTML file size and make apps that much easier to build.