Whether you work regularly with style guides or you're new to the party, web designer, writer and speaker Brad Frost (opens in new tab) 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 (opens in new tab).
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 (opens in new tab), a site layout special. On sale now, it also comes with a free 30-day trial of Lynda.com
- Liked this? Read these...
- Create the perfect layout (opens in new tab) with the new issue of net
- 9 things you can do today to make your site load faster (opens in new tab)
- How to start a blog
