A List Apart's Pattern Library | Hacker News Reader

A List Apart's Pattern Library

patterns.alistapart.com

117 pointsduck12 comments

Can someone please explain to me what this is and how it could be useful?

That's what I was wondering too. It seems to be a style guide.

Maybe "pattern library" is a new name for "style guide"? I have no idea. There no context here and no blog post or anything to clue us in.

A pattern library is normally a collection of best UI practices: see the Yahoo UI pattern library http://developer.yahoo.com/ypatterns/ or http://ui-patterns.com/ for the two most well known examples. (It comes from Christopher Alexander's A Pattern Language and it being adapted to object orientated programming by the Gang of Four in 'Design Patterns: Elements of Reusable Object-Oriented Software'). The ALA version is a bit odd as it's more style-guide like (you normally have more options).

This is the first pattern library I've seen that wasn't made for a web application. It's nice to see a pattern library for a content-focused publication.

Anybody know of a tool to help generate this?

At Trulia we released something similar for internal documentation of an OOCSS library (think: Generate your own bootstrap-style documentation)

https://github.com/trulia/hologram

Would be great to see a similar tool that can generate a pattern library like this one.

Try StyleDocco, a tool I built but now maintained by marrs.

http://jacobrask.github.io/styledocco/ https://github.com/jacobrask/styledocco

(edit: I see now that the Hologram site mentions StyleDocco as a similar project)

The Agency I work for built a tool call ElementCSS for the 2013 Rails Rumble. It's currently not under active development, but we're going to begin work on it soon to turn it in to a more usable product.

Link: http://elementcss.com/

KSS does, assuming you comment your CSS/Sass/Less in the proper way. http://warpspire.com/kss/

I'm getting some really odd behaviour when I try and highlight text in it - http://imgur.com/jzvguIO

It’s actually a really interesting Chrome bug—someone filed it on the main ALA repo: https://github.com/alistapart/AListApart/issues/53

`-webkit-font-feature-settings` seems to be triggering it.

I like some of the more humorous style names being used:

- "head-east-young-man" to float an li to the right - "el-jefe" for special folk in the masthead - "deadly-subtitle" for, well, a deadly-subtitle

Reply on news.ycombinator.com