Страница-руководство

Что делаем: превращаем index.html из набора кнопок в страницу-руководство с заголовком и разделом «Варианты».

Зачем нужна живая страница

README читают в репозитории, а смотреть на компонент удобнее в браузере. Дизайнер хочет увидеть кнопку, тестировщик хочет её потыкать. Поэтому у компонента есть страница-руководство: обычный HTML, который подключает настоящий src/style.css. Пример на ней не может разойтись с продуктом: это тот же CSS.

Как устроена страница

• у страницы свой заголовок h1 и короткое описание;
• каждый раздел — section, связанный с заголовком через aria-labelledby, чтобы диктор называл его по имени;
• стили руководства (.guide-demo) лежат в отдельном <style> и не смешиваются со стилями компонента: рамка вокруг примера не должна попасть в продукт.

Раздел «Варианты» уже показывает три кнопки из README. Таблица в README говорит, когда какую брать, а здесь можно на них посмотреть.

Источники

• Элемент section: тематическая группировка с заголовком.
• Элемент link: подключение таблицы стилей.
• aria-labelledby: имя элемента берётся из другого элемента.

Проверьте себя