В этом репозитории находится мое решение тестового задания «Реализуйте дизайн-систему» для 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