В «Чертогах Фрилансера» 4 (далее ЧФ4) используется
препроцессор SASS в синтаксисе SCSS , что позволяет использовать широкий и мощный функционал для создания стилей проекта и их управления.
Благодаря компонентному подходу ЧФ4, можно описывать стили для каждой страницы и каждого блока отдельно, в файлах соответствующего компонента. Это позволит системе разделять стили по страницам, что положительно влияет на оптимизацию проекта. Отдельные файлы стилей компонентов вы найдете в папке
src/components
Для удобства работы со стилями следует использовать значение в PX (пикселях), и, где это нужно, в % (процентах) и EM. Система автоматически переведет все значения из PX в относительные единицы REM в режиме продакшн (если это включено в настройках ЧФ4)
Файл settings.scss
Файл
src/styles/settings.scss является главным файлом настроек значений стилей по умолчанию, работы адаптивной сетки и миксинов, в частности таких, как «Чувственное свойство»
Файл автоматически подключается к каждому SCSS-проекту, и именно с этого файла следует начинать работу над интерфейсом
Настройка семейства, размера и цвета шрифта по умолчанию
Для того чтобы работать со шрифтами, сначала нужно их подключить. Все действия подробно описаны в данной статье.
После выполнения действий по подключению шрифтов необходимо указать значение для следующих переменных
$fontFamily – имя семейства шрифт по умолчанию. Указываем имя основного шрифта в проекте и его тип, например:
$fontFamily: «Монтсеррат, без засечек»;
$fontSize – размер шрифта по умолчанию. Следует указать значение размера шрифта по умолчанию в пикселях (только число без px):
$fontSize: 16;
$mainColor – цвет шрифта по умолчанию. Указываем код цвета:
$mainColor: #000;
Также, здесь можно добавлять и другие переменные, в том числе с цветовыми кодами создавая цветовую палитру проекта
Настройка адаптивной сетки
У ЧФ4 есть возможность настроить ограничивающий контейнер на работу как с адаптивной (чуткой) версткой, так и с версткой по брейкпоинтам.
Перед началом работ настраиваем следующие переменные:
$minWidth – минимальная ширина вьюпорта (экрана), поддерживаемая проектом. Обычно это 320px, но с отмиранием старых устройств это значение можно изменять на любое нужное, указываем только число без px:
$minWidth: 320;
$maxWidth — ширина всего макета (холста), не путать с шириной ограничивающего контейнера. Как правило, дизайнеры предоставляют макеты шириной 1920 или 1440 точек, но это значение может быть любым. Измеряем макет и указываем только число без px:
$maxWidth: 1920;
$maxWidthContainer – ширина ограничивающего контейнера. По сути, это ширина контента в макете дизайна. Измеряем макет и указываем только число без px:
$maxWidthContainer: 1170;
Если в макете нет ограничения контента, то есть контент расположен на всю ширину полотна (с отступами), то следует указать значение 0 (ноль):
$maxWidthContainer: 0;
$containerPadding — общее отступление (сумма отступов слева и справа) у ограничивающего контейнера. Указываем только число без px:
$containerPadding: 30;
Если отступов нет, или вы хотите использовать адаптивное свойство, следует указать 0 (ноль):
$containerPadding: 0;
$containerWidth – ширина срабатывания первого брейкпоинта. По сути, это сумма ширин ограничивающего контейнера и его отступов. Как правило, менять здесь ничего не нужно.
$containerWidth: $maxWidthContainer + $containerPadding;
Вышеупомянутые переменные влияют и на функционал чуткого свойства, описанный в отдельной статье
Настройка брейкпоинтов
Настраиваем «стандартные» предельные ширины определенных групп устройств:
$ pc – ПК, ноутбуки, некоторые планшеты в горизонтальном положении. Как правило, здесь указывается переменная $containerWidth :
$pc: $containerWidth;
$tablet – планшеты, некоторые телефоны в горизонтальном положении. Обычно значение равно 991.98px:
$планшет: 991.98;
$mobile – большие телефоны. Обычно значение равно 767.98px:
$мобильный: 767.98;
$mobileSmall – маленькие телефоны.
$mobileSmall: 479,98;
Для быстрого вызова медиа-запроса с требуемым брейкпоинтом можно использовать
сниппеты md1, md2, md3, md4. Или для Mobile First, mmd1, mmd2, mmd3, mmd4
Настройка типа адаптива (поведение ограничивающего контейнера)
$responsiveType — настройка типа адаптива (поведение ограничивающего контейнера):
- 1 – отзывчивая. У контейнера нет брейкпоинтов, он сужается вместе с браузером.
- 2 – по брейкпоитам. Контейнер изменяет свою ширину по настроенным брейкпоинтам.
$responsiveType: 1;
Файл style.scss
Файл src/styles/style.scss является основным и общим файлом стилей проекта в стартовом шаблоне «Чертоги Фрилансера».
Подключение удаленных шрифтов
В начале файла есть секция, где, при необходимости, следует подключать удаленные шрифты, например с Google Fonts . Для этого удобно использовать плагин для VS Code — Better Google Fonts for VS Code
Селекторы и стили
body{} – стили основного тега <body>.
Также добавлена подготовка для появления у тега <html> двух классов:
- [data-fls-scrolllock] – блокировка скрола. Для этого уже написаны соответствующие стили
- [data-fls- loaded] — сайт загружен. По этому классу мы можем влиять на <body> для отображения контента после полной загрузки данных
. wrapper {} – обертка всего контента на странице. Для нее написаны стили прижатия подвала к низу страницы, важен параметр overflow: clip; который не даст появиться горизонтальному скролу страницы, а также решению других проблем
Ниже указан селектор ограничивающего контейнера и его стили, значения которых во многом состоят из настроек в файле settings.scss
Стили ограничительного контейнера будут применяться к любому элементу, в классе которого имеется строка «__container» . Для удобства можно использовать снипет cnt
<div class=»block__container»> … </div>
Общие стили проекта
Ниже всех предустановленных стилей можно добавлять собственные общие стили, которые применяются ко всем страницам проекта .
Возможны настройки ЧФ4 для работы со стилями
В файле настроек ЧФ4 в разделе styles вы найдете:
- tailwindcss – включает использование tailwindcss, при этом файл src/styles/libs/reset.css будет выключен
- pxtorem – включает автоматическую конвертацию PX в REM
- critical – включает создание и интеграцию в HTML критических стилей
- codesplit – разделяет стили по страницам проекта
- devfiles — создает не сжатый файл стилей