Tags: components

81

sparkline

Friday, April 28th, 2017

Introducing Fractal and Federalist | U.S. Web Design Standards

Another instance of Fractal in the wild, this time for the Federalist design system.

Why Fractal?

  • It’s open source.
  • It’s easy to use.
  • It generates standalone HTML previews of each component.
  • It uses or supports many of the technologies we use already.
  • Fractal offers a customizable theme engine.

Tuesday, April 11th, 2017

Announcing Patterns Day: June 30th

Gather ‘round, my friends. I’ve got a big announcement.

You should come to Brighton on Friday, June 30th. Why? Well, apart from the fact that you can have a lovely Summer weekend by the sea, that’s when a brand new one-day event will be happening:

Patterns Day!

That’s right—a one-day event dedicated to all things patterny: design systems, pattern libraries, style guides, and all that good stuff. I’m putting together a world-class line-up of speakers. So far I’ve already got:

It’s going to be a brain-bendingly good day of ideas, case studies, processes, and techniques with something for everyone, whether you’re a designer, developer, product owner, content strategist, or project manager.

Best of all, it’s taking place in the splendid Duke Of York’s Picture House. If you’ve been to Remy’s FFconf then you’ll know what a great venue it is—such comfy, comfy seats! Well, Patterns Day will be like a cross between FFconf and Responsive Day Out.

Tickets are £150+VAT. Grab yours now. Heck, bring the whole team. Let’s face it, this is a topic that everyone is struggling with so we’re all going to benefit from getting together for a day with your peers to hammer out the challenges of pattern libraries and design systems.

I’m really excited about this! I would love to see you in Brighton on the 30th of June for Patterns Day. It’s going to be fun!

Monday, April 10th, 2017

The full stack design system - Inside Intercom

A look at the history of design systems and how they differ from pattern libraries. Or, to put it another way, a pattern library is one part of a design system.

Monday, April 3rd, 2017

The Most Exciting Design Systems Are Boring | Big Medium

Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring.

The job is not to invent, but to curate.

Interesting thoughts from Josh on large-scale design systems and how they should prioritise the mundane but oft-used patterns.

When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don’t have to.

Questioning Container Queries / Paul Robert Lloyd

Paul’s being contrary again.

Seriously though, this is a good well-reasoned post about why container queries might not be the the all-healing solution for our responsive design problems. Thing is, I don’t think container queries are trying to be an all-encompassing solution, but rather a very useful solution for one particular class of problem.

So I don’t really see container queries competing with, say, grid layout (any more than grid layout is competing with flexbox), but rather one more tool that would be really useful to have in our arsenal.

Friday, March 24th, 2017

Patterns Beyond Context · Matthias Ott – User Experience Designer

If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.

Thursday, March 23rd, 2017

Need to Catch Up on the AMP Debate? | CSS-Tricks

Funnily enough, I led a brown bag lunch discussion about AMP at work just the other day. A lot of it mirrored Chris’s thoughts here. It’s a complicated situation that has lots of people worried.

Wednesday, March 22nd, 2017

sketch-to-fractal-comp on Vimeo

Everyone in the Fractal Slack channel is currently freaking out about this. Veeeeery iiiiinteresting!

Tuesday, March 21st, 2017

Inclusive Components

A great new site from Heydon:

A blog trying to be a pattern library. Each post explores the design of a robust, accessible interface component.

The first component is a deep dive into toggle buttons.

Monday, March 20th, 2017

Designing Systems, Part 3: Components and Composition / Paul Robert Lloyd

Paul finishes up his excellent three part series by getting down to the brass tacks of designing and building components on the web …and in cities. His closing provocation has echoes of Heydon’s rallying cry.

If you missed the other parts of this series, they are:

  1. Theory, Practice, and the Unfortunate In-between,
  2. Layers of Longevity, and
  3. Components and Composition

Thursday, March 2nd, 2017

