Tags: style

Style Guides, Pattern Libraries, Design Systems and other amenities. // Speaker Deck

This slide deck is a whistle-stop tour of all things styleguide and pattern-library related. Nice to see Charlotte’s excellent exercise get a shout-out.

Create awesome styles- Nucleus - Living style guide generator

Another style guide generator that parses comments in CSS.

Join Fractal on Slack!

If you’re planning on giving Fractal a test drive, jump into this Slack channel. Mark and others will be able to help you out with any questions that aren’t covered in the docs.

Fractal v1.0 | Clearleft

Mark sets the scene for Fractal, the fantastic tool he’s built for generating pattern libraries.

This 1.0 release is just a start; it hopefully provides a solid foundation on which we (and anyone else who wants to contribute) can build and expand on in the future.

Exciting!

Fractal Documentation

This is the tool that we use at Clearleft to generate pattern libraries. It’s pretty damn cool. Mark built it. It’s pretty damn cool.

Design Systems

A newsletter dedicated to all things related to design systems, style guides, and pattern libraries.

Snyk’s Style Guide

…and Anna describes the process of creating the Snyk style guide.

Creating a Bocoup style guide - Bocoup

Susan describes the process behind creating Bocoup’s style guide…

CSS Diner - Where we feast on CSS Selectors!

Here’s a fun game to help practice those CSS selectors.

CSS Containment Module Level 3

A way of declaring the scope of an element’s layout and paint styles, which browsers can then use as a hint to optimise performance. It’s already shipping in Chrome and Opera.

The Languages Which Almost Were CSS - Eager Blog

A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!

marmelab/universal.css: The only CSS you will ever need

Ensure that your class names never go out of sync with your style declarations with this one simple trick:

Take any CSS rule you want to apply, replace : by -, and dots by -dot-, and you get the name of the corresponding universal css classname.

The only thing missing is immutability, so I would suggest also putting !important after each declaration in the CSS. Voila! No more specificity battles.

BBC Blogs - Internet Blog - BBC UX&D on creating a GEL foundation for everyone

Al runs through the process of updating GEL—the BBC’s Global Experience Language design system. I particularly like the thought that’s gone into naming type sizes.

FamilySearch Style Guide

A straightforward little pattern library. There’s also the story of making it a living style guide.

Clarity 2016 Wrapup by Chris Coyier on CodePen

As well as compèring the event, Chris took the time to make notes at the Clarity conference, dedicated to all things patterny.

Clarity Conf: Brad Frost

I wish I could’ve made it to the Clarity conference—I had a Salter Cane gig to play—but luckily for me, Brad took lots of notes.

Front-End Style-Guides: Definition, Requirements, Component Checklist

You know that front-end pattern libraries have hit the mainstream when the Nielsen Norman Group get in on the action.

As ever, I’m not sure their sweeping generalisations can be applied to every project, but their checklist approach makes for a good starting point.

ECSS

Enduring CSS (not int the sense of “put up with” but in the sense of “long-lasting”) is a new book by Ben Frain all about writing and maintaining modular reusable CSS.

You can read the whole thing for free online or buy an eBook.

Jon Aizlewood | Visual inventories for agile design

Jon outlines his technique for keeping “the 30,000 foot” view when patterns are coalescing during a project.

See also: Andy P.’s experience of working with Jon this way.

Walmart Web Style Guide

A pattern library of Walmart’s front-end code.

How to lint your Sass/CSS properly with Stylelint — Creative Nightly

Linting CSS seems like a very good idea, especially if you’re not the only one writing the CSS. This guide is going to come in very handy when I give it a try.

Battling BEM – 5 common problems and how to avoid them

We tend to use a variant of BEM in our CSS at Clearleft. Glad to see that when we’ve hit these issues, we’ve taken the same approach.

WTF is Solid?- Solid

The new style guide and pattern library for Buzzfeed.

It all looks pretty reasonable on the surface but if you poke around in the CSS, you’ll find 1157 uses of !important. Yikes!

The whole point of having an agreed-upon codebase in a pattern library is so that developers need never reach for nuclear options like !important, so I’m afraid, for me, this is a demonstration of what not to do (in terms of CSS—the output of the HTML in the styleguide looks perfectly fine).

Solid uses immutable, atomic CSS classes…

CSS is “mutable”. By design. I don’t think we should be working against that.

jonathantneal/mdcss

