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

General lecture


A few years ago, the Georgetown CMS switched to a WordPress system, and since then we've learned quite a few things about custom themes and custom Gutenberg blocks. With branding guidelines, accessibility, 300+ 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. A working knowledge of WordPress themes and Gutenberg blocks is recommended.

Although this case study presents techniques using npm, KSS-Node, gulp, Sass, and Twig, this method can be easily adapted to other tools and languages.

Session topics



  • Reed Piernock

    Senior Web Front-end Developer, Georgetown University

    I'm a front-end dev who will happily spend all day engrossed in a bunch of .scss files, and also a grad student focused on the intersection of culture and technology. I'm a stickler about code standards and a major advocate for accessibility. I drink coffee while I code, I knit...