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
pxoremvalue has been specified.
To-do:
- 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.scss. - Deal with other browser units of measure.
Update
Brad's updated patternlab.bradfrostweb.com 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.
