Framework-agnostic design systems: a practical approach to web components
Topic: Design Systems
Topic: Design Systems
A quick note before we get into things: this is a practical guide that covers managing, building and packaging design system components. It’s impossible to go into thorough detail at every step of the way without this becoming a full course. Some basic knowledge is assumed:
A quick note before we get into things: this is a practical guide that covers managing, building and packaging design system components. It’s impossible to go into thorough detail at every step of the way without this becoming a full course. Some basic knowledge is assumed:
- A basic working knowledge of HTML and CSS
- A basic working knowledge of HTML and CSS
- A basic grasp of web components
- A basic grasp of web components
- A working installation of Node.js and npm
- A working installation of Node.js and npm
- Ability to navigate a terminal well enough to install some packages
- Ability to navigate a terminal well enough to install some packages
- Basic knowledge of config files and JSON
- Basic knowledge of config files and JSON
- Grasping the revolutionary notion that a
<button>is not a<div> - Grasping the revolutionary notion that a
<button>is not a<div>
Finally, this is a pretty long post. Treat every h2 as an invitation to go make a brew and touch some grass.
Finally, this is a pretty long post. Treat every h2 as an invitation to go make a brew and touch some grass.
Framework-agnostic components
Framework-agnostic components
Of all the recent hypes/bubbles/whatever you want to call them in tech, the one that excited and confounded me in equal parts was the design systems boom. The overarching concept is clearly fantastic, and almost every team or project can benefit from some form of centralised home for design decisions to live. Like every other boom though, it spawned a lot of weirdness. People converged on certain ways of seeing design in ‘the age of design systems’, Atomic Design slides appearing in every conference talk became a meme, and people made design tokens their entire ...