/task-1

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

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

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

Задание

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

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

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

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

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

  1. Реализовать базовые блоки дизайн-системы
  2. Реализовать контентные блоки
  3. Написать функцию шаблонизации
  4. Используя разные блоки собрать несколько страниц

Результат

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

В корне репозитория должен находиться каталог /build с файлами style.css, script.js, template-engine.js. Размер каждого файла — не более 1МБ.

  • style.css — стили для всех блоков и модификаторов.

  • script.js — код, который обеспечивает интерактивность блоков. Он будет запускаться один раз после загрузки страницы. События на блоках должны делегироваться в один обработчик на теге <body>.

  • template-engine.js — функция шаблонизации.

    /**
    * @param  {object} obj — Структура блоков интерфейса в формате BEMJSON
    * @return {string} HTML разметка страницы
    */
    export default function (obj) {
       // ...
    }

    Результирующая разметка должна содержать только контент страницы и не должна содержать тэги html, head, body.