126 lines
3.8 KiB
Markdown
126 lines
3.8 KiB
Markdown
# Static Assets - Custom Bootstrap
|
||
|
||
Этот каталог содержит статические файлы проекта с кастомизированным Bootstrap.
|
||
|
||
## Структура
|
||
|
||
```
|
||
static/
|
||
├── css/ # Скомпилированные CSS файлы
|
||
│ ├── bootstrap-custom.css # Кастомный Bootstrap (генерируется)
|
||
│ ├── variables.css # CSS переменные проекта
|
||
│ └── components/ # Компоненты приложения
|
||
├── scss/ # SCSS исходники
|
||
│ └── custom-bootstrap.scss # Конфигурация Bootstrap
|
||
├── node_modules/ # npm зависимости (игнорируется в git)
|
||
└── package.json # npm конфигурация
|
||
```
|
||
|
||
## Настройка окружения
|
||
|
||
### 1. Установка Node.js (если еще не установлен)
|
||
|
||
```bash
|
||
winget install OpenJS.NodeJS.LTS
|
||
```
|
||
|
||
### 2. Установка зависимостей
|
||
|
||
```bash
|
||
cd backend/static
|
||
npm install
|
||
```
|
||
|
||
## Разработка
|
||
|
||
### Компиляция Bootstrap
|
||
|
||
**Однократная сборка:**
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
**Режим разработки (автоматическая пересборка при изменениях):**
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### Изменение системы отступов
|
||
|
||
Все настройки отступов находятся в файле `scss/custom-bootstrap.scss`:
|
||
|
||
```scss
|
||
// Базовая шкала отступов (8px grid)
|
||
$spacers: (
|
||
0: 0, // 0px
|
||
1: 0.5rem, // 8px - var(--space-1)
|
||
2: 1rem, // 16px - var(--space-2)
|
||
3: 1.5rem, // 24px - var(--space-3)
|
||
4: 2rem, // 32px - var(--space-4)
|
||
5: 3rem, // 48px - var(--space-5)
|
||
);
|
||
```
|
||
|
||
После изменений запустите:
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
## Система отступов
|
||
|
||
Проект использует унифицированную 8px сетку:
|
||
|
||
- `--space-1` (0.5rem / 8px) - минимальный отступ
|
||
- `--space-2` (1rem / 16px) - стандартный отступ
|
||
- `--space-3` (1.5rem / 24px) - секции
|
||
- `--space-4` (2rem / 32px) - блоки
|
||
- `--space-5` (3rem / 48px) - большие разделители
|
||
|
||
### Bootstrap классы
|
||
|
||
Все Bootstrap utility классы теперь используют нашу сетку:
|
||
|
||
- `.p-1`, `.m-1` = 8px
|
||
- `.p-2`, `.m-2` = 16px
|
||
- `.p-3`, `.m-3` = 24px
|
||
- `.p-4`, `.m-4` = 32px
|
||
- `.p-5`, `.m-5` = 48px
|
||
|
||
То же самое для `.px-*`, `.py-*`, `.mx-*`, `.my-*`, `.gap-*` и т.д.
|
||
|
||
## Компоненты Bootstrap
|
||
|
||
Все компоненты настроены на использование нашей системы:
|
||
|
||
- Cards → padding: 16px
|
||
- Buttons → padding: 8px 16px
|
||
- Forms → padding: 8px 16px
|
||
- Modals → padding: 16px
|
||
- Alerts → padding: 16px
|
||
- и т.д.
|
||
|
||
## Troubleshooting
|
||
|
||
**Проблема:** Изменения в SCSS не применяются
|
||
|
||
**Решение:**
|
||
1. Проверьте, что `npm run build` завершился успешно
|
||
2. Очистите кэш браузера (Ctrl+Shift+R)
|
||
3. Проверьте, что в `base.html` подключен `bootstrap-custom.css`
|
||
|
||
**Проблема:** npm команды не работают
|
||
|
||
**Решение:**
|
||
```bash
|
||
# Добавьте Node.js в PATH для текущей сессии
|
||
export PATH="/c/Program Files/nodejs:$PATH"
|
||
|
||
# Или перезапустите терминал после установки Node.js
|
||
```
|
||
|
||
## Дополнительная настройка
|
||
|
||
Для более глубокой кастомизации Bootstrap см. документацию:
|
||
- https://getbootstrap.com/docs/5.3/customize/sass/
|
||
- https://sass-lang.com/documentation
|