Albireo CMS 2025.01.17
© Albireo CMS, 2020-2025

Работа с CSS в Albireo CMS

Albireo CMS поддерживает все варианты работы с CSS.

  • Подключение css-файла в секцию HEAD
  • Подключение css-файла в конце BODY
  • Подключение css-файла как STYLE
  • Вставка произвольных css-правил в HEAD
  • Создание root-правил

На уровне шаблона поддерживается более 11 полей специально для работы с CSS.

Общие концепции

Шаблон Albireo CMS базируется на современных методах вёрстки. Прежде чем внедрять свой css-код, узнайте о том, какие концепции лежат в основе современной верстки сайтов.

Прежде всего нужно понять, что в основе лежит css-фреймворк Berry CSS. Даже если вы захотите его сменить на другой, то всё-равно потратьте немного времени, чтобы понять как он устроен. Поскольку его устройство достаточно типично для всех современных css-фреймворков. Поэтому, прежде чем его менять, узнайте его возможности, чтобы корректно адаптировать шаблон к другому фреймворку.

CSS-фреймворк используется для того, чтобы выполнять вёрстку сайта не с нуля, а на базе уже разработанных классов. Berry CSS — это фреймворк атомарного уровня, где каждый класс описывает буквально одно-два css-свойства. Таким образом вёрстка с атомарных фреймворком — это использование его классов в html-разметке.

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

Berry CSS состоит из нескольких модулей. Это вообще первый в мире фреймворк, который использует новую парадигму Sass и может управляться с помощью отдельных файлов конфигурации.

Сам по себе фреймворк состоит из классов, которые создают типографику, наборы цветов, фонов, отступов, эффектов и т.д. Классы обладают великолепной семантикой, поэтому любой верстальщик без труда поймёт назначение класса после одноминутного обучения/ознакомления на сайте Berry CSS.

Поскольку Albireo CMS использует Berry CSS как основной фреймворк, то его классы используются в файлах шаблона, админки и т.п. Даже если вы заходите использовать другой фреймворк, то не обязательно отказываться от Berry CSS, поскольку их классы могут не пересекаться. К тому же вы можете использовать дополнительный префикс классов другого фреймворка, чтобы различать их.

Итак. Berry CSS — это основа вёрстки. В терминах Albireo CMS его файл будет называться theme и располагаться в каталоге шаблона assets/css/themes/berry.css. Очевидно, что любые другие фреймворки должны располагаться здесь же.

Подключение этого файла выполняется с помощью поля css.theme:

css.theme: berry.css

Этот файл будет автоматически загружаться в секции HEAD. Поскольку браузер будет кэшировать этот файл, то последующие загрузки будут очень быстрыми, а значит сайт будет отображаться сразу в нормальном виде.

Использование Sass

Berry CSS написан на Sass, поэтому при необходимости можно откорректировать конфигурацию css-классов и cгенерировать свой вариант berry.css.

Управление дизайном

Berry CSS управляется не только через компиляцию Sass, но и через многочисленные css-переменные. Для этого используется секция root.

Есть несколько способов создавать root-переменные.

В самом простом случае можно воспользоваться полем css.root[]:

css.root[body-bg]: #dfdfdf
css.root[body-color]: #333
css.root[body-size-base]: 17px
css.root[layout-max-width]: 1200px
css.root[h1-font-size]: 2.5rem
css.root[link-color]: #3376b9
css.root[link-hover-color]: #4dcea3
css.root[link-hover-decoration]: underline
css.root[paragraph-margin]: 0 0 1rem 0

Обратите внимание, что css-переменные не нужно сопровождать -- — они автоматически добавятся сами:

:root {
    --body-bg: #dfdfdf;
    --body-color: #333;
    и т.д.
}

Таким способом удобно управлять страницей, которая должна отличаться от остальных.

Другим способом будет подключение внешнего файла как STYLE. То есть вы делаете обычный css-файл, например assets/css/color-green.css, где описываете нужные изменения.

После этого используете поле css.fstyle[] или css.fstyle. Оба этих поля делают одно и тоже — берут содержимое указанного файла и помещают его в секции HEAD между <style> код файла </style>.

Разница в том, что поле css.fstyle будет уникальным. Например если указать:

css.fstyle: color-green.css, design1.css
css.fstyle: color-purple.css

То в итоге поле будет содержать только последнее добавление «color-purple.css». Это поле используется для того, чтобы затереть предыдущий подключенный css-файл.

