Tags: documentation

36

sparkline

Sunday, February 11th, 2018

Brendan Dawes - Using a Git Repo to create a physical document of the work

There’s something quite Bridlesque about these lovely books that Brendan is generating from git commits.

Thursday, January 11th, 2018

TNZ Pattern Library Docs

New Zealand has a pattern library (in Fractal, no less).

Friday, January 5th, 2018

Herman: Automated Pattern Libraries | OddBird

A lightweight style guide generator. This one uses SassDoc to parse out the documentation for colours, type, etc.

Wednesday, November 8th, 2017

The Art of Comments | CSS-Tricks

Great advice on writing sensible comments in your code.

Wednesday, August 23rd, 2017

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!

Friday, July 14th, 2017

A Design System Grammar | Daniel T. Eden, Designer

Once again, we can learn from Christoper Alexander’s A Pattern Language when it comes to create digital design systems, especially this part (which reminds me of one of the panes you can view in Fractal’s default interface):

  • Each pattern’s documentation is preceded with a list of other patterns that employ the upcoming pattern
  • Each pattern’s documentation is followed by a list of other patterns that are required for this pattern

Thursday, June 1st, 2017

Lost My Name Design System

The really nicely documented design system for Lost My Name.

They’ve also written up the process of creating the design system which includes a refreshingly honest account of missteps made along the way—very valuable!

Sunday, October 23rd, 2016

Overview | Atlassian Design Guidelines

A nicely-documented styleguide from Atlassian. It’s not a component library, though—there’s no code here.

Wednesday, August 24th, 2016

Shadow DOM v1: self-contained web components | Web Fundamentals - Google Developers

An in-depth look at the current Shadow DOM spec. It’s well-written but I don’t think this will really click with me until I start playing around with it for myself.

It’s good to see that the examples have some thought given to fallback content.

There’s also a corresponding tutorial on custom elements

Friday, July 22nd, 2016

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.

Thursday, July 21st, 2016

Qualities of Successful Pattern Libraries: Pick Any Two - Cloud Four

I think Tyler’s onto something here:

I noticed three qualities that recurred in different combinations. Without at least two, the projects seemed doomed to failure.

  1. User-Friendly
  2. Collaborative
  3. Integrated

I certainly think there’s a difference in how you approach a pattern library intended as a deliverable (something we do a lot of at Clearleft) compared to building a pattern library for an ongoing ever-evolving product.

Thursday, July 14th, 2016

Making And Maintaining Atomic Design Systems With Pattern Lab 2 – Smashing Magazine

A walkthrough of what’s new in Pattern Lab 2. It’s really interesting to see the convergent evolution of ideas here with what’s brewing in Fractal at Clearleft.

Monday, May 16th, 2016

FamilySearch Style Guide

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

Wednesday, May 11th, 2016

Let’s Write Beautiful CSS Comments | Sparkbox

If you don’t comment your CSS, you’ll confuse other people looking at your code, and, more embarrassingly, you’ll confuse future you. If you do comment CSS, everybody will be less confused, and things will be accidentally broken less often. You will be popular and generally well-liked, and people will remember to send you cards on your birthday. Comment more.

Some good advice here on how to write better comments in CSS.

Monday, February 29th, 2016

Walmart Web Style Guide

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

Sunday, January 24th, 2016

Thursday, August 27th, 2015

Lightning Design System

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

Monday, September 22nd, 2014

Anne’s Blog

Anne is documenting his process of going https:

  1. TLS: first steps
  2. TLS: issues with StartSSL
  3. TLS: issues with DreamHost
  4. TLS: deploy HSTS
  5. TLS: next steps

I’m really glad he’s doing this.

Monday, July 28th, 2014

GitHub’s CSS · @mdo

Mark Otto talks through the state of Github’s CSS and the processes behind updating it. There’s a nice mix of pragmatism and best practices, together with a recognition that there’s always room for improvement.

Thursday, January 16th, 2014

DevDocs

A handy one-stop-shop for documentation on web technologies.