Breakpoints и адаптивность

Breakpoints в Carbon Components Svelte играют ключевую роль в построении адаптивного интерфейса. Они определяют точки останова, при которых изменяется разметка и поведение компонентов в зависимости от размера экрана. Библиотека следует концепции mobile-first, что означает, что базовые стили рассчитаны на мобильные устройства, а более широкие экраны обрабатываются через медиа-запросы.

Основные точки останова

Carbon Components Svelte использует стандартный набор breakpoints, который соответствует следующим значениям:

  • sm (small) — до 320px
  • md (medium) — от 321px до 672px
  • lg (large) — от 673px до 1056px
  • xl (extra-large) — от 1057px до 1312px
  • 2xl (2x extra-large) — от 1313px и выше

Эти значения задаются в переменных SASS и используются при генерации CSS-классов для компонентов. Они позволяют гибко управлять шириной контейнеров, видимостью элементов и структурой сетки.

Использование Breakpoints в компонентах

В Carbon Components Svelte каждый компонент может адаптироваться под разные размеры экрана. Примеры включают:

  1. Grid и Column Компонент Grid совместно с Column позволяет строить адаптивные сетки. Для каждой колонки можно задавать ширину для определенного breakpoint через пропсы:

    
  
    Контент колонки

    Здесь колонка будет занимать 4 единицы на малых экранах, 8 на средних и полностью ширину контейнера на больших.

  2. Скрытие и отображение элементов Компоненты поддерживают управление видимостью через специальные классы. Например, bx--hide-sm скрывает элемент на малых экранах, а bx--show-lg делает его видимым только на больших.

  3. Модальные окна и панели Компоненты типа Modal и SidePanel используют медиазапросы для автоматического изменения размеров и позиционирования. Это позволяет, например, на мобильных устройствах отображать модальное окно на весь экран, а на десктопе ограничивать его фиксированной шириной.

Работа с адаптивными стилями

Carbon Components Svelte строится на SCSS-переменных, что позволяет создавать кастомные точки останова. Для этого можно изменить переменные в файле _carbon-overrides.scss:

$carbon--breakpoints: (
  sm: 320px,
  md: 600px,
  lg: 1024px,
  xl: 1440px,
  2xl: 1920px
);

После этого пересборка стилей обновит все компоненты с новыми точками останова. Такой подход гарантирует согласованность адаптивного дизайна по всей библиотеке.

Адаптивная типографика и отступы

Carbon Components Svelte применяет fluid typography и адаптивные отступы с использованием rem и em, что обеспечивает плавное масштабирование текста и элементов при изменении ширины экрана. Например, класс bx--type-body-short-01 автоматически подстраивается под breakpoint, изменяя размер шрифта и межстрочный интервал.

Практические советы по адаптивности

  • Для сеток и колонок использовать комбинацию sm, md, lg пропсов, чтобы избежать жесткой фиксации ширины.
  • Минимизировать скрытие контента через классы bx--hide-*, вместо этого лучше изменять структуру и порядок элементов с помощью Grid и Column.
  • Использовать переменные breakpoints при кастомизации тем, чтобы изменения применялись ко всем компонентам.
  • Проверять поведение компонентов на разных разрешениях через DevTools, так как медиазапросы Carbon работают не только на ширину окна, но и на размеры контейнеров в некоторых компонентах.

Интеграция с Svelte

В Svelte можно динамически реагировать на изменение ширины экрана, используя reactive statements и window.innerWidth:



{#if isMobile}
  
Мобильная версия

{:else}
  
Десктопная версия

{/if}

Это позволяет дополнительно адаптировать логику компонентов вне стандартных breakpoints Carbon.

Итоговая структура адаптивного интерфейса

  • Сетка (Grid + Column) — базовый каркас.
  • Компоненты с поддержкой breakpoints — модальные окна, панели, формы.
  • Адаптивная типографика и отступы — через SCSS-переменные.
  • Динамическая логика Svelte — для дополнительной адаптации и реактивного поведения.

Такой подход обеспечивает полное соответствие принципам mobile-first, гибкость при кастомизации и поддержку различных устройств без дублирования кода.

Оглавление