Essential | | | | | | | | |
Open source | As a consumer of a library, I want to contribute, request features, resolve issues, and debug the code | 2 | 2 | 2 | 2 | 2 | 2 | 2 |
Framework agnostic | As a developer, I want to use this solution across Rails, React, Next.js, React-Native, rollup, Vite, esbuild, webpack, sewing-kit HTML, and Native applications. | 2 | 2 | 2 | 1 | 2 | 1 | 1 |
Client-side theming | As a developer, I want to set up client-side theming so my users can control the color scheme with little effort. | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
Multiple themes (more than 2) | As a developer, I want to set up multiple themes (light, dark, dim, etc.) easily to have lots of customization | 1 | 1 | 0 | 1 | 2 | 2 | 1 |
Variants | As a developer, I want to extend or override the styles in one place easily | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
Class names are debuggable | As a developer, I want to easily find the class names for the elements I am debugging in development | 2 | 2 | 2 | 2 | 0 | 2 | 2 |
Levers are transparent and exposed | As a designer and developer; I want to understand how the inputs to the system affect the outputs of the system | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
Enables consistent implementation of the design system | As a designer, I want developers to use consistent values for margins, paddings, font sizes, etc. | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
Zero-runtime | As a user, I don't want additional code or processing time spent to see the styles | 2 | 2 | 2 | ? | 0 | 2 | 1 |
CSS file output | As a developer, I want to make a prototype with the CSS outputted quickly | 2 | 2 | 2 | 2 | 0 | 1 | 1 |
Conditional styles | As a developer, I want to modify the component for hover, active easily, reduced motion, color scheme, etc. | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
Override styles | As a developer, I want to easily modify or create a new style for an existing component | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
Performant build times | | 0 | 2 | 1 | ? | ? | ? | ? |
Important | | | | | | | | |
Linting | As a developer, I want consistency between files and on saving my documents should format, or a linting test should fail | | | | | | | |
Glancability and parsable | As a developer, I want to be able to look at a chunk of HTML and be able to understand roughly how it's styled | 1 | 1 | 2 | 0 | 1 | 2 | 0 |
Naming of CSS rules | As a developer, coming up with names for classes is hard and doesn't add much value | 0 | 0 | 2 | 0 | 1 | 2 | 0 |
Placement of CSS rules | As a developer, I want to avoid scrolling up and down or jumping between files when working with HTML and CSS | 0 | 0 | 2 | 0 | 0 | 2 | 0 |
Class names are obfuscated in production | As a developer I want the smallest HTML footprint possible | 1 | 1 | 0 | ? | 2 | 2 | 2 |
Class names are not obfuscated in production | As a designer, I want to be able to jump into the source code and understand how things relate | 2 | 2 | 2 | 0 | 0 | 0 | 0 |
Typescript support | As a developer, I want to use typescript to be confident I am using the values correctly | 0 | 0 | 0 | 0 | 2 | 2 | 2 |
Atomic CSS support | As a developer, I want the outputted styles to use atomic CSS, so I can easily reduce the total amount of code | 1 | 1 | 2 | 0 | 0 | 2 | 1 |
Nested arbitrary selectors | As a developer, I want to style elements if a parent has a span as child & > span | 2 | 2 | 0 | 2 | 2 | 0 | 2 |
Documentation | As a developer, I want rich, detailed and up-to-date documentation about the framework | 2 | 2 | 2 | 0 | 2 | 0 | 2 |
Community — Sense of belonging | As a developer, I want to feel part of a community (discords, conferences, etc) | 2 | 2 | 2 | 0 | 1 | 1 | 1 |
Community — Crowdsourcing solutions | As a developer, I want a dependable framework that has been stress tested in many organizations | 2 | 2 | 2 | 1 | 0 | 0 | 2 |
Autocomplete in VSCode | As a developer, I want my code editor to autocomplete the design language values | 0 | 0 | 1 | 0 | 2 | 2 | 0 |
Tooling availability | As a developer, I want the ability to install additional tools in VSCode and other IDEs. (Example: Color value preview) | 2 | 2 | 2 | 0 | 0 | 0 | 1 |
Transferable | As a developer, I want to learn skills that are transferable — to side projects or new employers | 2 | 2 | 1 | 1 | 0 | 0 | 1 |
Nice to have | | | | | | | | |
Roadmap | As a consumer of a library, I want to see what the roadmap of features looks like | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
Emoji class names | As a developer, I want to have fun when prototyping components | 2 | 2 | 0 | 2 | ? | 0 | 2 |
Totals | | | | | | | | |
| | 37 | 39 | 44 | 21 | 32 | 38 | 31 |