Phases and Atomic Design: Phase one

As a follow up to my recent post on Phases (and Mesophases) - a possible addendum to Atomic Design I recently released the first addition to Brad Frost's Pattern Lab to allow quick switching between defined breakpoints.

The first release includes:

  • Basic feature to traverse /css/scss folder structure and find Sass variables prefixed $bp-, then render as a 'Phases' tab in the menu bar, using remainder of variable name and value for control e.g. $bp-small becomes Small > 24em.
  • Basic support provided for detecting whether px or em value has been specified.


  • Provide configuration to allow user to set pattern to match variable name on.
  • Possibly order the options based on size rather than order of declaration.
  • Confirm this works with .sass as well as .scss.
  • Deal with other browser units of measure.


Brad's updated with my first release. So try it out!

Update #2

Dave Olsen has given Pattern Lab an overhaul and a new version of 'Phases' is waiting in the wings. Check it out on GitHub.