A Maintainable Style Guide - Ian Feather
The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).
The Pattern Library
Literally a library of patterns: y’know, for tiling background images. Old school!
Practical ARIA Examples
Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.
Creating Style Guides · An A List Apart Article
A great article by Susan on getting started with creating a styleguide for any project.
I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.
A reusable set of responsive patterns and templates for UK councils.
being a client (tecznotes)
Mike writes about what it was like being a client for a change. After working with him on the Code for America project, I can personally vouch for him as a dream client:
Clearleft’s pattern deliverables are the special-special that made the final work so strong. Jon Aizlewood’s introduction to the concept convinced me to contact Clearleft. Jeremy Keith’s interest in design systems kicked off the process, and Anna Debenham’s fucking rock star delivery brought it all home.
Nice! A Yeoman generator for scaffolding your own pattern primer.
(Those are just words, aren’t they? Y’know, as opposed to a sentence that would actually make sense to most right-thinking people.)
Robin Rendle › A Visual Lexicon
Some great thoughts in here about web development workflow and communication between designers and developers.
I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.
Getting Started With Pattern Libraries ∙ An A List Apart Blog Post
A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.
A-mer-ica! Fuck yeah!
A List Apart Pattern Library
Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!
This is handy: a version of my pattern primer that can be run with Grunt.
Styleguide | MapBox
Hot on the heels of the Mailchimp styleguide, here’s the collection of patterns used by Mapbox. I’m not keen on some of their markup choices, but again, it’s great to see organisations publicly documenting this stuff.
Pattern Library | MailChimp
The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.
Human Interest by Trent Walton
Trent proposes a way to avoid implementing dark patterns: take a leaf from the progressive enhancement playbook and assume the worst conditions for your user’s context.
The slippery slope | 90 Percent Of Everything
The transcript of a terrific talk by Harry on how dark patterns are often driven by a slavish devotion to conversion rates.
Responsive Navigation: Examples of Navigation in Responsive Design
A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.
Style Guide Boilerplate
A very handy starting point for creating a front-end style guide.
On pattern portfolios | Clear Thinking - The Clearleft Blog
Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.
Barebones — An initial directory setup, style guide and pattern primer by Paul Lloyd
Here are some nice patterns that Paul uses for starting points in his own projects.
Base CSS | Pasteup | Guardian News
The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!
Photo Album - Imgur
At least one of these will probably drive you crazy.
Responsive Web Design Patterns | This Is Responsive
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
Complex Navigation Patterns for Responsive Design | Brad Frost Web
Another great in-depth round-up from Brad, this time looking at your options for complex navigation patterns in responsive designs.
Grids, Design Guidelines, Broken Rules, and the Streets of New York City (Global Moxie)
Josh writes about the importance of using rules and systems as tools without being bound by them.
LukeW | Off Canvas Multi-Device Layouts
Luke and Jason have put together some demos of various “off-canvas” navigation patterns for responsive designs.
Paul has open-sourced his front-end style guide and put it up on Github. It’s a very handy starting point for making your own.
Scalable Navigation Patterns in Responsive Web Design | Palantir.net
An case study that tackles complex navigation in a responsive site.
Cataloguing patterns (best practices, really) for privacy-concious site owners.
Style guide round-up
Anna goes through some of her favourite pattern libraries. It’s really, really great to see this stuff getting documented.
I met one of the guys from the Starbucks team at South by Southwest and he mentioned that they had a markup pattern library. I encouraged them to make it public, and it here it is!
I really hope that more companies and agencies will start sharing stuff like this.
Inspired by Luke’s documentation of layout patterns in responsive designs, Jason goes into more detail on the pattern of hiding navigation and extra content to the left and right of the viewport on small screens.
LukeW | Multi-Device Layout Patterns
Luke catalogues layout patterns in responsive designs.
Responsive Navigation Patterns | Brad Frost Web
Brad does a great job of rounding up various design patterns used for navigation in responsive sites.
A great pattern library from Dan.
Bootstrap is Twitter’s CSS and markup style guide—very similar to the pattern portfolios that we often provide as deliverables at Clearleft.
Quoting and citing with blockquote, q, cite, and the cite attribute | HTML5 Doctor
An excellent article from Oli on markup patterns for quotations …though I still think that the cite element can be used for people’s names.
txt2re: headache relief for programmers :: regular expression generator
I’m rubbish at regular expressions so this little tool might just save my skin someday.
Flyer beware; real cost of flying Ryanair « Alan Colville
Superb in-depth analysis of Ryanair’s website dark patterns and nasty brand strategy.
City Crawlers Berlin
This looks like it could be a good book: a collaborative project to find patterns and stories in the data of one city.
Oh, and the site is lovely and responsive.
Styleguides for the Web — Paul Robert Lloyd
Paul gives an excellent and thorough explanation of why systems thinking is important in web design.
Service Design Tools | Communication methods supporting design processes
A nice collection of design tools and methodologies.
We are Colorblind » Patterns for the Color Blind
A pattern library that considers colour blindness.
Pattern Tap : Interface Collection for Design Inspiration
Collections of visual design patterns from web interfaces.
The Art of Jim Denevan
The circlemakers work with vegetation. Andy Goldsworthy works with the landscape. Jim Denevan works with sand.
Fun (and Fraud Detection) with Benfordâ€™s Law | Data and the Web
Benford's law blows my mind. Be sure to watch the video. This is all related to network theory and power law distributions ...I'm just not sure how.
Looking Back: How Different Groups Voted
A really nice interactive infographic from the New York Times.