"Ванильный" (без фреймворков) шаблон с Tailwind и иконками

Посмотреть.

Установка

npx create-yababay-app <app-name>
cd <app-name>
npm i
npm run dev

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

Проект содержит минимум JavaScript. Единственная функция находится в модуле ./src/menu.js. Она управляет показом меню на устройствах с узким экраном.

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

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

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

В шаблоне задействован плагин, позволяющий использовать иконки Bootstrap. В этом наборе имеется более 1500 тысяч векторных изображений. Чтобы не хранить их все в файловом пространстве проекта, следует выбрать необходимые строки в закомментированном разделе файла ./src/css/icons.css и перенести их в верхнюю часть.

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

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

и т.п.