KSS on my list: building a living style guide and pattern library with KSS-Node - WPCampus 2021
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.
You can learn more about this session on the WPCampus 2021 Online website: https://2021.wpcampus.org/schedule/ks...
Presenter:
Reed Piernock
What is WPCampus?
WPCampus 2021 Online was the ninth conference for the WPCampus community, a gathering of web professionals, educators and people dedicated to the confluence of WordPress in higher education. The event took place online on September 21-22, 2021. Learn more about the event at https://2021.wpcampus.org.