5 ms·

A List Apart's Pattern Library

117 points by duck 13y ago

dictum 13y ago
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.
sycren 13y ago
I'm getting some really odd behaviour when I try and highlight text in it - http://imgur.com/jzvguIO http://imgur.com/jzvguIO
- wilto 13y ago
  It’s actually a really interesting Chrome bug—someone filed it on the main ALA repo: https://github.com/alistapart/AListApart/issues/53 https://github.com/alistapart/AListApart/issues/53 `-webkit-font-feature-settings` seems to be triggering it.
encoderer 13y ago
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 https://github.com/trulia/hologram Would be great to see a similar tool that can generate a pattern library like this one.
- Kerrick 13y ago
  KSS does, assuming you comment your CSS/Sass/Less in the proper way. http://warpspire.com/kss/ http://warpspire.com/kss/
- willcosgrove 13y ago
  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/ http://elementcss.com/
- jacobr 13y ago
  Try StyleDocco, a tool I built but now maintained by marrs. http://jacobrask.github.io/styledocco/ http://jacobrask.github.io/styledocco/ https://github.com/jacobrask/styledocco https://github.com/jacobrask/styledocco (edit: I see now that the Hologram site mentions StyleDocco as a similar project)
vosper 13y ago
Can someone please explain to me what this is and how it could be useful?
- lemonberry 13y ago
  That's what I was wondering too. It seems to be a style guide.
  - colinbartlett 13y ago
    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.
    - vickytnz 13y ago
      A pattern library is normally a collection of best UI practices: see the Yahoo UI pattern library http://developer.yahoo.com/ypatterns/ http://developer.yahoo.com/ypatterns/ or http://ui-patterns.com/ 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).
theIV 13y ago
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

117 points by duck 13y ago

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.

sycren 13y ago

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

wilto 13y ago
It’s actually a really interesting Chrome bug—someone filed it on the main ALA repo: https://github.com/alistapart/AListApart/issues/53 https://github.com/alistapart/AListApart/issues/53 `-webkit-font-feature-settings` seems to be triggering it.

encoderer 13y ago

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 https://github.com/trulia/hologram Would be great to see a similar tool that can generate a pattern library like this one.

Kerrick 13y ago
KSS does, assuming you comment your CSS/Sass/Less in the proper way. http://warpspire.com/kss/ http://warpspire.com/kss/
willcosgrove 13y ago
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/ http://elementcss.com/
jacobr 13y ago
Try StyleDocco, a tool I built but now maintained by marrs. http://jacobrask.github.io/styledocco/ http://jacobrask.github.io/styledocco/ https://github.com/jacobrask/styledocco https://github.com/jacobrask/styledocco (edit: I see now that the Hologram site mentions StyleDocco as a similar project)

vosper 13y ago

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

lemonberry 13y ago
That's what I was wondering too. It seems to be a style guide.
- colinbartlett 13y ago
  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.
  - vickytnz 13y ago
    A pattern library is normally a collection of best UI practices: see the Yahoo UI pattern library http://developer.yahoo.com/ypatterns/ http://developer.yahoo.com/ypatterns/ or http://ui-patterns.com/ 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).

theIV 13y ago

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