@63pokupki/design-system

Дизайн система компонентов 63 Pokupki

Просмотр в интерактивном режиме

Установка:

npm i @63pokupki/design-system

Публикация: Перед запуском команд убедиться, что установлены зависимости и имеются права доступа на публикацию

1. Сделать изменения.
2. Собрать проект npm run dist
3. Добавить изменения в отслеживаемые. Сделать коммит с изменениями локально.
4. Выполнить команду npm run publish:patch

Изменения в storybook: После внесённых изменений, необходимо выполнить команды

1. npm run libgen
2. npm run storybook:build
3. Затем повторить команды из Публикации выше

Введение

Данная система разработана для организации и облегчения работы над проектом. Она содержит в себе набор переиспользуемых компонентов в виде html заготовок и их стилей, которые удобно переиспользовать. По сути, это конструктор лего. Из маленьких общих блоков можно собрать более крупные блоки в едином стиле и структуре, без дублирования кода.

Новый дизайн (страницы, компонента, блока, элемента) должен быть разбит на отдельные общие независимые блоки, которые надо поместить в этот проект в соответствующие разделы перед использованием на основном сайте. Далее на их основе делаются более крупные и специфичные блоки.

Упор делается на простоту, гибкость, независимость и переиспользуемость.

Содержание

1. Правила наименования
2. Стилизация
3. Как пользоваться дизайн-системой
4. Как пользоваться шрифтовыми иконками
5. Работа с svg-спрайтом
6. Блок "Актуальное". Замена контента
7. Замена баннеров во всплывающем меню
8. Написание функциональных тестов