Tags: primer



Sunday, January 7th, 2018

The HSB Color System: A Practicioner’s Primer – Learn UI Design

A nice clear explanation of specifying colour using HSB (not to be confused with HSL).

Monday, July 31st, 2017

The Evolution of Trust

Such a great primer on game theory—well worth half an hour of your time.

Monday, March 7th, 2016

A Design Science Primer

The Buckminster Fuller Institute has put together this collection of resources which explain the ideas behind “comprehensive anticipatory design science.”

Seems especially relevant in light of the first issue of the Journal of Design and Science from MIT.

The legacy of the Black Mountain College lives on.

Sunday, January 10th, 2016

How the Web Works: A Primer for Newcomers to Web Development (or anyone, really) by Preethi Kasireddy

This is a great reminder of the fundamental nuts’n’bolts of the internet and the World Wide Web: clients, servers, URLs, DNS, HTTP, TCP/IP, packet switching, and all the other building blocks we sometimes take for granted.

This is part one of a four-part series:

  1. A Primer for Newcomers to Web Development (or anyone, really)
  2. Client-Server Model & the Structure of a Web Application
  3. HTTP & REST
  4. Stay tuned…

Monday, March 23rd, 2015

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

Monday, March 24th, 2014

Council Toolkit

A reusable set of responsive patterns and templates for UK councils.

Monday, February 17th, 2014


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

Tuesday, January 28th, 2014

A List Apart Pattern Library

Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!

Monday, January 27th, 2014

Pattern sharing

Mike has written about the Code for America alpha website that we collaborated on:

We chose to work with ClearLeft because they develop a pattern portfolio (a pattern/style library) which would allow us to scale our work to our Brigades. This unique approach has aligned perfectly with our work style and decentralized organizational structure.

Thankfully, I think the approach of delivering a pattern portfolio (instead of just pages) isn’t so unique these days. Mind you, it still seems to be more common with in-house teams than agencies. The Mailchimp pattern library is a classic example.

But agencies like Paravel are—like Clearleft—delivering systems, not pages. Dave wrote about providing responsive deliverables:

Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.

I think that’s a good way of looking at it: a Bootstrap for every project.

Here’s the front-end style guide for Code for America.

Usually these front-end deliverables will be password-protected on the Clearleft extranet for the client’s eyes only, but Code for America are all about openness, so they’re more than willing to let us share it with the world. That makes me very happy. I remember encouraging the guys at Starbucks to publish their front-end style guide and I’ve written about this spirit of sharing before:

These style guides and pattern libraries aren’t being published in an attempt to provide ready-made solutions—every project should have its own distinct pattern library. Instead, these pattern libraries are being published in a spirit of openness and sharing …a way of saying “Hey, this is what worked for us in these particular circumstances.”

If you’re poking around the Code for America style guide, you’ll notice that it borrows some ideas from the pattern primer idea I published a while back. But in this iteration, the markup is available via a toggle—a nice variation. There’s also a patchwork page that provides a nice glance-able uninterrupted view of the same patterns.

Every project is a learning experience and each front-end style guide gives us ideas about how to do the next one better. In fact, Mark is busy working on better internal tools for creating these kinds of deliverables—something we’ll definitely be sharing. In the meantime, I’ll be encouraging other clients to be as open as Code for America have been in allowing us to share these deliverables.

For more on the usefulness of front-end style guides, be sure to read Paul’s article on style guides for the web, Anna’s classic 24 Ways article, and of course, Anna’s pocket guide from Five Simple Steps.

Monday, November 25th, 2013


This is handy: a version of my pattern primer that can be run with Grunt.

Wednesday, March 21st, 2012

Style guide round-up

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

Saturday, November 19th, 2011

Pattern primer

I’m on a workshopping roll. Fresh from running my Responsive Enhancement workshop in Belfast, I’m now heading to Düsseldorf for Beyond Tellerand where I’ll be running the workshop on Sunday (and if you can’t make it, don’t forget that you can book the workshop for your own workplace too).

As part of the process of building a responsive site from the content out rather than the canvas in, I talk about beginning with the individual components divorced from any layout context. Or, as Mark puts it, “start with the bits.”

That’s the way I’ve been starting most of my projects lately: beginning with the atomic units of content and styling them first before even thinking about layout. This ensures that those styles are extremely robust—because they don’t depend on any particular context, they can be safely dropped into any part of a page.

I’ve been calling this initial collection of markup snippets a pattern primer. To help create the pattern primer, I’ve written a little bit of PHP to automatically generate a page of patterns from a folder of HTML snippets.

In my workshop I keep promising to put that script on Github. I finally got around to doing that and you can find it at github.com/adactio/Pattern-Primer.

Take a look at an example pattern primer to get an idea of what a handy deliverable this can be if you’re handing off to other developers. It also acts like a page of unit tests for CSS—whenever you’ve been messing around in the stylesheet you can refresh the page to quickly check to see if anything looks screwed up.

Grab the code; improve upon it; share your changes.

Thursday, January 7th, 2010


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

Friday, March 31st, 2006

Prime yourself

Last year, there was a lot of positive hum travelling through the blogvine about the film Primer. It has finally shown up here in the UK in DVD form.

I rented and watched the movie last night. Then I watched it again, this time with the director’s commentary. Then I went online and started reading discussions about the movie. Now I’m beginning to get it. I may watch it one more time before I have to get the DVD back to the shop.

I would like to offer some humble opinion and some advice:

  1. Try to not read or hear anything about the plot before watching the movie.
  2. Watch it. It’s great. It looks great, it sounds great, the acting is great… it’s just great.
  3. After watching it — but not before — read this bulletin board discussion. It helps clarify things better than the Wikipedia entry or this very detailed diagram.
  4. Now watch it again.

You may want to just go ahead and buy the DVD rather than simply renting it.