全部入りHTML太郎
Adactio: Links—WTF is Solid?- Solid adactio.com/links/9910
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.
Responses
Related links
Introducing the GOV.UK Design System - Government Digital Service
The Gov.uk design system is looking very, very good indeed—nicely organised with plenty of usage guidelines for every component.
Guidance on using components and patterns now follow a simple, consistent format based on task-based research into what users need in order to follow and trust an approach.
TNZ Pattern Library Docs
New Zealand has a pattern library (in Fractal, no less).
Patterns Day 2017: Paul Lloyd on Vimeo
Paul pulls no punches in this rousing talk from Patterns Day.
The transcript is on his site.
Patterns Day 2017: Alice Bartlett on Vimeo
At Patterns Day, Alice shared what she has learned from shepherding the Origami project within the Financial Times.
Patterns Day 2017: Laura Elizabeth on Vimeo
The videos are coming! The videos are coming!
Here’s the first one: Laura Elizabeth opening the show at Patterns Day.
Related posts
The history of design systems at Clearleft
From pattern portfolios to Fractal.
Why Design Systems Fail by Una Kravets
A presentation at An Event Apart Boston 2018.
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.
aria-live
An exception to my general rule that ARIA attributes should be added with JavaScript.
ARIA in CSS
Apply your ARIA attributes with JavaScript and then use them as hooks in your CSS.