template-for-verstka

Kirill Pet b208ae3e64 подключение шрифтов		10 months ago
assets	подключение шрифтов	10 months ago
.gitignore	GP init	1 year ago
.htaccess	GP \| feat: add .htaccess	1 year ago
README.md	GP \| feat: upd readme	1 year ago
index.html	подключение шрифтов	10 months ago
send-telegram.php	GP \| feat: поправил подключение стилей + добавил обработчик для отправки форм в ТГ	1 year ago
ui_kit.html	feat: update readme and adaptive files	1 year ago

README.md

Требования к верстке

С точки зрения веб-разработки:

верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
при именовании блоков используем методологию БЭМ в стиле "Two Dashes": block-name__elem-name--mod-name--mod-val
- имена записываются латиницей в нижнем регистре
- для разделения слов в именах БЭМ-сущностей используется дефис (-)
- имя элемента отделяется от имени блока двумя подчеркиваниями (__)
- модификаторы отделяются от имения блока или элемента двумя дефисами (--)
- значение модификатора отделяется от его имени двумя дефисами (--)
из конечного HTML-файла убрать все комментарии, если такие имеются
все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на "видео"
ВАЖНО: если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в <body>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы

С точки зрения SEO:

все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.
на странице должен быть только один заголовок первого уровня (h1)
должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8
для кнопок, нажатие на которые не требует редиректа используем тег <button>, а не <a>
для <img> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке

Порядок работы

Подготовка окружения для локальной разработки

Выкачивать локально на свой компьютер шаблон командой: git clone https://git.good-production.xyz/Good-Production/template-for-verstka.git
Далее создать свою ветку командой: git checkout -b ${project_name}--${name}
Приступить к локальной разработке в созданной ветке
Для демонстрации работы пушить свои комиты в созданную ветку командой: git push origin ${project_name}--${name}
- во время push для авторизации понадобиться логин/пароль: freelancer/freelancerfreelancer00
Отписать в чат, чтоб руководитель проектом посмотрел результат и выкачал его на тестовый стенд

в командах заменить переменные: ${project_name} -- условное названия проекта (как варинат использовать домен сайта) ${name} -- имя/ник исполнителя

Оптимальный порядок непосредственно в процессе верстки

Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл style-core.css
Все шрифты выкачать и сохранить локально в директорию /assets/fonts/ и подключить их в файле style-core.css
Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Стили для UI kit писать так же в файл style-core.css. Саму HTML-верстку для UI kit делать в файле ui_kit.html
Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из style-core.css

Примечания

Для работы с Figma рекомендуем использовать плагин "Inspect Styles" для инспевтирования CSS-свойсв.