Процесс накатывания стилей CSS

1) Определяем шрифты в avocode

Достаем гугловские шрифты по названию из Плагина Google Fonts в VS Code

CTRL+SHIFT+P -> Google Fonts

2) Добавлем строку, если нужна кириллица &display=swap&subset=cyrillic-ext

3) Удаляем из строки гугл фонтс ненужные шрифты:

Bold - 700

Medium - 500

Regular - 400

Light - 300

4) выставляем шрифт по умолчанию

Переменная в файле style.scss

$fontFamily: "";

Если шрифта нет, от находим его здесь: https://nomail.com.ua/

Далее конвертируем его в font2web.com

Кладем все шрифты в папку fonts.

И копируем стили из fonts.css в fonts.scss для каждого шрифта.

Меняем font-family на адекватное из avocode.

Выставляем font-weight

Изменяем пути к файлам наших шрифтов.

Это сделаем потом в GULP (Посмотреть на канале)

Определяем Переменные и сетку

• Определяем общую ширину макета. Смотрим на макет, нажимаем на общую область и достаем width: 1363px;

• Оределяем значение ограничивающего контейнера. Включаем сетку в avocode, если есть

$minWidth: 320;
$maxWidth: 1360;
$maxWidthContainer: 1120;
$md1: $maxWidthContainer + 12;
$md2: 991.98;
$md3: 767.98;
$md4: 479.98;

Смотрим наперед про адаптив

Смотрим на хедер

• Достаем всю графику

• Создаем файл templates/_header.html

• http://fls.guru/flexbox.html

• https://codepip.com/games/grid-garden/

• Меню на флексах

ВопросЫ

Как же в итоге общие блоки использовать, где их стилизовать? Примеры реиспользования