Публикации по теме '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>..