В этом репозитории находится мое решение тестового задания «Реализуйте дизайн-систему» для 15-й Школы разработки интерфейсов (осень 2019, Москва).
Правила дизайн-системы описываются в терминах методологии БЭМ. Для обозначения сущностей интерфейса используется соглашение по именованию.
- Yarn
- Webpack
- PostCSS
- Autoprefixer
- Mocha
- Karma
- Chai
- Eslint
- Prettier
- Stylelint
- Babel
- Browserslist (default)
Для использования команды yarn
необходимо установить Yarn
yarn install
- установка зависимостей
yarn dev
- запустить проект локально. Адрес локального сервера http://localhost:8080/[pagename]
yarn build
- сборка проекта.
yarn test
- запуск тестов
├── build - собранные файлы проекта
├── node_modules - node.js пакеты
├── res - дополнительные ресурсы, собираются в папку build*
│ └── img
├── src
│ ├── templates
│ │ ├── collect.html
│ │ ├── content.html
│ │ ├── content-blocks.html
│ │ ├── index.html
│ │ ├── product.html
│ │ └── template-layout.js - разметка страниц в формате BEMJSON
│ ├── script.js - код реализующий интерактивность блоков
│ ├── style.css - стили для всех блоков и модификаторов
│ └── template-engine.js - функция шаблонизации
├── test
│ └── test.js - набор тестов для шаблонизатора
├── .editroconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── .stylelintrc
├── karma.conf.js - конфигурация тест раннера
├── package.json
├── postcss.config.js
├── README.md
├── wallaby.js
├── webpack.common.js - основная конфигурация сборщика
├── webpack.dev.js - конфигурация для разработки
├── webpack.prod.js - для полной сборки проекта
├── yarn.lock
В проекте используется пакетный менеджер Yarn из за его надежности и скорости установки пакетов.
Собирается проект при помощи Webpack из за его популярности, большого количества дополнительных инструментов и обширной документации.
За качеством кода слежу при помощи stylelint для css, eslint и prettier для JavaScript. .editorconfig контролирует кавычки, отступы и переносы строк.
Основа стилевого оформления блоков дизайн системы базируется на методологии БЭМ и кастомных свойств CSS. Для упрощения написания стилей используется PostCSS и плагины
- autoprefixer - для автоматической расстановки префиксов в слабо поддерживаемых браузерами свойствах
- postcss-nested - для возможности использовать
&
при написании модификаторов блоков/элементов.
Шаблонизатор это переписанная в синтаксисе ES6 версия этого репозитория. Используются только самые необходимые функции. Шаблонизация происходит на клиенте.
Принцип работы.
В импортируемую функцию из файла template-engine.js
передается объект в синтаксисе BEMJSON. В файле src/templates/template-layout.js
пример работы функции и все необходимые демонстрационные страницы. test/test.js
тесты для шаблонизатора.
Для тестирования используется тест фреймворк mocha в связке с karma, chai и babel для ES6 модулей. Можно использовать wallaby.js.
MIT