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-smallbecomes Small > 24em.
- Basic support provided for detecting whether
emvalue 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
.sassas well as
- Deal with other browser units of measure.
Brad's updated patternlab.bradfrostweb.com with my first release. So try it out!