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

Last updated 4 years ago

Was this helpful?

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: "";

Если шрифта нет, от находим его здесь:

Далее конвертируем его в 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;

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

Last updated 4 years ago

Was this helpful?