Tags: style

150

sparkline

Integrating Animation into a Design System · An A List Apart Article

Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!

I made a style guide for my personal web site and you should too.—zachleat.com

Here’s Zach’s style guide. But the real reason I’m linking to this is his lovely description of having a personal website that grows over time:

As my own little corner of the web unceremoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful.

Patterns Day 2017: Paul Lloyd on Vimeo

Paul pulls no punches in this rousing talk from Patterns Day.

The transcript is on his site.

Patterns Day 2017: Alice Bartlett on Vimeo

At Patterns Day, Alice shared what she has learned from shepherding the Origami project within the Financial Times.

Shoelace.css: a back to the basics CSS starter kit

A starter kit of CSS that gives you some basic styles that you can tweak with custom properties.

For when you don’t need the whole boot.

Also:

Shoelace doesn’t ship with a grid system because you don’t need one. You should use the CSS Grid Layout instead.

I approve this message!

Patterns Day 2017: Jina Anne on Vimeo

Jina invented an entirely new genre for her Patterns Day talk—autobiographical fantasy.

Patterns Day 2017: Rachel Andrew on Vimeo

Rachel’s fantastic talk from Patterns Day. There’s a lot of love for Fractal specifically, but there are also some great points about keeping a pattern library in sync with a live site, and treating individual components as reduced test-cases.

Patterns Day 2017: Laura Elizabeth on Vimeo

The videos are coming! The videos are coming!

Here’s the first one: Laura Elizabeth opening the show at Patterns Day.

What’s the difference between style guides, pattern libraries, and design systems? – Joseph Fitzsimmons

Ah, the age-old question!

The Venn diagram here pretty much maps to how I think about these different terms, and how they relate to one another.

Fantasies of the Future / Paul Robert Lloyd

Paul has published the slides and transcript of his knock-out talk at Patterns Day. This a must-read: superb stuff!

Design systems are an attempt to add a layer of logic and reasoning over a series decisions made by complex, irrational, emotional human beings. As such, they are subject to individual perspectives, biases, and aspirations.

How does the culture in which they are made effect the resulting design?

Meet “Design Systems”, A New Smashing Book (Pre-Release) – Smashing Magazine

Alla’s book is going to be a must-have (I know because I’ve been reviewing it as she’s been writing it). Pre-order it now. It’s out in September.

Oh No! Our Stylesheet Only Grows and Grows and Grows! (The Append-Only Stylesheet Problem) | CSS-Tricks

I think Chris is on to something here when he identifies one of the biggest issues with CSS growing out of control:

The developers are afraid of the CSS.

Standard Ebooks: Free and liberated ebooks, carefully produced for the true book lover.

Beautifully designed and typeset eBooks of royalty-free works—yours for the taking and reading.

There’s a styleguide if you want to get involved on the production side too.

Amazon Alexa Voice Design Guide

A style guide for voice interfaces.

Style Guide Guide | Style Guide Guide

If you want to understand the thinking behind this style guide guide, be sure to read Brad’s style guide guide guide.

Creating a pattern library in Sketch, Roobottom.com

A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.

Springer Nature frontend playbook: house style guide

I like it when organisations share their in-house coding styles. This one from Springer Nature not only has guides for HTML, CSS, and JavaScript, but it also has a good primer on progressive enhancement.

There are maps for these territories | Clearleft

A great piece from Danielle on the different mental models needed for different languages. When someone describes a language—like CSS—as “broken”, it may well be that there’s a mismatch in mental models.

CSS isn’t a programming language. It’s a stylesheet language. We shouldn’t expect it to behave like a programming language. It has its own unique landscape and structures, ones that people with programming language mental maps might not expect.

I believe that this mismatch of expectation is what has led to the current explosion of CSS-in-JS solutions. Confronted with a language that seems arbitrary and illogical, and having spent little or no time exposed to the landscape, developers dismiss CSS as ‘broken’ and use systems that either sweep it under the rug, or attempt to force it into alignment with the landscape of a programming language — often sacrificing some of the most powerful features of CSS.

The Elements of Bureaucratic Style

I’m currently reading The Sense of Style by Steven Pinker, and it resonates nicely with this article on the numbing effect of the bureaucratic style exemplified in phrases like “officer-involved shooting.”

Watching the cell phone videos of the assault has, for most people, the immediate effect of provoking outrage and awakening a desire for justice. The purpose of bureaucratic speech is to dull these responses. It suggests your outrage is not worth it, that it’s fine to go back to what you were doing, that it’s best to move along and mind your own business.

Jeremy Keith Interview

I had a chat with Toby Osbourn over Skype. He’s writing a book all about print stylesheets so that’s we talked about.