Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 Commits
18 Branches
0 Tags
79 MiB
 
 
 
Tag: Branch: Tree: 094e94ad7d
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '094e94ad7d'
${ noResults }
Kirill Pet 094e94ad7d
сделал кабинент зарегистрированного пользователя 		10 months ago
assets сделал кабинент зарегистрированного пользователя 10 months ago
example сделал верстку lang и mini-profile 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
catalog-error.html fix 11 10 months ago
catalog.html fix 11 10 months ago
index.html fix 10.2 10 months ago
product.html fix 11 10 months ago
registration.html сделал кабинент зарегистрированного пользователя 10 months ago
send-telegram.php GP | feat: поправил подключение стилей + добавил обработчик для отправки форм в ТГ 1 year ago
ui_kit.html change sassets include url 10 months 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="", со значением описывающим того что изображено на картинке

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

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

  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}
    • во время 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
  4. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из style-core.css

Примечания

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