Corp/backend/static

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 (если еще не установлен)

winget install OpenJS.NodeJS.LTS

2. Установка зависимостей

cd backend/static
npm install

Разработка

Компиляция Bootstrap

Однократная сборка:

npm run build

Режим разработки (автоматическая пересборка при изменениях):

npm run dev

Изменение системы отступов

Все настройки отступов находятся в файле scss/custom-bootstrap.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)
);

После изменений запустите:

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 команды не работают

Решение:

# Добавьте 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