my-layout

CSS-основа для секций, адаптивных сеток, изображений и элементов формы.

Примеры и playground

Подключение библиотеки

Готовый файл: dist/styles/core-css.css.

<link rel="stylesheet" href="dist/styles/core-css.css">

Скрипт dist/scripts/my-layout.js нужен для расчёта высоты окна, фиксированных панелей и боковой колонки. Для секций, сеток и элементов формы достаточно CSS.

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

Нужен Node.js 22.12 или новее.

npm ci

Команды

Режим разработки

npm run dev

Vite запускает playground с исходными стилями библиотеки и обновляет страницу при изменениях.

Адрес: http://localhost:8000/playground/.

В playground есть шесть примеров: каталог, обложка, журнал, подписка, пропорции изображений и базовые элементы. Можно менять фон, ширину, сетку и независимые вертикальные отступы для десктопа и мобильного, копировать HTML и CSS примера, делиться ссылкой с настройками.

Playground использует оформление Signal с настройками слева. По умолчанию включена тёмная тема; в верхней панели можно выбрать светлую. Выбор сохраняется в браузере, а параметр ?theme=dark в адресе имеет приоритет над сохранённой настройкой. Тема применяется к примерам внутри iframe и к CSS для копирования. При переключении темы сохраняются заданные пользователем параметры секции.

Предпросмотр работает в отдельном iframe. Режимы 768 и 390 px меняют ширину его окна, поэтому медиазапросы библиотеки срабатывают по-настоящему. Если область просмотра уже выбранного размера, пример уменьшается с указанием масштаба.

Чтобы перенести пример, подключите библиотеку, скопируйте HTML и CSS из соответствующих вкладок, замените пути к фотографиям ../static/ на свои. Действия корзины и подписки демонстрационные: их обработчики находятся в playground/preview.js и не входят в копируемый HTML.

Собрать библиотеку

npm run build

Сборка Webpack обновляет стили и скрипты в dist/.

Собрать GitHub Pages

npm run build:pages

Команда собирает библиотеку и создаёт корневой index.html из playground/index.html, меняя относительные пути. Исходники демостраницы общие для локального playground и GitHub Pages; корневой HTML вручную не редактируется.

GitHub Pages этого репозитория публикует корень ветки main. Для обновления сайта в коммит должны попасть index.html, playground/, static/ и собранный dist/. После отправки изменений в main GitHub опубликует новую страницу.

Файловая структура

• Библиотека

  • Скрипты src/scripts
  • Стили src/styles

• Песочница

  • Шаблон страницы playground/index.html
  • Примеры, HTML и стили примеров playground/examples.js
  • Интерфейс и настройки playground/playground.js, playground/playground.css
  • Оформление Signal playground/signal.css, переключение темы playground/appearance.js
  • Палитры примеров playground/themes.js
  • Изолированный предпросмотр playground/preview.html, playground/preview.js
  • Статические файлы static/

Вертикальные отступы виджета в пикселях

Для внутренних отступов .layout__content можно задать независимые значения на обёртке виджета:

<section class="layout" style="--layout-pt-desktop-px: 112px; --layout-pb-desktop-px: 112px; --layout-pt-mobile-px: 64px; --layout-pb-mobile-px: 64px;">
  <div class="layout__content">...</div>
</section>

Все четыре переменные необязательны. На десктопе используются --layout-pt-desktop-px и --layout-pb-desktop-px, а при их отсутствии — прежние --layout-pt и --layout-pb. На мобильном сначала используются --layout-pt-mobile-px и --layout-pb-mobile-px, затем соответствующие десктопные значения в пикселях, затем прежние отступы с коэффициентом --layout-adaptive-vertical-indents-factor-decrease. Пиксельные значения не умножаются на коэффициент. При коэффициенте по умолчанию 4 старые --layout-pt и --layout-pb рассчитаны на vw; для rem или px нужен явно сниженный коэффициент на корне виджета. Внешние отступы --layout-mt и --layout-mb работают по-прежнему.