The definitive guide to standardize the design/code of the UI Components based on the 39 most popular Reference Systems.

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.

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

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

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

If you’re looking for UI component tools chances are you’ve stumbled across Storybook and Styleguidist. On the surface, both have similar features and are used by teams around the world. It can be tough to pick the right one for your project.

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Get StartedWatch video

Atlas is living style-guide, pattern library, guidelines and documentation static site generator with extensive styles monitoring and Sass components reports. It generates documentation from markdown files and documentation comment in scss files.

Emulsify: Pattern Lab + Drupal 8

When it comes to the large web applications, we often operate with complex components. Such components are not just CSS styles for the pieces of an interface but also their JavaScript interactions and templates. As documentation, the style guide should reflect them all. In other words, the components on the style guide's pages should be the same living as in production.

At my recent project, we have been using SC5 Style Guide in its simplest way - documenting the view of the components. For that, we provided the needed HTML in the KSS code and so has received the rendered component library.

At Alley, we frequently design sites that require any given component to appear in a variety of contexts. A visual style guide allows us to view the site not as a series of pages, but grouping of reusable components. Ultimately, this simplifies and standardizes the way our designs communicate. via Pocket