Tags: library

Fractal v1.0 | Clearleft

Mark sets the scene for Fractal, the fantastic tool he’s built for generating pattern libraries.

This 1.0 release is just a start; it hopefully provides a solid foundation on which we (and anyone else who wants to contribute) can build and expand on in the future.

Exciting!

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.

Design Systems

A newsletter dedicated to all things related to design systems, style guides, and pattern libraries.

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.

Snyk’s Style Guide

…and Anna describes the process of creating the Snyk style guide.

Creating a Bocoup style guide - Bocoup

Susan describes the process behind creating Bocoup’s style guide…

Rivets.js — Lightweight and powerful data binding + templating solution for building modern web applications

Mark recommended this JavaScript library as lightweight alternative to Vue.js …itself a kind of lightweight alternative to React. Basically I’m interested in the data-binding stuff.

Astrum - A lightweight pattern library for any project

One more tool for making pattern libraries. This one looks fairly simple and straightforward.

» Introducing Drizzle Cloud Four Blog

A new pattern library tool, this time from the smart people at Cloud Four. It’s called Drizzle and it started life as a fork of Fabricator.

Vanilla List: The Vanilla Javascript Repository

Here’s a handy directory of scripts that set out to solve one problem without any dependencies. Useful for poking at, picking apart, and learning from.

BBC Blogs - Internet Blog - BBC UX&D on creating a GEL foundation for everyone

Al runs through the process of updating GEL—the BBC’s Global Experience Language design system. I particularly like the thought that’s gone into naming type sizes.

FamilySearch Style Guide

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

The Sonos Pattern Library — zdfs

There’s a lot I disagree with here. I don’t think this pattern library process is very elegant or scalable, and it certainly wouldn’t work for me.

But I’m still linking to it. Why? Because I think it’s absolutely wonderful that people share their processes like this. It doesn’t matter one whit whether or not it would work for me.

Frontend development may have gotten a lot more complicated, but the simple premise of sharing what you’ve learned hasn’t.

I couldn’t agree more!

Rebuilding the Perch UI - creating a pattern library

Rachel and Drew have been beta-testing Mark’s Fractal project for organising a library of components for Perch’s interface. Sounds like it’s working out very, very well indeed!

The Internet Archive—Bricks and Mortar Version - Scientific American Blog Network

A profile of the Internet Archive, but this time focusing on its physical space.

The Archive is a third place unlike any other.

Walmart Web Style Guide

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

Content and Display Patterns | Brad Frost

Brad follows up with his thoughts on Dan’s article, emphasising the importance of a developer’s role in not just slavishly recreating what’s in a static comp, but seeing through to the underlying pattern beneath:

It’s so incredibly crucial to treat development as a key part of the design process.

“Content & Display Patterns,” an article by Dan Mall

A really terrific article from Dan on building pattern libraries. In summary:

  1. Naming things is hard,
  2. Separation of content and presentation is A Good Thing.

There are some really good insights here into getting just the right level of abstraction for a component—not too tightly tied to a specific visual display, but also not too tightly tied to a specific kind of content type:

When thinking about patterns, content strategists are primarily thinking about Content patterns, designers are primarily thinking about Display patterns, and front-end developers are responsible for bringing the two together.

(And it’s great to see Charlotte’s excellent article get a shout-out in the “Related reading” section at the end,)

Bliss.js — Heavenly JavaScript!

A small little JavaScript helper from Lea.

The helper library for people who don’t like helper libraries.

WTF is Solid?- Solid

The new style guide and pattern library for Buzzfeed.

It all looks pretty reasonable on the surface but if you poke around in the CSS, you’ll find 1157 uses of !important. Yikes!

The whole point of having an agreed-upon codebase in a pattern library is so that developers need never reach for nuclear options like !important, so I’m afraid, for me, this is a demonstration of what not to do (in terms of CSS—the output of the HTML in the styleguide looks perfectly fine).

Solid uses immutable, atomic CSS classes…

CSS is “mutable”. By design. I don’t think we should be working against that.

jonathantneal/mdcss

A tool for generating a pattern library from Markdown comments in CSS. This isn’t the way that I tend to work, but I can see how it would be quite handy.

NC.gov Styleguide

The comprehensive style guide and pattern library for North Carolina.

Patterns & Modules: The Toast — 2015 Redesign

I really like the way that you can literally flip between the source code and the output in this styleguide for The Toast.

18F — Introducing the U.S. Web Design Standards

The story behind the newly-released pattern library for the US government.

How To Organise Your Library

John expands on just one part of his superbly dense and entertaining dConstruct talk.

GOV.UK elements

I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.

Lightning Design System

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

The Language of Modular Design · An A List Apart Article

Alla has taken the ideas she presented in her superb talk at Responsive Day Out and published them as a great article in A List Apart.

Library of Babel

This is simply wondrous! A microcosm of Borges’s story made real on the world wide web.

We do not simply generate and store books as they are requested — in fact, the storage demands would make that impossible. Every possible permutation of letters is accessible at this very moment in one of the library’s books, only awaiting its discovery.

Styleguide

Huge have released their tool for generating front-end style guides.

You might not need jQuery plugins

From the people who brought you youmightnotneedjquery.com comes youmightnotneedjqueryplugins.com.

Don’t get me wrong—jQuery is great (some of the plugins less so) but the decision about whether to use it or not on any particular project should be an informed decision made on a case-by-case basis …not just because that’s the way things have always been done.

These sites help to inform that decision.

The Ushahidi Platform ~ Pattern Library

A really nicely-documented pattern library.

Future Library – Framtidsbiblioteket

