diff --git a/README.md b/README.md index ba1f201..00355a7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -## Требования к верстке +## **Требования к верстке** -### С точки зрения веб-разработки: +### **С точки зрения веб-разработки:** * верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) * при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: `block-name__elem-name--mod-name--mod-val` @@ -11,10 +11,10 @@ + значение модификатора отделяется от его имени двумя дефисами (--) * из конечного HTML-файла убрать все комментарии, если такие имеются * все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4) - +* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы -### С точки зрения SEO: +### **С точки зрения SEO:** * все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2. * на странице должен быть только один заголовок первого уровня (h1) * должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8 @@ -22,10 +22,14 @@ * для \ самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке -## Порядок работы +## **Порядок работы** + +### **Подготовка окружения для локальной разработки** +1. Выкачивать локально на свой компьютер один из 2х шаблонов (по веткам: 1 - master, 2 - with-phpmailer) командой: `git clone -b ${branch_name} https://git.good-production.xyz/Good-Production/template-for-verstka.git` + +заменить переменную: +`${branch_name}` -- на "master", если достаточно только отправки форм в ТГ, либо "with-phpmailer", если нужна отправка на почту средствами PHP (без использования плагинов CMS) -### Подготовка окружения для локальной разработки -1. Выкачивать локально на свой компьютер шаблон командой: `git clone https://git.good-production.xyz/Good-Production/template-for-verstka.git` 2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}` 3. Приступить к локальной разработке в созданной ветке 4. Для демонстрации работы пушить свои комиты в созданную ветку командой: `git push origin ${project_name}--${name}` @@ -37,7 +41,7 @@ `${name}` -- имя/ник исполнителя -## Оптимальный порядок непосредственно в процессе верстки +## **Оптимальный порядок непосредственно в процессе верстки** 1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл `style-core.css` 2. Все шрифты выкачать и сохранить локально в директорию `/assets/fonts/` и подключить их в файле `style-core.css` 3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Стили для UI kit писать так же в файл `style-core.css`. @@ -45,6 +49,6 @@ 3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из `style-core.css` -### Примечания +### **Примечания** Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв. \ No newline at end of file