Remix Icon - Open source icon library
I love how easy it is to use these icons: you can copy and paste the SVG or even get it encoded as a data URL.
Link tags: library
152
ADL Social Pattern Library | Anti hate by design
A collection of design patterns and principles for mitigating the presence and spread of online hate and harassment in social platforms.
Patterns | APG | WAI | W3C
This is a terrific resource! A pattern library of interactive components: tabs, switches, dialogs, carousels …all the usual suspects.
Each component has an example implementation along with advice and a checklist for ensuring its accessible.
It’s so great to have these all gathered together in one place!
htmx - high power tools for html
I really like the progressive enhancement approach that this little library uses—it’s basically the Hijax approach I was talking about back in the days of Bulletproof Ajax but all wrapped up into a neat package that you can use entirely via HTML attributes.
Library: Accessibility resources, guides, communities, and more
A very comprehensive directory of accessibility resources.
Van11y: Accessibility and Vanilla JavaScript - ES2015
Van11y (for Vanilla-Accessibility) is a collection of accessible scripts for rich interfaces elements, built using progressive enhancement and customisable.
SydCSS 7th Birthday with Ethan Marcotte - YouTube
A great talk by Ethan called The Design Systems Between Us.
An Introduction To Stimulus.js — Smashing Magazine
An intro to Stimulus, the lightweight JavaScript library from Basecamp that takes a progressive enhancement approach, as seen with HEY.
One aspect I really like about the approach Stimulus encourages, is I can focus on sending HTML down the wire to my users, which is then jazzed up a little with JavaScript.
I’ve always been a fan of using the first few milliseconds of a user’s attention getting what I have to share with them — in front of them. Then worrying setting up the interaction layer while the user can start processing what they’re seeing.
Furthermore, if the JavaScript were to fail for whatever reason, the user can still see the content and interact with it without JavaScript.
Global and Component Style Settings with CSS Variables — Sara Soueidan
Sara shares how she programmes with custom properties in CSS. It sounds like her sensible approach aligns quite nicely with Andy’s CUBE CSS methodology.
Oh, and she’s using Fractal to organise her components:
I’ve been using Fractal for a couple of years now. I chose it over other pattern library tools because it fit my needs perfectly — I wanted a tool that was unopinionated and flexible enough to allow me to set up and structure my project the way I wanted to. Fractal fit the description perfectly because it is agnostic as to the way I develop or the tools I use.
Design Questions Library | d.school public library
This site is not meant to be exhaustive, but rather a useful guide—our FAQ for design understanding. We hope it will inspire discussion, some questioning, a little soul searching, and ideally, a bit of intellectual support for your everyday endeavors.
The Design Questions Library goes nicely with the Library of Ambiguity.
AccentDesign/Fractal-Atomic: An awesome starter point for your Fractal UI component library
If you want to use Brad’s Atomic Design naming convention—atoms, molecules, etc.—and you like using Fractal for making your components, this starter kit is just for you:
Keep what you need, delete what you don’t and add whatever you like on top of whats already there.
AMP as your web framework – The AMP Blog
The bait’n’switch is laid bare. First, AMP is positioned as a separate format. Then, only AMP pages are allowed ranking in the top stories carousel. Now, let’s pretend none of that ever happened and act as though AMP is just another framework. Oh, and those separate AMP pages that you made? Turns out that was all just “transitional” and you’re supposed to make your entire site in AMP now.
I would genuinely love to know how the Polymer team at Google feel about this pivot. Everything claimed in this blog post about AMP is actually true of Polymer (and other libraries of web components that don’t have the luxury of bribing developers with SEO ranking).
Some alternative facts from the introduction:
AMP isn’t another “channel” or “format” that’s somehow not the web.
Weird …because that’s exactly how it was sold to us (as a direct competitor to similar offerings from Apple and Facebook).
It’s not an SEO thing.
That it outright false. Ask any company actually using AMP why they use it.
It’s not a replacement for HTML.
And yet, the article goes on to try convince you to replace HTML with AMP.
Unpoly: Unobtrusive JavaScript framework
This looks like it could be an interesting library of interface patterns.
GitHub - frctl/awesome-fractal: A curated list of awesome things related to Fractal
A starter list of Fractal examples and links. You can expand it.
Magic Paintbox – Illuminated – Medium
What we get from the pattern library is time and freedom to be creative. I’ve seen people claim pattern libraries are the death of creativity and innovation in design. For us, it’s the opposite of that.
Beyond style guides: lessons from scaling design at TELUS
I like the questions that the TELUS team ask about any potential components to be added to their design system:
- Is it on brand?
- Is it accessible?
- Has it been tested?
- Can it be reused?
They also have design principles.
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.
The three lessons that changed how I think about design systems
- Know where you stand before starting the journey
- Make sure everyone is speaking the same language
- Integrate the right tools into your team’s workflow
5 ways having a shared design system has helped us ship our designs faster – Product at Canva
The steps that the Canva team took to turbocharge their design ops.
I’ll talk about why creating a shared design system has boosted our organizational productivity—and how you can help your teams improve product quality while reducing your company’s ‘design debt’.
Bulb Design System
I really like the way that this pattern library includes research insights to provide justification for design decisions.