Публикации по теме 'design-systems'


Автоматическая документация веб-компонентов с использованием StencilJS и GatsbyJS
Недавно я создал систему дизайна на основе веб-компонентов, используя StencilJS. Впоследствии я хотел найти решение для создания сайта документации на основе автоматически созданных документов компонентов из StencilJS. В итоге я создал для этого стартер GatsbyJS и подумал, что расскажу, как легко было использовать как Stencil, так и Gatsby. 🖥 См. Сайт действующей документации 📓 Просмотрите исходный код на Github ✏️ Что такое StencilJS? StencilJS - это набор инструментов..

Как автоматизировать токены дизайна в дизайн-системе
Цвета, интервалы, вес шрифта и размер шрифта - все это маркеры дизайна. В дизайн-системе традиционно существует различие между дизайном и кодом. У нас есть дизайнеры, работающие над тем, как будут выглядеть компоненты, и разработчики, которые будут реализовывать эти компоненты. Однако требуются некоторые усилия, чтобы синхронизировать их обоих. Поэтому, когда я начал новую дизайн-систему, я подумал, можно ли устранить некоторые из этих трений. Идея заключалась в том, чтобы создать..

React Styleguidist 7.0.0 - привет, webpack 4, прощай, Node.js 4
Webpack 3 по-прежнему поддерживается. Node.js 6 - самая низкая поддерживаемая версия Styleguidist больше не работает с Node.js 4. Примеры обернуты в React.Fragment. Вам больше не нужно заключать в div несколько тегов JSX. // 6.x <div> <Button primary>Primary button</Button> <Button secondary>Secondary button</Button> </div> // 7.x <Button primary>Primary button</Button> <Button secondary>Secondary button</Button>..