@napopravku/np-design-system v0.0.1

np-design

NaPopravku design library

Стили написаны с помощью CSS фраймворка Tailwind.

В качестве препроцессора (постпрепроцессора) используется postCSS.

Установка

$ npm install

Запуск проекта

$ npm run start

Build

Собрать CSS: $ gulp css

Собрать HTML: $ gulp html

Собрать изображения: $ gulp img

Общая сборка: $ gulp build или $ rm -rf dist && gulp build

Тестирование

Тестирование новых изменений в проекте происходит при помощи визуального тестирования Percy. Чтобы воспользоваться данным способом необходимо получить доступ к проекту. Для этого авторизируйтесь на сайте percy.io

Для выполнения скриншот тестрования: 1. Убедитесь, что все изменения были собраны и загружены. В ином случае воспользуйтесь $ gulp build. 1. Запустите сервер командой $ npm run start. 2. Откройте новый терминал, запустите $ npm run test. Percy начнет тестирование.

После завершения тестирования в терминале появится ссылка на результаты теста.

Чтобы выложить в npm, необходимо:

1. Зарегистрироваться в www.npmjs.com
2. Получить приглашение в организацию.
3. Войти в учетную запись через консоль.
4. Выполнить публикацию.

Выложить версию в npm

1. Если нет аккаунта в www.npmjs.com, зарегистрироваться.
2. Получить приглашение в организацию.
3. Выпольнить общую сборку.
4. Изменить номер верcии в package.json
5. Войти в учетную запись npm через консоль $ npm login
6. Выполнить $ npm publish --access public

Структура репозитория

Верстка

• src/*.html – шаблоны для основного сайта (собираются в dist)
• src/lk/*.html – шаблоны для кабинета пользователя (собираются в dist/lk)
• src/_blocks/**/*.html – общие элементы и компоненты
• src/_includes/*.html – служебные фрагменты кода

Стили

• src/styles/np-styles.css – стили для основного сайта (собираются в dist/styles)
• src/styles/lk-styles.css – стили для кабинета пользователя (собираются в dist/styles)
• src/styles/_blocks/*.css – стили для общих элементов и компонентов
• src/styles/_core/*.css – базовые стили для типографики, цветов, иконок, форм
• src/styles/_templates/*.css – наборы стилей для отдельных проектов (запись, главная, ЛК)
• src/styles/dev/--*.css – служебные стили с основного сайта, tailwind утилиты (собираются в dist/styles/dev, но не нужны на продукте)

Изображения

• src/images/*.svg|png|jpg – изображения для фона, лого и иллюстраций (cобираются в dist/images)
• src/images/icons/*.svg – иконки, на которые ссылаются файлы со стилями (cобираются в dist/images/icons)
• src/images/logos/*.png – логотипы клиник для главной (cобираются в dist/images/logos)
• src/images/--svg-load/*.svg – иконки и фоны, которые инлайнятся в стили

Шрифты

• src/fonts – наши шрифты (собираются в dist/fonts)