Berry CSS

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

WEB так устроен, что любой сайт работает на HTML и CSS, поэтому данные технологии являются ключевыми. На этом строится и MF-шаблон, где вы будете постоянно сталкиваться с классами Berry и каким-то простым html-кодом. От этого никуда не деться, поэтому в случае затруднений, вы можете обращаться к справке Berry, чтобы понять назначение класса.

Но это ещё не всё. Berry — наверное единственный современный css-фреймворк, который в полном объеме поддерживает концепцию Material Design от Google. Поэтому ваш шаблон позволяет, используя эту концепцию, делать совершенно замечательные вещи, вроде смены дизайна без правки css/html кода. Достигается это за счёт использования специальных классов primary и secondary.

В шаблоне есть специальная страница, расположенная по адресу http://ваш-сайт/mfdesign, где показаны используемые цвета текущего дизайна. Используйте её, чтобы подобрать нужный цвет.

Блоки Berry CSS

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

В шаблоне также можно использовать данную возможность, причём несколькими способами. Рассмотрим простой пример, когда используется компонент Any1. В компонентах шапки выберем header-menu2 и any1. После этого переключимся на вкладку Any1 и вставим код например этого блока.

Поскольку в блоке используется изображение, то нужно будет подредактировать его адрес. Было:

url(assets/images/froala/hero/purple.svg)

Должно быть:

url({{ getinfo('template_url') }}assets/images/froala/hero/purple.svg)

После сохранения получим:

Блоки Berry можно использовать произвольно — там где можно добавить html-код.

Другой способ использования блоков Berry CSS — это использование компонента Module1 (и Module2). Для этого вместо Any1, включим Module1.

В настройках Module1 нужно указать модули юнитов. Поскольку мы с ними только знакомимся, то будем использовать модули MFStore без их правки — просто для изучения. Всё что нужно сделать, это указать в опции Каталог модулей store.

Укажем какой-нибудь блок Berry, например ca18:

berry/block || block = ca/ca18.php

Получим:

Обратите внимание, что в этом случае нам не нужно редактировать путь к изображению.

В комплект шаблона включены все блоки Berry и по умолчанию они находятся в каталоге шаблона store/berry/block. В компоненте Module1 можно указать сразу множество модулей, они будут все последовательно выведены.

Блоки Berry CSS отлично подходят для создания Landing Page для главной страницы.