Интерактивный тренажёр

Документация для верстальщиков

Курс о том, как сделать курс на этом движке, и сам им сделан. Читаете урок, правите код в редакторе и сразу видите результат в превью.

Части курса

01 Часть 01

README компонента

Описываем кнопку так, чтобы её мог взять в работу кто угодно: назначение, варианты, состояния, пример и запреты.

4 урока
Что внутри

Цель: Написать README компонента и комментарии в CSS, которые отвечают на вопрос «почему».

Открыть часть
Все уроки части (4)
  1. 1. Зачем нужен README
  2. 2. Варианты и состояния
  3. 3. Пример и запреты
  4. 4. Комментарии в CSS
02 Часть 02

Живое руководство

Собираем страницу-руководство: примеры с кодом, таблица токенов и все состояния компонента.

6 уроков
Что внутри

Цель: Собрать страницу, по которой дизайнер и разработчик сверяются с компонентом, не открывая исходники.

Открыть часть
Все уроки части (6)
  1. 1. Страница-руководство
  2. 2. Код рядом с примером
  3. 3. Токены вместо чисел
  4. 4. Таблица токенов
  5. 5. Классы для показа состояний
  6. 6. Все состояния на странице
03 Часть 03

Передача разработчикам

Контракт компонента, чек-лист доступности, журнал изменений и устаревание без ломки.

6 уроков
Что внутри

Цель: Договориться с разработчиками, на что можно опираться, и вести журнал так, чтобы обновление не было сюрпризом.

Открыть часть
Все уроки части (6)
  1. 1. Контракт для разработки
  2. 2. Чек-лист доступности
  3. 3. Журнал изменений
  4. 4. Устаревание без ломки
  5. 5. Выпуск версии
  6. 6. Ревью документации