84 lines
8.6 KiB
Markdown
84 lines
8.6 KiB
Markdown
## **Требования к верстке**
|
||
|
||
### **С точки зрения веб-разработки:**
|
||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
|
||
* соблюдаем Scope-ориентированный подход:
|
||
- каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри секции/экрана, не влияя на другие части сайта.
|
||
|
||
- пример: <br>
|
||
|
||
HTML:
|
||
```
|
||
<section class="my-namespace">
|
||
<h1>Новый заголовок</h1>
|
||
<button class="my-button">Кнопка</button>
|
||
</section>
|
||
```
|
||
|
||
CSS:
|
||
|
||
```
|
||
.my-namespace h1 {
|
||
font-size: 24px;
|
||
color: #333;
|
||
}
|
||
|
||
.my-namespace .my-button {
|
||
background-color: #007BFF;
|
||
color: #fff;
|
||
}
|
||
```
|
||
|
||
|
||
* чтобы дополнительно структурировать CSS при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
|
||
`block-name__elem-name--mod-name--mod-val`
|
||
+ имена записываются латиницей в нижнем регистре
|
||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-)
|
||
+ имя элемента отделяется от имени блока двумя подчеркиваниями (__)
|
||
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--)
|
||
+ значение модификатора отделяется от его имени двумя дефисами (--)
|
||
* из конечного HTML-файла убрать все комментарии, если такие имеются
|
||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
|
||
* **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки.
|
||
* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы
|
||
* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил.
|
||
* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.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="", со значением описывающим того что изображено на картинке
|
||
|
||
|
||
## **Порядок работы**
|
||
|
||
### **Подготовка окружения для локальной разработки**
|
||
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)
|
||
|
||
2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}`
|
||
3. Приступить к локальной разработке в созданной ветке
|
||
4. Для демонстрации работы пушить свои комиты в созданную ветку командой: `git push origin ${project_name}--${name}`
|
||
- во время push для авторизации понадобиться логин/пароль: `freelancer/freelancerfreelancer00`
|
||
5. Отписать в чат, чтоб руководитель проектом посмотрел результат и выкачал его на тестовый стенд
|
||
|
||
в командах заменить переменные:
|
||
`${project_name}` -- условное названия проекта (как варинат использовать домен сайта)
|
||
`${name}` -- имя/ник исполнителя
|
||
|
||
|
||
## **Оптимальный порядок непосредственно в процессе верстки**
|
||
1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл `style-core.css`
|
||
2. Все шрифты выкачать и сохранить локально в директорию `/assets/fonts/` и подключить их в файле `style-core.css`
|
||
3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Стили для UI kit писать так же в файл `style-core.css`.
|
||
Саму HTML-верстку для UI kit делать в файле `ui_kit.html`
|
||
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из `style-core.css`
|
||
|
||
|
||
### **Примечания**
|
||
|
||
Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв. |