Fractal Iterations | Clearleft

Danielle and Mark have been working flat out on Fractal. Here’s the roadmap they’re working to.

On container queries. — Ethan Marcotte

Unsurprisingly, I completely and utterly agree with Ethan’s assessment here:

I’ve written some code that’s saying, “Once the screen is this size and the element appears in a different, smaller container, use a narrower layout on this element.”

But, well, that’s weird. Why can’t we apply styles based on the space available to the module we’re designing, rather than looking at the shape of the viewport?

I also share his frustration with the “math is hard; let’s go shopping” response from browser vendors:

There’s an incredible clamor for container queries, with folks from every corner of the responsive community asking for something that solves this problem. So personally, I’d love to see at least one browser vendor partner with the RICG, and get properly fired up about this.

We had to drag browser makers kicking and screaming to responsive images (to this day, Hixie maintains it’s not a problem that needs solving) and I suspect even more activism is going to be needed to get them to tackle container queries.

Wednesday, March 1st, 2017

“Cooking with Design Systems,” an article by Dan Mall

Dan describes his approach to maintainable CSS. It’s a nice balance between semantic naming and reusable styles.

Warning: the analogies used here might make you very, very hungry.

Wednesday, January 25th, 2017

Evaluating Tools For Building a Component Library | Chromatic

A comparison of a few different tools for generating pattern libraries.

Spoiler…

In this particular case, Fractal comes out on top:

It has the features we need, and I’m happier than I should be with how simple the directory and file structure is. The documentation has also been super helpful thus far. We’ve customized it with our client’s branding and are ready to roll.

Monday, January 23rd, 2017

The road to Firefly 6, part 2, Roobottom.com

A look at the technical details behind Firefly’s pattern library. The tech stack includes Less, BEM, and some React, but it’s Anna and Danielle that really made it work.

Saturday, January 21st, 2017

Designing inspired style guides presentation slides and transcript | Stuff & Nonsense

Having spent half a decade encouraging people to make their pattern libraries public and doing my best to encourage openness and sharing, I find this kind of styleguide-shaming quite disheartening:

These all offer something different but more often than not they have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.

If a pattern library is intended to inspire, then make it inspiring. But if it’s intended to be an ever-changing codebase (made for and by the kind of people who enjoy configuring a router), then that’s where the effort and time should be concentrated.

But before designing anything—whether it’s a website or a pattern library—figure out who the audience is first.

Tuesday, January 3rd, 2017

Pattern patter. — Ethan Marcotte

Ethan has been thinking smarty-thinky thoughts about patterns and pattern libraries.

Monday, December 19th, 2016

BAgel

The styleguide, design principles, and pattern library for British Airways. It’s the “global experience language” for BA …so it’s called BAgel.

Sunday, December 4th, 2016

Fractal ways

24 Ways is back! That’s how we web nerds know that the Christmas season is here. It kicked off this year with a most excellent bit of hardware hacking from Seb: Internet of Stranger Things.

The site is looking lovely as always. There’s also a component library to to accompany it: Bits, the front-end component library for 24 ways. Nice work, courtesy of Paul. (I particularly like the comment component example).

The component library is built with Fractal, the magnificent tool that Mark has open-sourced. We’ve been using at Clearleft for a while now, but we haven’t had a chance to make any of the component libraries public so it’s really great to be able to point to the 24 Ways example. The code is all on Github too.

There’s a really good buzz around Fractal right now. Lots of people in the design systems Slack channel are talking about it. There’s also a dedicated Fractal Slack channel for people getting into the nitty-gritty of using the tool.

If you’re currently wrestling with the challenges of putting a front-end component library together, be sure to give Fractal a whirl.

Thursday, November 24th, 2016

Document your design systems with Fractal | Creative Bloq

This quick dip into Fractal was in last month’s Net magazine.

It’s very gratifying to see how much Fractal is resonating with people—Mark has put so much hard work into it.