Если же нужно сохранить предыдущий файл (как правило это и нужно), то используется поле css.fstyle[]:

css.fstyle[]: design1.css
css.fstyle[]: color-green.css
css.fstyle[]: color-purple.css

В этом случае будут сохранены стили из всех этих файлов.

Такие короткие css-файлы лучше подключать именно как STYLE, чтобы не создавать лишнее http-соединение. Если же стоит задача подключить css-файл именно как внешний, то используются следующие поля:

  • css.head[]: my.css — для секции HEAD
  • css.lazy[]: my.css — в конце BODY

Также можно разместить просто произвольные стили в HEAD с помощью css.style:

css.style[]: li {margin-bottom: 20px}
css.style[]: a {color: red}

Шрифты

В каталоге assets/css/fonts размещаются css-файлы шрифтов. В них происходит только подключение woff2-файлов и определение на его основе css-класса. Сами же файлы шрифтов хранятся в каталоге ресурсов _resource.

Если стоит задача добавить новый шрифт, то нужно его woff2-файлы разместить в подкаталоге _resource/fonts, а в assets/css/fonts сделать css-файл его подключения.

Такое разделение файлов типовое для шаблонов Albireo CMS. Ресурсные файлы доступны сразу для всех шаблонов и легко обновляются, не затрагивая сами шаблоны.

После того, как css-файл шрифта создан, его можно подключить:

  • css.fonts — в секции HEAD (единственное подключение)
  • css.fonts.lazy — в конце BODY (единственное подключение)
  • css.fonts[] — в секции HEAD (множественное подключение)
  • css.fonts.lazy[] — в конце BODY (множественное подключение)

Выбор между HEAD и BODY заключается в том, насколько быстро шрифт должен быть отображен на странице. Если нужно как можно быстрее, то лучше использовать HEAD, тогда браузер притормозит отображение страницы пока шрифт не будет загружен. И это приведёт к «торможению» страницы. Если же выбрать BODY, то страница отобразится вначале стандартным доступным шрифтом, а потом браузер подгрузит указанный и выполнит замену. Визуально будет видно, как страница немного изменилась.

В комплекте шаблона Default 22 шрифта.

css.fonts.lazy[]: lora.css

...

Потом в теле страницы будет доступен класс t-lora

h2(t-lora) Подзаголовок

Также можно подключить шрифт удалённо, например из Google Fonts. Для этого нужно получить строчку с подключением и вставить её в секцию HEAD с помощью одноименного поля:

css.url[]: https://fonts.googleapis.com/css2?family=Marck+Script&display=swap
css.style[]: .t-marckscript {font-family: "Marck Script"}

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

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

Например есть библиотека CSSgram, которая содержит классы для эффектов изображений. Она состоит только из одного css-файла, который мы размещаем в каталоге ресурсов: _resources/cssgram/cssgram.min.css.

После этого нужно решить где именно нужно подключать эту библиотеку. Поскольку она имеет второстепенное значение, то лучше разместить в конце BODY. Делаем файл parts/lazy/cssgram.php:

// use.cssgram: +

if (checkStr(getPageData('use.cssgram', false)) === true)
    echo '<link rel="stylesheet" href="' . RESOURCES_URL . 'cssgram/cssgram.min.css">';

Теперь, для того, чтобы подключить CSSgram на странице нужно указать use.cssgram: +.

Имя поля произвольное, принято для сторонних библиотек использовать префикс use., но это не обязательно. Точно также можно создать подключение для любых других секций. Если скопировать файл parts/lazy/cssgram.php в parts/head/cssgram.php, то это будет уже подключение в секции HEAD.

Если сторонняя библиотека поддерживает удалённое подключение, то можно её оформить только как parts-файл. Например highlight.js можно подключить из CDN. Поэтому просто создаётся parts/lazy/highlight.php:

<?php if (!defined('BASE_DIR')) exit('No direct script access allowed');
// use.highlight: +

if (checkStr(getPageData('use.highlight', false)) === true) : 

?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad(); 
    document.addEventListener('DOMContentLoaded', (event) => 
        {document.querySelectorAll('pre.hl').forEach((block) => {hljs.highlightBlock(block); });});
</script>
<?php endif ?>

Здесь мы не только подключаем удалённый скрипт и его css-файл, но и прописываем его инициализацию.

Стоит отметить, что если сторонняя библиотека предполагается использовать только один раз на одной странице, то можно вообще ничего не создавать, а просто разместить её код подключения прямо в тексте страницы.