Кастомные CSS-классы

Featherlight — минималистичная библиотека для реализации lightbox-окон на JavaScript с опорой на jQuery. Одним из ключевых механизмов её кастомизации является система CSS-классов, позволяющая полностью переопределять внешний вид и поведение модального окна без вмешательства во внутренний код библиотеки.

По умолчанию Featherlight добавляет на DOM-элементы предопределённые классы (.featherlight, .featherlight-content, .featherlight-inner и др.), однако архитектура библиотеки допускает расширение и замену этих классов через настройки и HTML-атрибуты.

Базовая структура DOM и стандартные классы

При открытии lightbox Featherlight формирует следующую иерархию элементов:

<div class="featherlight">
  <div class="featherlight-content">
    <span class="featherlight-close-icon featherlight-close">✕</span>
    <div class="featherlight-inner">
      <!-- контент -->
    </div>
  </div>
</div>

Ключевые классы:

  • .featherlight — корневой контейнер (оверлей)
  • .featherlight-content — обёртка модального окна
  • .featherlight-inner — контейнер пользовательского контента
  • .featherlight-close — кнопка закрытия

Все визуальные аспекты (позиционирование, фон, анимации, размеры) реализуются исключительно через CSS, что делает кастомные классы центральным инструментом стилизации.

Добавление пользовательского класса через JavaScript

Featherlight поддерживает параметр className, который добавляет произвольный CSS-класс к корневому элементу lightbox.

Пример инициализации:

$.featherlight('#modal-content', {
  className: 'custom-lightbox'
});

В результате корневой элемент будет выглядеть так:

<div class="featherlight custom-lightbox">

Это позволяет изолировать стили конкретного окна, не затрагивая остальные экземпляры Featherlight.

Использование data-featherlight-class в HTML

Альтернативный способ — декларативное задание класса через HTML-атрибут:

<a href="#modal-content"
   data-featherlight="inline"
   data-featherlight-class="profile-modal">
  Открыть
</a>

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

Сценарии применения кастомных классов

Различные типы модальных окон

Часто возникает необходимость визуально различать типы окон:

  • галерея изображений
  • форма авторизации
  • подтверждение действия
  • информационное сообщение

Каждому типу назначается собственный класс:

.featherlight.gallery-modal .featherlight-content {
  max-width: 90vw;
  background: #000;
}

.featherlight.auth-modal .featherlight-content {
  max-width: 400px;
  border-radius: 12px;
}

Переопределение размеров и адаптивности

Стандартные размеры Featherlight универсальны, но не всегда подходят под конкретный интерфейс. Кастомный класс позволяет задать точные ограничения:

.featherlight.wide-modal .featherlight-content {
  width: 1200px;
  max-width: 95%;
}

При этом глобальные стили библиотеки остаются неизменными.

Управление фоном и оверлеем

Корневой контейнер .featherlight отвечает за затемнение экрана. Через кастомный класс можно изменить визуальный акцент:

.featherlight.dark-overlay {
  background: rgba(0, 0, 0, 0.9);
}

.featherlight.light-overlay {
  background: rgba(255, 255, 255, 0.8);
}

Стилизация кнопки закрытия

Кнопка закрытия по умолчанию — текстовый символ. Через кастомный класс можно:

  • изменить позицию
  • заменить иконку
  • скрыть элемент

Пример:

.featherlight.custom-lightbox .featherlight-close {
  top: 16px;
  right: 16px;
  font-size: 24px;
  color: #333;
}

.featherlight.no-close .featherlight-close {
  display: none;
}

Анимации и переходы

Featherlight не навязывает анимации, но полностью поддерживает CSS-переходы. Кастомные классы позволяют реализовать различные эффекты появления:

.featherlight.fade-in .featherlight-content {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.featherlight.fade-in.featherlight-open .featherlight-content {
  opacity: 1;
  transform: scale(1);
}

Класс .featherlight-open добавляется библиотекой автоматически, что удобно для анимаций входа.

Изоляция стилей и предотвращение конфликтов

Рекомендуется всегда привязывать кастомные стили к корневому классу Featherlight:

.featherlight.custom-lightbox .featherlight-inner p {
  line-height: 1.6;
}

Такой подход:

  • предотвращает утечки стилей
  • исключает влияние на основной контент страницы
  • упрощает поддержку и рефакторинг

Комбинирование нескольких классов

Featherlight позволяет передавать несколько классов одновременно:

$.featherlight(content, {
  className: 'modal-large modal-dark'
});

Это даёт возможность строить модульную систему стилей, где каждый класс отвечает за одну задачу: размер, цветовую схему, анимацию.

Практика именования кастомных классов

Рекомендуемые принципы:

  • использовать префиксы (modal-, fl-, lightbox-)
  • избегать общих названий (active, open)
  • отражать назначение, а не внешний вид

Пример удачного именования:

.featherlight.modal-confirm { }
.featherlight.modal-profile { }
.featherlight.modal-gallery { }

Связь кастомных классов с JavaScript-логикой

Класс, добавленный через className, доступен для JavaScript-логики:

$(document).on('featherlight:opened', function(event) {
  if ($(event.currentTarget).hasClass('modal-gallery')) {
    // логика галереи
  }
});

Это позволяет связывать визуальное оформление и поведение без дополнительных флагов и конфигураций.

Итоговая роль кастомных CSS-классов

Кастомные CSS-классы в Featherlight — основной механизм адаптации библиотеки под конкретный проект. Они обеспечивают:

  • полную свободу визуального оформления
  • изоляцию стилей
  • масштабируемость интерфейса
  • чистое разделение логики и представления

Грамотное использование этого механизма позволяет применять Featherlight как универсальную модальную систему в проектах любой сложности — от лендингов до крупных интерфейсных приложений.

Оглавление