KSS on my list: building a living style guide and pattern library with KSS-Node

A couple years ago, the web services team at Georgetown added new themes to our WordPress system, and since then we’ve learned quite a few things about custom themes and custom Gutenberg blocks. With branding guidelines, accessibility, nearly 400 websites and even more editors, the goal with our latest update was to create an editor and a front-end that could be one of the best things in life.

Enter KSS-Node! This npm package automatically produces a living style guide using comments from CSS and examples in HTML. Our dev team took this even further, creating a system that integrates component patterns written in a library into both custom blocks and custom themes, allowing us to update front-end code in just one place, keeping everything consistent across multiple repositories.

At the end of this session, attendees will have the tools necessary to build their own living style guides and pattern libraries, and integrate them into their own custom blocks and themes. Working knowledge of HTML, CSS and npm is recommended, as we’ll use these tools to build out our pattern library. While our case study uses WordPress as our main CMS, the techniques of integrating a pattern library can also be applied to other CMS templating systems. Further, although this method uses npm, KSS-Node, gulp, Sass and Twig, these can be adapted to other tools and languages.

Presenter

Reed Piernock — Georgetown University

Log in

Please log in to access the recording, slides and other session materials. Paid members have full access to the entire library.

Forgot your password?

New members

HighEdWeb offers several membership classes. Join today as a premium, affiliate, student or institutional member for full access to this session. Become a paid member.

Shortcode

DPC1

Tags