/shri-2020-task-1

Задание 1. Реализуйте дизайн-систему — ШРИ, Москва, 2020

Primary LanguageJavaScript

Задание 1. Реализуйте дизайн-систему

В этом репозитории находятся материалы тестового задания «Реализуйте дизайн-систему» для 16-й Школы разработки интерфейсов (зима 2020, Москва).

Задание

Дизайн-система — это правила построения интерфейса. Благодаря им интерфейс будет консистентным и органичным. Вам нужно реализовать блоки дизайн-системы.

Дизайн-система, описанная в этом задании, предназначена для конструирования прототипов, в которых элементы интерфейса обозначены схематически, а вместо реальных данных — заглушки.

пример страницы

Правила дизайн-системы описаны в терминах методологии БЭМ. Для обозначения сущностей интерфейса используется соглашение по именованию.

Что нужно сделать:

  1. Реализовать базовые блоки дизайн-системы.
  2. Реализовать контентные блоки.
  3. Cобрать несколько страниц из разных блоков.

Как проверить

В каталоге stub содержится заготовка проекта для проверки правильности выполнения задания. Каталог pages проекта содержит шаблоны страниц в формате BEMJSON. В каталог build необходимо поместить собранные файлы style.css и script.js.

Для запуска проекта необходимо установить зависимости и выполнить команду npm start. По умолчанию приложение слушает порт 3000.

Чтобы увидеть собранные страницы, откройте в браузере страницы index и product.

Результат

В качестве результата выполнения задания предоставьте исходный код и собранные бандлы с реализацией дизайн-системы.

В корне репозитория должен находиться каталог build с файлами style.css, script.js. Размер каждого файла — не более 1 МБ. style.css — стили для всех блоков и модификаторов. script.js — код, который обеспечивает интерактивность блоков. Он будет запускаться один раз после загрузки страницы. События на блоках должны делегироваться в один обработчик на теге <body>