"Ванильный" шаблон с Tailwind и иконками

Посмотреть в браузере.

Как вести разработку

• выполните в терминале npm run dev; запустится процесс обработки стилей утилитой tailwind;
• запустите live server в среде VS Code или другой локальный сервер, обслуживающий каталог docs;
• правьте стили в каталоге ./src; изменения будут отображаться в браузере автоматически (без перезагрузки страницы);
• при необходимости правьте ./docs/index.html и другие файлы.

Структура проекта

Проект почти не содержит JavaScript. Единственный модуль - [./docs/index.js](blob/main/docs/index.js) отвечает за показ меню на маленьких экранах. Он не существенен для понимания данного дизайна и даже может быть удален из него.

Основной акцент в этом шаблоне сделан на управлении стилями. Задействован фреймворк Tailwind. Назначение файлов:

• ./src/css/variables.css
• ./src/css/tw-base.css - слой тэгов;
• ./src/css/tw-components.css - слой компонентов;
• ./src/css/tw-utilites.css - слой утилит;
• ./src/css/icons.css - иконки Bootstrap;
• ./src/css/header.css - оформление заголовка;
• ./src/css/index.css - результирующий файл (импорт всех вышеперечисленных).

Работа с иконками

В html-код иконки вставляются стандартным способом, например:

<i class="bi bi-bell"></i>
<i class="bi bi-github"></i>

и т.п.

При необходимости добавляйте другие иконки (svg-файлы) из набора Bootstrap или любого другого. Образец см. в файле [./src/css/icons.css](blob/main/src/css/icons.css).