old-school 90s animated gif

Pardon my dust! I just migrated my website to the fantastic Eleventy and am recording the redesign process of adopting my design system for our AI & Design Systems course.

Brad Frost
Keeping Pattern Libraries in Sync
Keeping Pattern Libraries in Sync

Marcelo Somers responded to my style guide best practices post with some thoughts on how to keep pattern library and production CSS/JS in sync. There's some great stuff in there, however I've found the CSS and JS aren't the difficult things to keep in sync. From my post:

CSS and JS can be easily migrated from one place to another, but pattern markup is where things can get challenging.

There are a few things that make it challenging to keep markup in sync. Templating languages can differ between the style guide and production environment, and CMS-specific logic can throw monkey wrenches into pattern markup. I've had a few people show me how they keep their style guide and production markup in sync, but unfortunately these solutions are difficult to scale. I think Pattern Lab can help make this easier, and Dave is working on a new version that lets people use different templating engines in the hopes that markup patterns can be injected into production environments. I'm looking forward to working with people to make this a (scalable) reality. *[DETAILS]: Device, Environment, Time, Activity, Individual, Location, Social *[RESS]: Responsive Design with Server-Side Components

Brad Frost Hey there! Brad Frost brad@bradfrost.com

I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA.

Check out my courses AI & Design Systems course Atomic Design Certification Course Subatomic: The Complete Guide to Design Tokens course Get my newsletter

I like connecting with people directly without algorithms and machines getting in the way, and my newsletter helps me do that. Subscribe to get my latest thinking and interesting links about design, technology, music, art, creativity, and some random fun along the way.

Around the web