Posts Tagged ‘pattern lab’

Like atomic design? Like Pattern Lab? Or even just like chemistry? You can order an atom t-shirt from Cotton Bureau. Thanks Brian for making this happen! 

I had a great time at Smashing Conf San Francisco, where my session involved live-coding a design system on stage. It was the first time I’ve ever live-coded on stage before and was terribly nervous about the whole thing. Thankfully, […]

As part of Dan and my designer+developer collaboration series, I recorded another video building upon the work we’ve done so far. If you’re not caught up, feel free to watch the other videos: Video 1: Designer+Developer pair session Video 2: […]

I’ve had the extreme privilege of collaborating on a bunch of projects with my friend Dan Mall (@danmall) over the last five and a half years. Dan is a designer. I’m a developer. And together, we’ve been refining our process to […]

I’m excited to share an online course called Working With Atomic Design and Pattern Lab for Gymnasium. Here’s what the course covers: This course will teach students the atomic design methodology, setting up Pattern Lab, building & using UI components […]

Pattern Lab is an open-source tool for building UI design systems. I’ve been using it to build production-ready frontend code for the last four and a half years, and I’m watched it grow from humble beginnings into powerful software that […]

My wife is a jewelry designer. She has a workshop where she spends much of her time hammering, soldering, tinkering, shaping, sawing, buffing, polishing, experimenting, and iterating in order to produce gorgeous designs from a slew of shiny metal materials. Her […]

This is fun. I’m a big fan of designing for dynamic content, which is why template and page stages of the atomic design methodology are two separate things. It’s critical to address best case scenarios, worst case scenarios, and everything in between. That’s […]

Brian walks Chris through Pattern Lab, including how to get it up and running, make changes to patterns, etc. Great stuff!

Dan Mall posted an absolutely epic article that encapsulates a lot of the pattern-based concepts the community has been advancing for the last few years. I highly recommend reading it in its entirety. Here are some key highlights I took away […]

Brian Muenzenmeyer (@bmuenzenmeyer) appeared on the MS Dev Show to talk about Pattern Lab Node and his involvement with the project. He does a great job explaining atomic design, defining the Pattern Lab project, and explaining its benefits to the hosts. […]

Brian Muenzenmeyer (@bmuenzenmeyer) has done a fantastic job of bringing Pattern Lab Node to life, and it’s now officially in 1.0 status. Brian wrote about what’s changed, and I’m exciting to see things moving forward! Speaking of moving forward, Dave Olsen is working […]

Pam Griffith created a script to migrate patterns from inside of Pattern Lab into a CMS. She wrote a post explaining a bit more about the project: So I’ve been playing with making a conversion script that takes the patterns from […]

It’s really cool to see Los Angeles using Pattern Lab to make and maintain their website’s style guide.

Andrew Smyk (@andrewsmyk) discusses how he iterates on his web designs. There’s a strong focus on getting ideas out of his head and onto paper as quickly as possible, which is excellent. I enjoy how he cuts up his sketches to play with […]

I recently spoke at An Event Apart in San Diego where I presented on the whys, whats and how’s of style guides. Here are the slides: And here are some resources I reference in the talk:   Style Guide Types […]

If you’re into Drupal and interested in Pattern Lab, this session at DrupalCon in Los Angeles looks like it fits the bill!

Dave Olsen (@dmolsen), the beloved developer of the Pattern Lab project, gave a great presentation about why Pattern Lab matters and what it can do.

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 […]

The team who redesigned the University of Dammam website used Pattern Lab to construct the front-end and to use it as a living style guide for the site. More from the article: An important deliverable for this project was a […]

It’s so wonderful to see teams using Pattern Lab to launch successful projects. In fact, it makes me a little teary-eyed. In this case, the Harvard Business Review team used Pattern Lab to create an interface design system for their […]

It’s becoming increasingly necessary to be consistent and cohesive across an ever-growing number of media channels. As it turns out, that’s no easy task. That’s why organizations, companies, and brands are turning to style guides to establish sound footing in […]

So this is hilarious. The Chicago Sun-Times website went live with placeholder content. Not just any placeholder content, but my placeholder content! I’ve been using the grayscale images for years now (on This Is Responsive pattern demos), but added the […]

Dave Olsen (@dmolsen) nails it. In his talk at Confab EDU, Dave addresses the frustrations of our web design and development process, and how a pattern-driven workflow can help. Dave describes the many benefits of pattern-driven workflow: Patterns encourage communication […]

My amazing wife Melissa (@minifrost) has launched a new jewelry studio called Frost Finery. For the last few months she’s been hard at work sawing, soldering, laser cutting, water jetting, buffing, stone setting, welding, centrifuging, hammering, and filing. The result […]

Berit Hlubek gave a great presentation (slides here) overviewing atomic design and Pattern Lab.

Berit Hlubek created a fantastic deck about atomic design, Pattern Lab, and how to apply it to a real-world project. It’s so great to see other people successfully using atomic design principles to create great work. Very inspiring.

A lot of visual designers I’ve worked with have convinced themselves every user’s name is “Sara” without an “h”. For most of my career I’ve had to battle designers creating incredibly unrealistic best-case scenario mock-ups. You know what I’m talking […]

Grunt is a powerful Javascript task runner that can make your web design workflow much more efficient by automating a slew of tedious tasks. Pattern Lab is a tool created by Dave Olsen and myself to help you efficiently create […]

Here’s the video of my talk on Atomic Design at InControl Orlando 2014.