There are (at least) three cunning ways in Eleventy to get “reusable snippet” or “reusable component” functionality.
Nathan (of EightShapes) discusses how to unify anatomy and props across code and design tools.
Here’s a lovely Design System that interestingly uses Eleventy for its reference website and other generated artefacts:
The GOV.UK Design System is a nice Design System success story. At 3 years old it’s reporting high traffic, usage and satisfaction ratings. GDS do so much great, thoughtful and inclusive work (which they also share with the community) and it’s inspiring to see it being a success.
There are now more than 900 live cross-government services using the GOV.UK Design System - 75% more than a year ago. It’s being used in more than 2,600 repositories on GitHub and has been forked more than 200 times.
I should have bookmarked it long before now, but just revisiting the Lightning Design System I’m reminded that is really well organised and executed.
SLDS saves time and energy, freeing designers and developers to focus on larger issues of usability and meaning. Standardized, reusable components support collaboration, reinforce branding, and provide a consistent look and user experience.
Absolute gold here regarding accessibility, bloated components, and purpose versus appearance.
It’s easy for a component to become bloated and its purpose increasingly ambiguous.
Here’s an interesting new article from Ethan Marcotte, in which he muses on better ways to think about Design Systems based on his recent experience.
Once you’ve identified the root causes, you’ll be in a far, far better place to choose the right things — and, more importantly, to create a system that finally supports your design.
From 2015: Alla Kholmatova reflects on the difficulty in choosing between molecule or organism when categorising components using atomic design at FutureLearn. She also provides some handy insights into how they handled it.
When thinking about complexity of elements, it helps viewing molecules as “helpers” and organisms as “standalone” modules.
An excellent article from Brad Frost in which he gives us some vocabulary for separating context-agnostic components intended for maximal use from specific variants and one-offs.
Interesting insight into the BBC design system and the five areas it’s split into: Foundations, Components, Layout Components (including Stack, Grid etc) Levers and Containers.
My point with all this is that it’s easy to see every problem or design as a new component or a mix of currently existing components. But instead, we should make components that can slot into each other neatly, rather just continue to make more components.
Use this design system to make your service consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.
This is a nice whistle-stop tour of the the Guardian’s current digital design system. Apart from looking great, some of the terminology is interesting (fronts, kickers and thrashers) and I like the way they have different Card types for different types of article, “each having its own flavour and tone”.
It’s a collection of shared patterns and practices that allow our team to build quality user interfaces consistently and quickly.
The original call-to-arms and manual for Design Systems.
See all tags.