Учимся работать с шаблоном MF. Настройка дизайна
17-06-2021Время чтения ~ 4 мин.Шаблоны для MaxSite CMS 3189
Обычно дизайн сайта разрабатывает дизайнер. Он рисует разные блоки, подбирает цвета. Но что делать, если вы не дизайнер, а хотите изменить дизайн своего сайта самостоятельно? На самом деле это не так сложно, нужно лишь действовать по определённому плану.
Дизайн сайта состоит из нескольких частей: основные (базовые) цвета, общая типографика и дизайн отдельных блоков.
Основные цвета в MF выбираются через опцию «Дизайн шаблона». Поскольку это Material Design, то шаблон автоматом будет выведен в выбранных тонах. Меняются цвета шапки, меню, фона подвала, готовые модули и т.д. Если вам не нужно очень точно следовать заданному цвету, то будет достаточно выбрать ближайший дизайн.
Если же стоит задача получить палитру точного цвета, то необходимо сделать копию темы, указать цвета и скомпилировать Sass. Для новичков это достаточно сложно, но для любого вебмастера проблемы не составит. И, кстати, именно так вы можете расширить Default-шаблон — используйте дефолтную тему, создавайте свои варианты дизайнов.
Также стоит отметить, что в комплект MF-шаблонов sass-файлы не входят.
Когда вы выбрали дизайн, посмотрите насколько точно подходят его цвета для ваших задумок. Очевидно, что может возникнуть задача использовать какой-то точный цвет в шапке или в тексте сайта. В Berry CSS для этого используются фиксированные цвета color1, color2 и т.д. Чтобы их переопределить нужно в опции «CSS стили» использовать css-переменные.
:root {
--color1: #0D6EFD;
--color2: #6C757D;
--color3: #28A745;
--color4: #DC3545;
--color5: #FFC107;
--color6: #17A2B8;
--color7: #A300D9;
}
После этого они будут доступны в классах:
- t-color1 — цвет текста
- bg-color1 — цвет фона
- hover-t-color1 — цвет текста при наведении
- hover-bg-color1 — цвет фона при наведении
- bor-color1 — цвет бордюра
Таким образом вы можете задать произвольные фиксированные цвета, а после их использовать в произвольном месте.
Мой совет: настройку дизайна начинать именно с цветов. Если хватит primary/secondary/tertiary — будет отлично — используйте только эти классы. Но, если их недостаточно, то создаём фиксированные цвета и оперируем ими в качестве дополнения к primary-палитре.
Следующий этап — настройка типографики. Она отвечает за то, как будет выглядеть текст на сайте по умолчанию, то есть без дополнительных css-классов.
Начать лучше с основного текста: гарнитура (шрифт), его размер, цвет и интерлиньяж. Всё это также настраивается через css-переменные в :root.
--body-font-family: "Ubuntu"; --body-size-base: 17px; --body-line-height: 1.6; --body-color: #333;
Основной шрифт сайта можно выбрать на странице MF. Лучше читаются шрифты группы sans serif, но среди них могут быть достаточно мелкие, поэтому нужно будет увеличить размер. Не забудьте также выбрать шрифт в настройках шаблона, чтобы MF загрузил его файлы.
Часто используют второй шрифт, например для заголовков или шапки. Для этого его достаточно отметить для загрузки, а использовать в виде css-класса уже точечно. Например по умолчанию в MF второй шрифт Roboto Slab и его класс t-robotoslab.
После основного текста нужно настроить ссылки.
--link-color: #4881e6; // цвет --link-decoration: none; // подчеркивание --link-hover-color: #D90000; // цвет при наведении --link-hover-decoration: underline; // подчеркивание при наведении
Можно изменить заголовки:
--h1-font-size: 2.5rem; --h2-font-size: 2rem; --h3-font-size: 1.75rem; --h4-font-size: 1.5rem; --h5-font-size: 1.2rem; --h6-font-size: 1rem; --headings-font-weight: normal; // полужирность --headings-margin: 0 0 .6em 0; // отступы --headings-line-height: 1.2; // интерлиньяж
Остальная типографика настраивается уже по желанию. Например часто меняют тэг BLOCKQUOTE.
Когда вы выполните эти настройки, то сайт уже будет отличаться от типового варианта MF. Но, в полном объеме это достигается за счёт дизайна отдельных блоков. В них мы используем готовые классы Berry CSS. То есть не нужно править css-файл шаблона и придумывать отдельные классы для своих блоков. У нас используется методика utility-first, где мы используем уже готовые классы.
Я иногда встречаю большую ошибку, когда начинают сразу править css-файл шаблона и меняют или дописывают свои стили. Не делайте этого! Если вы никогда не работали с атомарным подходом в вёрстке, то потратьте немного времени на изучение возможностей Berry CSS. Уверен, что этих возможностей хватит для решения большинства ваших задач.
Что менять в блоках, модулях и т.д.?
В основном всё крутится вокруг нескольких типовых задач. Для текста указывается размер и цвет. Для блоков — отступы и цвет фона, реже бордюры. Я не буду приводить примеры, поскольку они есть на сайте Berry CSS. Также посмотрите готовые блоки Berry — хотя бы в качестве примера.
Что касается изображений, то в обязательно порядке замените их на свои. В Сети полно бесплатных стоков, где вы можете подобрать фото на любой вкус. Изображения в MF используются только для примера — демонстрации его возможностей. Когда я встречаю MF-сайты с этими демо-изображениями, то просто не понимаю — неужели так сложно их поменять на что-то своё? От этого зависит уникальность вашего сайта.
Теперь про иконки. У нас используется шрифт FontAwesome, где примерно 1600 иконок. Если вы используете иконку в качестве лого, то подберите что-то другое вместо . В модулях, где используются иконки тоже желательно поменять их на другие — сейчас они приведены только в качестве примера. Сменить класс иконки — секундное дело.
Пока мы ещё не рассматривали примеры настроек модулей для главной, об этом поговорим в следующий раз, но вы уже можете настроить шапку и подвал.
Что будет сложно для новичков? Настройка адаптивности. Эта задача для вебмастера, который понимает как она работает и может корректно протестировать полученный код. Поэтому, когда вы будете работать с MF, то лучше не трогать классы адаптивности, чтобы не сломать готовый вариант. В конце концов, у вас есть моя техподдержка, где я смогу помочь. :-)