Документация LMS версия 0.1.0

Документация/Оформление/Темы школы

Темы школы

Тема — это ваш CSS, применённый ко всей школе. Здесь про то, куда его писать, как посмотреть результат до применения и как вернуться назад, если получилось не то.

Если вы дошли сюда потому, что уже сломали интерфейс, — вам нужен Аварийный выключатель, и он открывается без входа в настройки.

Тема — сущность, а не поле #

Тем может быть несколько, у каждой имя. Применена к школе всегда одна.

Что умеет раздел «Оформление» в настройках школы:

  • создать тему и дать ей имя — «Фирменный стиль», «Новогодняя»;
  • большое поле CSS с подсветкой и проверкой синтаксиса;
  • предпросмотр до применения — на настоящих экранах школы, а не на абстрактном примере с кнопкой и карточкой;
  • применить к школе;
  • откатить к предыдущей редакции — история правок хранится;
  • вернуться к стандартному оформлению одной кнопкой.

Предпросмотр здесь важнее, чем кажется. Оформление ломается не на кнопке, которую вы правите, а на экране, о котором вы не подумали, — и увидеть это надо до того, как его увидит ученик.

Что писать #

В подавляющем большинстве случаев — переопределение переменных. Одна строка перекрашивает школу целиком:

:root { --brand: #C2185B; }

Из --brand выводятся акцент, наведение, нажатие, бледная подложка, рамка, цвет ссылки и кольцо фокуса — отдельно для светлой и тёмной темы. Поэтому малиновая школа остаётся малиновой и в тёмной теме, а не превращается в бурую.

Дальше — шрифт, скругления, плотность:

:root {
  --brand: #C2185B;
  --font-sans-brand: "PT Sans";
  --radius-card: 0;
  --radius-control: 0;
  --space-4: 12px;
}

Полный перечень с описаниями и значениями по умолчанию — Переменные оформления. Готовый разбор одной задачи до конца — рецепт Перекрасить школу под фирменный стиль.

Чего писать не стоит #

Селекторов по нашей вёрстке. Классы вроде .text-body не являются публичным контрактом, и правило, написанное по ним, сломается при первой же перевёрстке — молча, при обновлении, без ошибки в логах. CSS не падает при неверном селекторе, он просто перестаёт применяться, и вы узнаете об этом от клиента через месяц.

Для случаев «уберите тень у карточки курса» есть якоря — стабильные атрибуты, которые мы обязуемся не менять. Сейчас их в продукте ещё нет, и до тех пор такие задачи честно не решаются: подобранный селектор — это отложенная поломка, а не решение.

Переменных с пометкой «внутренняя». Их мы меняем свободно и без предупреждения.

Цветов состояний. Зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах: иначе ученик и куратор перестают понимать экран с первого взгляда. Эти переменные помечены «не отдаётся».

Граница с блоками кода #

Тема оформляет всю школу. Блок CSS в конструкторе оформляет свою страницу и ограничен ею движком.

Разные инструменты, разные места. Страница, переоформившая админку, — дефект, а не возможность.

Где тема не применяется никогда #

Три места, и все три — те, через которые чинят последствия ошибки:

  1. Экран входа.
  2. Настройки школы и настройки аккаунта, включая сам раздел «Оформление».
  3. Плюс адрес, открывающий любую страницу без темы.

Это и есть аварийный выключатель. Ему отведена отдельная страница — не для объёма, а потому что её ищут в панике и находят поиском.

Эта страница в Markdown