shri-t1-egor
v1.0.2
Published
В этом репозитории находятся материалы тестового задания «Реализуйте дизайн-систему» для [16-й Школы разработки интерфейсов](https://yandex.ru/promo/academy/shri) (зима 2020, Москва).
Downloads
7
Readme
Задание 1. Реализуйте дизайн-систему
В этом репозитории находятся материалы тестового задания «Реализуйте дизайн-систему» для 16-й Школы разработки интерфейсов (зима 2020, Москва).
Задание
Дизайн-система — это правила построения интерфейса. Благодаря им интерфейс будет консистентным и органичным. Вам нужно реализовать блоки дизайн-системы.
Дизайн-система, описанная в этом задании, предназначена для конструирования прототипов, в которых элементы интерфейса обозначены схематически, а вместо реальных данных — заглушки.
Правила дизайн-системы описаны в терминах методологии БЭМ. Для обозначения сущностей интерфейса используется соглашение по именованию.
Что нужно сделать:
- Реализовать базовые блоки дизайн-системы.
- Реализовать контентные блоки.
- Cобрать несколько страниц из разных блоков.
Как проверить
В каталоге stub содержится заготовка проекта для проверки правильности выполнения задания.
Каталог pages проекта содержит шаблоны страниц в формате BEMJSON.
В каталог build необходимо поместить собранные файлы style.css и index.js.
Для запуска проекта необходимо установить зависимости и выполнить команду npm start. По умолчанию приложение слушает порт 3000.
Чтобы увидеть собранные страницы, откройте в браузере страницы index и product.
Результат
В качестве результата выполнения задания предоставьте исходный код и собранные бандлы с реализацией дизайн-системы.
В корне репозитория должен находиться каталог build с файлами style.css, script.js. Размер каждого файла — не более 1 МБ. style.css — стили для всех блоков и модификаторов. script.js — код, который обеспечивает интерактивность блоков. Он будет запускаться один раз после загрузки страницы. События на блоках должны делегироваться в один обработчик на теге <body>