Atomic design principles in WordPress themes (Intermediate)

If you spend your days designing and developing WordPress themes, you probably find yourself building the same elements over and over. Preprocessors like Sass and Less can speed things up inside a given site, but still – every site needs menus, buttons, headers, footers, form elements … you get the idea.

Well. What if you could craft your HTML and CSS (and your preprocessor variables, mixins and so on) into isolated patterns that:

  • live at a single URL, so you can share it with whoever needs access, no matter where they are in the world;
  • you can use over and over again, in project after project?
  • yet still rewrite and restyle as a system, such that every single implementation can look wildly different?

That’s the essence of atomic design.

If you’re like me, you’ll discover the pattern libraries you build with atomic design give you a common starting point for new projects and a consistent process for your design system. The libraries themselves are simple to maintain, simple to expand.

And once you’re up and running, you can also use the WordPress template functions to organize your theme files the same way you’ve organized your pattern library.

Presentation slides can be found on the speaker’s Speaker Deck.

Speaker