Индикатор breakpoint на CSS и SCSS

Индикатор текущего брейкпоинта Bootstrap 5. Показывает в правом верхнем углу страницы активный брейкпоинт: XS, SM, MD, LG, XL или XXL.

Работает без JavaScript — только CSS и SCSS. Использует псевдоэлемент body:before и медиазапросы min-width.

Возможности

• Поддержка брейкпоинтов Bootstrap 5:
  • xs — 0
  • sm — 576px
  • md — 768px
  • lg — 992px
  • xl — 1200px
  • xxl — 1400px
• Разные цвета для каждого брейкпоинта.
• Не перехватывает клики (pointer-events: none).
• Легко настраивается через SCSS-переменные.
• Есть готовый скомпилированный CSS.

Подключение

1. Готовый CSS

Скопируйте файл breakpoint-indicator.css в проект и подключите его после основных стилей:

<link rel="stylesheet" href="breakpoint-indicator.css">

Вариант 2. SCSS

Импортируйте партиал в свой SCSS-файл:

@import "breakpoint-indicator";

или через @use

@use "breakpoint-indicator";

После подключения индикатор появится автоматически в правом верхнем углу. Никаких дополнительных классов или разметки добавлять не нужно.

⚠️ Важно Если у вас уже используется body:before для других целей, возможен конфликт.