Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

GP | слияние

Browse Source
This commit is contained in:
Max
2024-07-02 05:36:39 +03:00
parent 326b1ce96c 8d05e0c8f7
commit bf464fa933
2 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@@ -1,7 +1,6 @@
# Требования к верстке ## Требования к верстке
### С точки зрения веб-разработки:
## С точки зрения веб-разработки:
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) * верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: * при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
`block-name__elem-name--mod-name--mod-val` `block-name__elem-name--mod-name--mod-val`
@@ -15,7 +14,7 @@
<!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить CSS-правила --> <!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить CSS-правила -->
## С точки зрения SEO: ### С точки зрения SEO:
* все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2. * все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.
* на странице должен быть только один заголовок первого уровня (h1) * на странице должен быть только один заголовок первого уровня (h1)
* должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8 * должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8
@@ -23,7 +22,22 @@
* для \<img\> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке * для \<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` 1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл `style-core.css`
2. Все шрифты выкачать и сохранить локально в директорию `/assets/fonts/` и подключить их в файле `style-core.css` 2. Все шрифты выкачать и сохранить локально в директорию `/assets/fonts/` и подключить их в файле `style-core.css`
3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Стили для UI kit писать так же в файл `style-core.css`. 3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Стили для UI kit писать так же в файл `style-core.css`.

2
index.html
View File

@@ -49,6 +49,7 @@
</head> </head>
<body> <body>
<!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) --> <!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
<form class="form" method="post" action="/send-telegram.php"> <form class="form" method="post" action="/send-telegram.php">
<div class="form__item"> <div class="form__item">
@@ -62,6 +63,7 @@
<input class="form__input btn" type="submit" value="Отправить"> <input class="form__input btn" type="submit" value="Отправить">
</form> </form>
<script src="/assets/js/gp-main.js"></script> <script src="/assets/js/gp-main.js"></script>
</body> </body>
</html> </html>