Living Styleguide

KSS-Node, Visual Design, Less
Goal:
When I joined, StudyBlue's stylings were fairly inconsistent. Different designers and engineers had built buttons, for example, in many different shapes, sizes, and colors. StudyBlue asked me to create a living, online styleguide offering design guidelines that could promote design consistency and increase the speed of both the design and the development process.

I started this process by researching which styleguide framework would work best for our current team and tech stack. I researched different options between static and living styleguides using tools such as Frontify, Pears, SourceJS, KSS-node, and a gem. I then gathered this research and presented it to my teammates. We decided KSS-node was the best fit for our tech stack at the time.

After we had finalized our framework, I worked with our Product and Design team to decide which design elements we should work on standardizing first.

Our lead UI designer then created a master Sketch file to outline what he wanted our elements to look like. I translated these design requirements into CSS expressions contained in global LESS mixins. Other developers could then use these standardized styles by simply adding a class name to the HTML template.

Since adding new class names to templates could potentially cause confusion, I also worked with the rest of our Frontend team to develop a new standard for class names. I researched different recommended models in the field and created one similar to the BEM model. An example of a class name for a subelement would be something like "pricing-tile__features-list." And to make sure changes to these class names didn't disrupt any functionalities associated with that element through jQuery, we began adding classes starting with a "js-" to represent any elements selected with jQuery to further separate design and functionality.

Finally I built styleguide pages to demonstrate these new standardized styles to developers and designers alike with the help of KSS-node. Using it's specialized templating language, I built pages offering descriptions, use cases, visual examples, and HTML examples of the newly standardized elements. Developers could then simply copy the HTML to create a new instance of the style and designers could copy the style while designing new features.

Reflection:
From this experience building the StudyBlue styleguide, I've learned that teamwork and process are essential components of building a useful styleguide. It's important to keep all members of the team, including both designers and engineers, involved and informed about the styleguide process so that they keep it in mind in their work. It's much easier to maintain and build styleguide standards when there's buy in from the whole team rather than having a single person advocating for the work. In addition, it's understandably easier for styleguide work to be considered a lower priority in the grand scheme of a company's work, so it's essential to find a way to integrate the styleguide work throughout the entire design and development process. I plan to keep these principles in mind as I continue to work on developing styleguides.