Tags: patterns



Overview | Atlassian Design Guidelines

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

Maintaining and organising a pattern library - FutureLearn

Alla looks at a few different ways of organising the contents of a pattern library, based on her experience with the FutureLearn team.

You Might Not Need JavaScript

Una has put together a nice collection of patterns that use CSS for interactions. JavaScript would certainly be more suitable for many of these, but they still provide some great ideas for robust fallbacks.

Taking Pattern Libraries To The Next Level – Smashing Magazine

Here’s an epic brain dump by Vitaly on the challenges of putting together a pattern library and then maintaining it.

Sacrificing consistency for usability is fine. A slightly open-ended, inconsistent but heavily used pattern library is better than a perfectly consistent pattern library that is never used.

Building Resizeable Components with Relative CSS Units | CSS-Tricks

A thorough and compelling demonstration of why it makes sense to size all the properties of your components—font size, margins, borders, etc.—in ems or rems rather than mixing in pixels for some properties. It’s all about the scalability, innit?

Style Guides, Pattern Libraries, Design Systems and other amenities. // Speaker Deck

This slide deck is a whistle-stop tour of all things styleguide and pattern-library related. Nice to see Charlotte’s excellent exercise get a shout-out.

“Researching Design Systems,” an article by Dan Mall

Dan has been researching the history of design systems, annotating as he goes.

Web Components and progressive enhancement - Adam Onishi

Adam and I share the same hopes and frustrations with web components. They can be written in a resilient, layered way that allows for progressive enhancement, but just about every example out there demonstrates a “my way or the highway” approach to using them.

We were chatting about this in the Design Systems slack channel, and it helped clarify some of my thoughts. I’ll try to poop out a blog post about this soon.

A Code Review, Or Yet Another Reason to Love the Web | Brad Frost

I love this back and forth between Brad and Jonathon. I think they’ve both got some good ideas:

  • I agree with Brad that you can start marking up these kind of patterns before you’ve got visual designs.
  • I agree with Jonathon that it’s often better to have a generic wrapper element to avoid making assumptions about which elements will be used.

Join Fractal on Slack!

If you’re planning on giving Fractal a test drive, jump into this Slack channel. Mark and others will be able to help you out with any questions that aren’t covered in the docs.

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.


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…

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.

Astrum - A lightweight pattern library for any project

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

Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns” (Pre-Release) – Smashing Magazine

I think it’s a safe bet that this new book by Heydon will be absolutely brilliant.

It’s a handbook with valuable, time-saving techniques that will help you avoid hacky workarounds and solve common issues effectively.

Designing Modular UI Systems Via Style Guide-Driven Development – Smashing Magazine

Striking that balance between the reusability of modular components and maintaining a big-picture vision of the overall design:

We should always strive to use patterns in an application. For example, consistent use of colors and font sizes can quickly indicate to the user elements in the UI that can be interacted with. However, avoid using a pattern just because it has been implemented before; rather, use it because it really solves the problem at hand.