Here’s a lovely project with an eye on the Long Now. Trees that were planted last year will be used to make paper to print an anthology in 2114.

Margaret Atwood is one of the contributors.

Purple: A UI kit for Heroku’s web interfaces

Hot on the heels of Github’s pattern library, here’s Heroku’s.

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

What we would change about Rizzo - Ian Feather

I really like the self-examination that Ian and his team at Lonely Planet are doing here. Instead of creating a framework for creating a living style guide and calling it done, they’re constantly looking at what could be done better, and revisiting earlier decisions.

I’m intrigued by the way they’ve decided to reorganise their files by component rather than by filetype.

Atomic Design by Brad Frost

Brad’s writing a book.

Insert take-my-money.gif here.

Taunus

I like the thinking behind this isomorphic JavaScript library: start with the (Node.js) server and then take over on the client side after the initial page load.

The Pattern Library

Literally a library of patterns: y’know, for tiling background images. Old school!

Creating Style Guides · An A List Apart Article

A great article by Susan on getting started with creating a styleguide for any project.

I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.

being a client (tecznotes)

Mike writes about what it was like being a client for a change. After working with him on the Code for America project, I can personally vouch for him as a dream client:

Clearleft’s pattern deliverables are the special-special that made the final work so strong. Jon Aizlewood’s introduction to the concept convinced me to contact Clearleft. Jeremy Keith’s interest in design systems kicked off the process, and Anna Debenham’s fucking rock star delivery brought it all home.

Getting Started With Pattern Libraries ∙ An A List Apart Blog Post

A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.

A-mer-ica! Fuck yeah!

A List Apart Pattern Library

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

Flickr: The British Library’s Photostream

This is a wonderful addition to the already-wonderful Flickr Commons: over one million pictures from the British Library, available with liberal licensing.

Y’know, I’m worried about what will happen to my own photos when Flickr inevitably goes down the tubes (there are still some good people there fighting the good fight, but they’re in the minority and they’re battling against the douchiest of Silicon Valley managerial types who have been brought in to increase “engagement” by stripping away everything that makes Flickr special) …but what really worries me is what’s going to happen to Flickr Commons. It’s an unbelievably important and valuable resource.

Styleguide | MapBox

Hot on the heels of the Mailchimp styleguide, here’s the collection of patterns used by Mapbox. I’m not keen on some of their markup choices, but again, it’s great to see organisations publicly documenting this stuff.

Pattern Library | MailChimp

The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.

Brewster’s trillions: Internet Archive strives to keep web history alive

A profile in The Guardian of the Internet Archive and my hero, Brewster Kahle (who also pops up in the comments).

On pattern portfolios | Clear Thinking - The Clearleft Blog

Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.

Barebones — An initial directory setup, style guide and pattern primer by Paul Lloyd

Here are some nice patterns that Paul uses for starting points in his own projects.

Base CSS | Pasteup | Guardian News

The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!

Style guide round-up

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

Style Guide

I met one of the guys from the Starbucks team at South by Southwest and he mentioned that they had a markup pattern library. I encouraged them to make it public, and it here it is!

I really hope that more companies and agencies will start sharing stuff like this.

Pears

A great pattern library from Dan.

Out of this World events

There’s a whole series of sci-fi related events going on at the British Library.

New Titles in Lending Library! « The Open Library Blog

You can now borrow HTML5 For Web Designers through the Open Library. Nice one, George!

Welcome to Open Library! (Open Library)

One web page for every book. I love this project.

Polymaps

A JavaScript/SVG library for displaying maps in a variety of interesting ways.

PaintbrushJS v0.1 Demo Page

A fantastic bit of image manipulation JavaScript from Dave.

Akihabara

A framework for creating old-school arcade games in the browser, using HTML5.

We are Colorblind » Patterns for the Color Blind

A pattern library that considers colour blindness.

BBC - Glow JavaScript Library

The BBC have released their JavaScript library. This one is worth paying attention to for its wide browser support base.

kewlchops: A new leaf.

The perfect person for the job—George will be working on the Internet Archive's Open Library project: a webpage for every book ever published.

Jacob Nadal

The blog of the preservation officer at the University of California.

jCquard: The Do Less, Punch More JavaScript Library

This is certainly the most backwards-compatible JavaScript library out there.

jQuery 1.2 Cheat Sheet :: www.gscottolson.com/weblog/

A handy cheat sheet of jQuery methods to print out and keep on hand.

Flickr: The Commons

Here's a fantastic collaboration with the Library of Congress. We are being asked to collectively tag historic pictures with no known copyright restrictions. Wonderful idea! Are you watching, British Library?

jQuery UI: Widgets, Components, and Interactions

From the people who brought you jQuery comes a set of widgets built using jQuery complete with documentation and tutorials.

YUI Version 2.2.0 Released: Browser History Manager, DataTable, and Button Components, New Versioning, and More » Yahoo! User Interface Blog

Roll up and get it: hot off the presses; the new version of the Yahoo User Interface library. Happy birthday, YUI.

Dear JavaScript Library Developers… - Wait till I come!

Christian's wish list for JavaScript libraries.

Adobe Labs - Spry Data Set and Dynamic Region Overview

The Spry framework from Adobe looks like it could be worth further investigation. I certainly like the underlying philosophy: lightweight, standards-based, and declarative.

Cheat Sheets for the YUI Utilities » Yahoo! User Interface Blog

If you use the Yahoo JavaScript libraries a lot, these cheat sheets (inspired by those of fellow Brightonian, Dave Childs) should come in very handy.

script.aculo.us - web 2.0 javascript

A library of JavaScript classes: not very unobtrusive, not much graceful degradation. I think we need a bit less hype and a bit more questioning.