A tool for generating a pattern library from Markdown comments in CSS. This isn’t the way that I tend to work, but I can see how it would be quite handy.

NC.gov Styleguide

The comprehensive style guide and pattern library for North Carolina.

Patterns & Modules: The Toast — 2015 Redesign

I really like the way that you can literally flip between the source code and the output in this styleguide for The Toast.

18F — Introducing the U.S. Web Design Standards

The story behind the newly-released pattern library for the US government.

Lightning Design System

A nice combination of style guide and pattern library, with plenty of documentation.

The Language of Modular Design · An A List Apart Article

Alla has taken the ideas she presented in her superb talk at Responsive Day Out and published them as a great article in A List Apart.

Styleguide

Huge have released their tool for generating front-end style guides.

The Ushahidi Platform ~ Pattern Library

A really nicely-documented pattern library.

Style Guides with Jeremy Keith

I had a lot of fun chatting with Brad and Anna for the final episode of their small batch podcast on style guides and pattern libraries.

keyboard (div) ✿ dabblet.com

Here’s a really nifty use of the :checked behaviour pattern that Charlotte has been writing about—an interface for choosing a note from a piano keyboard. Under the hood, it’s a series of radio buttons and labels.

Purple: A UI kit for Heroku’s web interfaces

Hot on the heels of Github’s pattern library, here’s Heroku’s.

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

Writing for everyone.

Slides of really great practical advice on writing clearly.

What we would change about Rizzo - Ian Feather

I really like the self-examination that Ian and his team at Lonely Planet are doing here. Instead of creating a framework for creating a living style guide and calling it done, they’re constantly looking at what could be done better, and revisiting earlier decisions.

I’m intrigued by the way they’ve decided to reorganise their files by component rather than by filetype.

Atomic Design by Brad Frost

Brad’s writing a book.

Insert take-my-money.gif here.

Sass Guidelines

Advice for writing Sass. I don’t necessarily agree with everything, but on the whole, this is a solid approach.

It’s worth bearing Chris’s advice in mind.

Poor Man’s Styleguide | A frontend styleguide for the pragmatic

A handy starting point for creating a front-end styleguide: a single document of HTML elements.

Style Guide Resources

A very handy collection from Anna: articles, books, talks, podcasts, and examples of front-end style guides. If something’s missing, feel free to add it.

Cursors

A self-describing list of cursors available through CSS.

Code for America — Responsive Web Design on Huffduffer

This was a fun podcast—myself and Cyd from Code For America talk to Karen and Ethan about how we worked together. Good times.

The audio is available for your huffduffing pleasure.

A Single Div

Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.

A device agnostic approach to inlining CSS | Blog | Decade City

I very much agree with Orde’s framing here: I don’t think it makes much sense to talk about “above the fold” CSS …but it makes a lot of sense to talk about critical CSS.

And, yeah, it’s another example of progressive enhancement.

Heydon Pickering | Effortless Style | CSS Day on Vimeo

Remember when I was talking about refactoring the markup for Code for America? Well, it turns out that Heydon Pickering is way ahead of me.

He talks about the viewpoint of a writer (named Victoria) who wants to be able to write in Markdown, or HTML, or a textarea, without having to add classes to everything. That’s going to mean more complex CSS, but it turns out that you can do a lot of complex things in CSS without using class selectors.

There are slides.

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).

And They All Look Just the Same

Greg isn’t just lamenting a perceived “sameness” in web design here. He’s taking a long-zoom view and pointing out that there’s always a sameness …and you can choose to go along with it or you can choose to differentiate.

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.

Hemingway

A useful text editor that analyses your writing for excess verbiage and sloppy construction. It helps you process your words, as it were.

Council Toolkit

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.

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!

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.

Thoreau 2.0 - XOXO Conference Talk

Maciej’s talk from this year’s XOXO—excellent stuff!

Style Guide Boilerplate

A very handy starting point for creating a front-end style guide.

Request Quest

A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.

I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.

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.

On layout and web performance by Kelly Norton

This is handy: a look at which DOM properties and methods cause layout thrashing (reflows).

Base CSS | Pasteup | Guardian News

The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!

If Hemingway wrote JavaScript by fat xxx

This is a rather lovely way to show that in JavaScript, as in Perl, there’s always more than one way to skin a cat (in whatever idiom you prefer).

Classes? Where We’re Going, We Don’t Need Classes! | Smashing Coding

