Introducing Drizzle

Written by Tyler Sticka on

It’s hard to believe it’s been over three years since Dave Rupert wrote Responsive Deliverables, challenging the rest of us to start making “tiny bootstraps, for every client.” It’s been almost as long since Brad Frost and Dave Olsen created Pattern Lab, the first tool for building atomic design systems in the browser.

In true Portland hipster fashion, we at Cloud Four were designing in-browser before it was cool. This made the transition from page-level mockups to holistic design systems welcome and natural. It solved a lot of problems for us and (more importantly) our clients.

But presenting these deliverables could still be challenging. Some projects emphasized UX prototyping, others production-ready patterns. Some incorporated additional resources like element collages, project timelines or JavaScript documentation.

Because of this variety, we switched between a few different tools frequently. Our favorites were Pattern Lab (for its emphasis of atomic design principles) and Fabricator (for its speed and customization), but sometimes our needs were just too idiosyncratic for anything but a custom solution.

Which is why we decided to make Drizzle.

Drizzle logo

Drizzle is Cloud Four’s tool for generating pattern libraries and style guides. It started as a fork of Fabricator, incorporating features based on our team’s recent project needs and other style guides we admired. It uses Node, Gulp and Handlebars to generate static HTML you can host anywhere. Out of the box, it includes our Gulp tasks and Handlebars helpers to make prototyping and pattern-building fast and fun.

Screenshot of a Drizzle style guide page

Here’s what a brand-new Drizzle project looks like. We’re also using Drizzle for the Cloud Four redesign, as well as client work we aren’t able to share quite yet.

Drizzle is still a work in progress (as our issue queue will attest), but we’ve really enjoyed using it so far. Some of our favorite features:

  • The style guide UI is straightforward and easy to tweak.
  • Patterns, pages and layout templates can be reused and extended.
  • Control meta data, visibility and sorting via front matter.
  • Write patterns or pages in Handlebars or Markdown.
  • The template helpers are easy to extend, with a lot of really nice prototyping shortcuts out of the box. Dummy images, placeholder content, inline SVG and more are a snap.
  • The project uses PostCSS by default. Even if you need to add a heavier processor, Drizzle’s styles won’t slow you down.

If any of that sounds like your cup of tea, you can check out the Drizzle alpha now on GitHub.

Tyler Sticka

Tyler Sticka is Cloud Four's VP of Design, allowing him to think about responsive design patterns every day. When he isn’t sketching on sticky notes, experimenting with SVG or nitpicking design details with his coworkers, he enjoys reading comics, making video games and listening to weird music. He tweets as @tylersticka.

Never miss an article!

Get Weekly Digests


Comments

The ‘e’ in Drizzle is cut off in the svg. You might want to change the viewBox to “0 0 231 60” for the whole text to appear. Or you could add overflow:hidden; to the SVG’s style.

Nice. Congrats! Thanks for sharing.

Do you think you could get into a bit more about why you forked, as well as how thinks went once you pulled thay trigger. I think in understanding that process we can better understand the product/tool.

Don’t get me wrong. It sounds impressive. It’s just not clear (to me) why you tool over another. What’s are my pains that you’re going to cure?

p.s. it’s a work in progress. I get that 🙂 but sharing the process might benefit some as much as sharing the product.

Again, kudos. Pop the champagne!

MF Simchock

Replies

Thanks for the feedback. We decided to fork in order to get the features summarized in the bulleted list near the bottom of the post (plus more in progress). We realized at a certain point that we’d rewritten most of the original project’s source, which was when we decided to go our own way.

We still think Pattern Lab and Fabricator are great tools. It was a combination of client needs (UI, organization, documentation) and team needs (prototyping helpers, data structure) that informed our changes.

Been trying out Fabricator and liked most of its features, but it lacked some flexibility when it came to organizing our components.

Drizzle looked really promising in that regard, but unfortunately the build fails on Windows (10). Any info on that?


Let’s discuss your project! Email Us