Monday, October 10, 2022, 8:30 AM - 9:15 AM CDT
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.