This is a well-reasoned, thoughtful article on avoiding class names in CSS …but I don’t agree with it. That said, perhaps there’s a reasonable middle ground to be found between this extreme stance and the opposite (but in some ways just as extreme) stance of OOCSS.

Single-direction margin declarations — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts

Some smart thinking from Harry Roberts on standardising the direction of your margins in CSS i.e. all top-margin or all bottom-margin declarations.

necolas/idiomatic-css

Some sensible ideas about having a consistent CSS writing style.

paulrobertlloyd/barebones

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.

A List Apart: Articles: Style Tiles and How They Work

Samantha does an excellent job of explaining how useful style tiles can be for visual design and iteration.

Style guide round-up

Anna goes through some of her favourite pattern libraries. It’s really, really great to see this stuff getting documented.

Style Guide

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.

Style Tiles

Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.

Abstract Sequential - Print Styles Are Responsive Design

An excellent piece by Stephanie on how to approach print stylesheets. I’ve always maintained that Print First can be as valid as Mobile First in getting you to focus on what content really matters.

Structuring a Responsive Stylesheet | Sparkbox

Some thoughts on structuring your CSS for responsive designs.

What’s slated for CSS4 Selectors? - destroy/dstorey

David gives a quick rundown of some of the selectors we can expect to see in CSS4.

CSS3 Secrets 10 things you might not know about CSS3

This presentation from Lea contains some CSS gems (and it’s all delivered in HTML).

agile approach | The Anatomy of a Design Decision: Examiner’s 2012 Campaign Site

Samantha gives the rundown of a hands-on use of Style Tiles.

Twitter Bootstrap

Bootstrap is Twitter’s CSS and markup style guide—very similar to the pattern portfolios that we often provide as deliverables at Clearleft.

The Elements of Fucking Style

Use strong, definite language in your writing. Make that sentence your bitch.

Layer Styles

A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.

Samantha Warren’s Web Design Blog | Design ~ Web Typography ~ Inspiration

An excellent design technique from Samantha that allows you to nail down a visual vocabulary without using something as wishy-washy as a mood board or as rigid as a fully-blown comp. Brilliant!

The style tile is not a literal translation of what the website is going to be, but a starting point for the designer and the client to have a conversation and establish a common visual language.

GELLED!

Paul has created a site for tracking usage of the BBC’s GEL (Global Experience Language) visual design language. Nice’n’responsive it is too.

Styleguides for the Web — Paul Robert Lloyd

Paul gives an excellent and thorough explanation of why systems thinking is important in web design.

Plugging the CSS History Leak at Mozilla Security Blog

Mozilla aims to plug the :visited/getComputedStyle bug/feature.

PrimerCSS

This is an interesting idea: paste in some markup and this will automatically generate CSS selectors based on your classes and IDs.

printFancy, a gallery of websites in print

A CSS gallery with a difference. This one highlights sites with good print stylesheets.

ThinkGeek :: Stuff for Smart Masses

Scroll to the bottom to see a nice robots-into-zomies effect.

SlickMap CSS — A Visual Sitemapping Tool for Web Developers

A really nice stylesheet for sitemaps represented as nested unordered lists in HTML.

LegiStyles™

Typographically thoughtful themes for NetNewsWIre. Even if you don't use the RSS reader, check out the gorgeous design of this site.

Kai Chan Vong - script snippets

Kai has written a handy little CSS diagnostic script to help you identify problems with your markup.

as days pass by, by Stuart Langridge — A WAI-ARIA “stylesheet”

Stuart has an interesting take on ARAI attributes. Why can't they be set declaratively in an external file in the same way as we set styles?

A List Apart: Articles: The Trouble With EM ’n EN (and Other Shady Characters)

This article is an oldie but a goodie. I find myself referring to it all the time: "Beating typographic correctness out of (X)HTML: more than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography."

Helvetireader

Jon's helvetican theme for Google Reader.

Everything You Know About CSS Is Wrong! - SitePoint Books

Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.

Typechart - Browse Web Type, Grab CSS.

A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.

The Paragraph in Web Typography & Design — Jon Tan ?

A wonderfully informative and useful look at paragraphs styles ...in history and in CSS.

font is dead, vive le style - W3C Q&A Weblog

About freakin' time! The FONT element, whose presence until now in HTML5 was an utter embarrassment to all concerned, is finally gone. Thanks, Hixie.