Master everything from pattern libraries to the CSS Grid module with expert advice from Brad Frost.
Whether you work regularly with style guides or you're new to the party, web designer, writer and speaker Brad Frost has some pro advice for you.
Inside the latest issue of net magazine, a site layout special, Frost took time out of his busy schedule to answer a number of reader questions.
Here's a sneak peak at some of the expert advice Frost shared – you'll find the rest inside net issue 274, on sale now.
01. Grids and sub grids
Q: What effect does Brad think CSS Grids and Sub Grids will have on style sheets in the future? Nigel Clutterbuck, London, UK
Brad Frost: The ability to create a grid, drop components into that grid, and have everything Just Work is tremendously exciting. The CSS Grid module is still being developed (so far as I know), but the end goal also requires what's known as element/container queries.
Currently, we can only use the viewport to determine our components' breakpoints, but it would be fantastic if we could use components' parent containers to determine how they will display. Once that's reality, we can create patterns in the abstract and drop them in anywhere!
02. Pattern libraries
Q: A huge problem with pattern libraries is they're out of sync with the live code, especially (due to it's nature) the HTML.... How do you combat this? Jack Appleby, Brighton, UK
Brad Frost: Make a change to a pattern, and BOOM! Every instance of that pattern in production is automagically updated. This is indeed the Holy Grail, but as you mentioned is really hard to achieve.
The best way to get closer to the Holy Grail is to have the pattern library and CMS share the same templating language. Make the pattern library the focal point of your workflow, make changes there first, then use tools like Grunt to help move CSS, JS, and HTML patterns into the production environment.
03. Style guide rot
Q: What strategies do you recommend to avoid style guide rot once everything's live and in maintenance mode? David Moulton, Cambridge, UK
Brad Frost: In addition to trying to achieve the Holy Grail (mentioned before), there are many things that can be done to keep a pattern library effective in the long-term.
Make it a key part of your workflow rather than a passive artifact. Make it a resource all disciplines can benefit from, not just designers or developers. Make patterns agnostic for maximum reuse.
Make it contextual to demonstrate how/where patters get used. Make it beautiful and approachable. Make it easy to find and make it public if at all possible.
Words: Brad Frost
The full version of this article first appeared in net magazine issue 274, a site layout special. On sale now, it also comes with a free 30-day trial of Lynda.com
Julia is editor-in-chief, retail at Future Ltd, where she works in e-commerce across a number of consumer lifestyle brands. A former editor of design website Creative Bloq, she’s also worked on a variety of print titles, and was part of the team that launched consumer tech website TechRadar. She's been writing about art, design and technology for over 15 years.
