Верстка на Профтеме

Профтема предназначена для быстрой и простой верстки заданного дизайна. Для успешной работы вам понадобятся знания html, css, в т.ч. grid и flex, возможно js, умение их применять, знание sass  и понимание общего устройства системы (см. предыдущие разделы документации.

Прежде, чем начать верстку отключите сжатие CSS и скриптов, чтобы вам было легко понять какой файл стилей влияет на тот или иной элемент. Админ — Конфигурация — Разработка — Производительность.

HTML

Система генерирует свой базовый html, но можно его корректировать местами.

В шаблоне

Админ — Внешний вид — Настройки — Название темы — Стили.

Здесь вы можете задавать регионы страницы (шапки, колнки, подвалы), причем в админке можно будет перености блоки из региона в регион (Админ — Структура — Блоки). По умолчанию уже создано достаточное количество регионов.

Админ — Внешний вид — Настройки — Название темы — Темплейты.

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

В блоках

В пользовательских блоках есть текстовое поле с визуальным редактором. Его можно отключить выбрав формат текста Full. Зайти в настройки блока можно наведя на блок мышь и кликнув на шестеренку или из раздела блоки: Админ — Структура — Блоки.

В списках

В настройках отображения списков и информеров,  в настройках поля Материалы есть упрощенный режим отображения. Он минимизирует количество html- элементов списка.

В типах материалов 

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

Админ — Структура — Типы содержимого — Ваш тип — Отображение — Полное отображение

Здесь вы можете показать или скрыть поля для конкретного типа отображения.

Админ — Структура — Типы содержимого — Ваш тип — Отображение — Полное отображение — Шаблон

В шаблоне вы можете обернуть поля (в виде сниппетов) необходимыми html тегами.

CSS стили

Стили модулей

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

Основной набор стилей

В Профтеме есть свой набор стилей Админ — Внешний вид — Настройки — Название темы — Стили.

Стили типов материалов

В Админ — Структура — Типы содержимого — Ваш тип — Отображение — Полное отображение — Шаблон

можно писать стили относящиеся только к конкретному представлению конкретного типа материала. Это удобно тем, что вы всегда знаете где искать стили, а ещё здесь есть защита - вы не сможете применить стили к вышележащим html-тегам.

В пользовательских блоках

Возможно прописывать css прямо в html, но так делать не следует, чтобы потом не запутаться.

Логика разбиения стилей

variables.scss — Описывает значения основных переменных, которые чаще всего используются при кастомизации дизайна

fonts.scss — здесь подключаются шрифты.

elements.scss — описываются все стандартные элементы: кнопки, поля и т.д.

elements-btn.scss — отдельно выделенный блок элементов для облегчения восприятия.

Основные стили разбиваются на файлы логически по иерархии:

layout.scss — формируем grid-сетку для десктопов.

regions.scss — здесь располагается код для управления содержимым регионов. Для того, чтобы не усложнять layout.scss. Здесь достаточно возможностей flex.

catalogs.scss — стили для списков.

blocks.scss — стили для работы с блоками.

navigations.scss — отдельно различные виды меню.

custom.scss — для мусора, если нужно по быстренькому или не портить другие файлы. На самом деле это плохо.

Дополнительные файлы стилей:

reset.scss — обнуляет не только браузеры, но и базовые стили модулей.

admin.scss — содержит стили для режима редактирования.

-----

layout_mob.scss — формирует грид-сетку  для мобильных телефонов.

Дополнительные возможности

Админ — Внешний вид — Создать тему