Архітектура CSS.
Вміст конструктора це розмітка Bootstrap 5 плюс малий набір класів az-. Знання того, які класи з’являються на опублікованих сторінках, а які
існують лише поки працює редактор, каже вам, на що може
цілитися CSS вашої теми.
Класи на опублікованих сторінках
Макет
| Розмітка | Класи |
|---|---|
| Розділ | az-section, з container або container-fluid всередині |
| Рядок | Bootstrap row |
| Колонка | Класи Bootstrap col-*, по одному на брейкпоїнт |
| Елемент вмісту | Один клас на тип елемента, як-от az-text, az-image або az-images-carousel; Social Links використовує st-social. Більшість також несуть az-element; Button і Image ні |
Вміст, збережений старішими версіями, досі може нести az-row і
az-column. Редактор їх розпізнає й опускає наступного разу,
коли рядок або колонка зберігається.
Модифікатори
| Клас | Встановлено |
|---|---|
az-row--equal-height |
Equal-height columns на рядку; без нього рядок отримує align-items-start |
az-row--reverse-horizontal |
Mirror row на рядку |
az-util-vertical-centering |
Vertical centering на розділі або колонці |
Сітка Bootstrap
Колонки використовують класи сітки Bootstrap:
| Клас | Ширина |
|---|---|
col |
Ділить рядок порівну |
col-6 |
50% |
col-md-4 |
33% від 768 px |
col-lg-3 |
25% від 992 px |
Написання власного CSS
- Обмежуйте правила для конструктора до
.az-sectionабо до класів типів, як-от.az-textабо.az-button..az-elementпропускає Button і Image. - Не перевизначайте класи сітки Bootstrap; редактор встановлює ширину колонок через них.
- Для разової стилізації додайте клас у полі HTML classes елемента й стилізуйте цей клас.
Класи лише редактора
Ці класи існують лише поки працює редактор, тож опубліковані сторінки ніколи їм не відповідають:
| Клас | Де |
|---|---|
dxpr-builder-ui |
Кожен шматок інтерфейсу редактора: панелі керування, меню, діалогові вікна |
controls |
Панель керування елемента |
dxpr-editor |
Контейнер поля в кожному режимі перегляду, крім Preview |
az-ctnr |
Контейнер поля, коли редактор запустився |
az-sortable-placeholder |
Заповнювач скидання, поки ви перетягуєте елемент |
Власні стилі редактора знаходяться в dxpr_builder/css/dxpr_builder_backend.css,
побудованому з dxpr_builder/sass/dxpr_builder_backend.scss.
Версія Bootstrap
Конструктор пише розмітку Bootstrap 5. Якщо ваша тема не завантажує Bootstrap 5, установіть Sideload Bootstrap files у Bootstrap 5 у DXPR Studio > DXPR Builder > General Settings, у розділі Bootstrap. None (theme provides Bootstrap) припускає, що ваша тема його завантажує.