Qela — Admin UI Kit & Layout Builder

Qela — это проект верстки макетов страниц и компонентов. Проект служит для разработки интерфейсов административных панелей, обеспечивая быструю сборку из компонентов и гибкую настройку стилей.

✨ Основные возможности

• Компонентная архитектура
  HTML генерируется через Nunjucks с полным разделением на layout’ы и компоненты.

• Расширяемый CSS
  SCSS-архитектура с возможностью переопределения переменных Bootstrap 5.3 и добавления собственных UI-паттернов.

• Theming
  Поддержка смены цветовых тем на уровне CSS-переменных.

• Иконки
  Настроенный иконочный шрифт Icomoon.

• Custom JavaScript
  Чистый JS (ES6+) для логики, выходящей за рамки стандартных компонентов Bootstrap.

• Автоматизация
  Сборка, оптимизация и live-reload через Gulp.

---

🛠 Стек технологий

• Core: HTML5, SCSS, JavaScript (ES6+).
• Framework: Bootstrap 5.3.
• Templating: Nunjucks.
• Icons: Icomoon.
• Build System: Gulp 4+.

---

🚀 Установка

Убедитесь, что установлен Node.js (LTS).

git clone https://github.com
cd Qela-bootstrap
npm install

---

⚙️ Команды Gulp

Команда	Описание
gulp	Режим разработки: Nunjucks + SCSS, локальный сервер, live-reload
gulp build	Production-сборка в папку /Qela

---

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

Qela-bootstrap/
├── _src/              	# Исходные файлы
│   ├── demo-assets/    # CSS/JS только для index.njk (demo, не входит в сборку)
│   ├── fonts/          # Шрифты и Icomoon (.ttf)
│   ├── html/           # Шаблоны Nunjucks (.njk)
│   │   ├── components/ # Группы компонентов для демонстрации
│   │   ├── data/       # Данные (JSON/Variables)
│   │   └── includes/   # Повторяющиеся элементы (header, footer)
│   ├── img/            # Изображения и ассеты
│   ├── js/             # Скрипты (Bootstrap + Custom)
│   ├── json/           # Конфигурационные файлы иконок Icomoon
│   ├── scss/           # Bootstrap + custom SCSS
│   ├── videos/         # Видео файлы
│   ├── index.njk       # Entry page (GitHub Pages demo)
│   └──	[name].njk 		# Остальные страницы
├── Qela/               # Готовая сборка 
├── .gitignore        
├── gulpfile.js         
└── package.json       	

Note:
filesIndex/ содержит CSS и JavaScript, используемые только для demo-страницы (index.njk).
Эти файлы не входят в финальную сборку UI Kit.

---

🎨 Особенности разработки

• Темы: Все основные цвета вынесены в CSS-переменные, что позволяет адаптировать админку под любой брендбук.
• Гибкость: Проект легко расширяется за счет компонентного подхода Nunjucks. Один раз правите компонент — он обновляется везде.
• Оптимизация: Gulp автоматически обрабатывает ассеты, подготавливая их к использованию в продакшене (сжатие, префиксы).

---

🤝 Автор

Разработчик: [Shupyk Andrii] Связаться: [@MarkupDev]

---

© Все права защищены.