Установка пакета

Начните работу с ZUI, создав новый проект или добавив его в существующее приложение npm install zharikov-ui.

Обновление пакета

npm outdated - проверяем если ли обновления для пакетов;
npm install zharikov-ui@latest - забираем крайнию верисю.

Структура

zharikov-ui/
  scss/
    _animation
    _elements
    _global
    _mixin
    _variables
    styles.scss

_animation - css анимация;
_elements - кнопки, формы, чипсы, типографика и т.д;
_global - глобальные стили проекта (body, container);
_mixin - набор scss миксинов;
_variables - scss переменные.

Импорты

Содержит @import всех файлов для сборки.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded');

@import '_variables/color';
@import '_variables/size';
@import '_variables/fonts';

@import '_mixins/align';
@import '_mixins/breakpoint';
@import '_mixins/element';
@import '_mixins/flex';
@import '_mixins/fonts';
@import '_mixins/form';
@import '_mixins/grid';
@import '_mixins/tt';
@import '_mixins/typography';
@import '_mixins/scrollbar';
@import '_mixins/icons';

@import '_animations/rotation';

@import '_global/reset';
@import '_global/base';

@import '_elements/typography.scss';
@import '_elements/input';
@import '_elements/textarea';
@import '_elements/checkbox';
@import '_elements/radio';
@import '_elements/toggle';
@import '_elements/chips';
@import '_elements/snackbar';
@import '_elements/label';
@import '_elements/button';
@import '_elements/form';

Импорт в проект

Их папки node_modules/zharikov-ui переносим папку scss и файл styles.scss к себе в проект.