How to unify anatomy and props across code and design tools

Choosing a UI web framework or library is often difficult. There are plenty to choose from, so you have to take different factors into account: number and quality of the components, performance, ongoing development, license or language support. Way too often accessibility (a11y) doesn't make it high on that list, unfortunately.

Modern UI teams are designing components first; Interfaces are merely the thoughtful composition of components. This leaves an often glaring hole for users on “the unhappy path” — The places where users may, intentionally or not, stray from your idealized flow. As we learn to craft systems rather than pages, we must invest effort into shaping these often missed states of design and create with a component lifecycle that can support everyone.

DTPR is an open-source communication standard that enables transparency, accountability, and control for people. The standard is free for anyone to use.

Mechanics, interaction, & experience build a better system.

Component-based design is an increasingly popular process for developing web interfaces. It was once common for organizations to rely on libraries such as Bootstrap or Material UI. But with the advent of improved tooling, many teams today are building their own themes, component libraries, and design systems. This influx of design and development collaboration is generating many new, exciting systems. That said, rolling your own systems comes with its own challenges and pitfalls. A recent library, styled-system, is an effective tool for navigating some of these issues.

Каталог отечественных компонентных дизайн-систем, реализованных на технологическом уровне. Живые гайдлайны, статьи, презентации, выступления и другие материалы о них.

In this article we'll go through what Lerna and monorepo's are and how to use them to create and manage a new design system. Or skip ahead and check out the source code here.

The documented collection of UI components

Если ваша компания делает несколько продуктов в едином стиле, однажды вам в голову придет идея сделать библиотеку с общим кодом. Например, с UI-компонентами, сервисом авторизации или для работы со сторонними API. Возможно, вы зададитесь вопросами: кто должен поддерживать этот код? Как доносить изменения до пользователей? В конце концов, как вообще заставить их пользоваться вашей библиотекой?

How to fix common issues when adding Storybook to a Snowpack app.

Styled System lets you quickly build custom UI components with constraint-based style props based on scales defined in your theme.

In this article, I demonstrate how to build a components library, what tools are needed, how to structure your project, and how to publish components to npm registry.

Or how I use CSS variables to create more manageable project styles and more portable patterns

A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

• interesting use of [, ], and | inside class attribute

Style Dictionary is a build system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

Bit.dev and Storybook are two quite different tools. At first glance, it might seem that both provide a visual showcase for your UI components, and can be used to visually document and organize UI components. That is true, but that’s only a small part of what each of these tools can provide.

Design systems streamline development, communication, and consistency – but often rely on dedicated teams and extended budgets. We wanted a tool that helps create and maintain living style guides & pattern libraries in an agile process, and on a budget. Herman helps you keep your development process simple – and your UX consistent – as you iterate on patterns and scale over time.

Robust design systems require meaningful, readable, reusable code. These Sass utilities are designed to help define and manage your design tokens (colors, fonts, sizes, etc.) in a format that can be understood by both humans and parsers – opening the door for automation, while improving consistency and readability. These tools also integrate with Herman, our automated living pattern-library generator built on SassDoc.

Powerful component libraries & styleguides that fit the way you work.

Storybook alternative for PHP/Twig