Compare commits
2 Commits
bf464fa933
...
test_by_ma
| Author | SHA1 | Date | |
|---|---|---|---|
| b1afb0f09c | |||
|
|
4961f2b1c9 |
14
.htaccess
Normal file
14
.htaccess
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<IfModule mod_rewrite.c>
|
||||||
|
# Редирект: ...// -> .../
|
||||||
|
RewriteCond %{REQUEST_URI} (.*)\/\/$
|
||||||
|
RewriteRule ^(.*)$ https://%{HTTP_HOST}/%1/ [R=301,L]
|
||||||
|
|
||||||
|
# Редирект: с www -> без www
|
||||||
|
RewriteCond %{HTTP_HOST} ^www\.(.*)$
|
||||||
|
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
|
||||||
|
|
||||||
|
# Редирект: HTTP -> HTTPS
|
||||||
|
RewriteCond %{HTTP:X-Forwarded-Proto} !https
|
||||||
|
RewriteCond %{HTTPS} off
|
||||||
|
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
|
||||||
|
</IfModule>
|
||||||
16
README.md
16
README.md
@@ -1,6 +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`
|
||||||
@@ -11,10 +11,10 @@
|
|||||||
+ значение модификатора отделяется от его имени двумя дефисами (--)
|
+ значение модификатора отделяется от его имени двумя дефисами (--)
|
||||||
* из конечного HTML-файла убрать все комментарии, если такие имеются
|
* из конечного HTML-файла убрать все комментарии, если такие имеются
|
||||||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
|
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
|
||||||
<!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить CSS-правила -->
|
* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные 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
|
||||||
@@ -22,9 +22,9 @@
|
|||||||
* для \<img\> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке
|
* для \<img\> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке
|
||||||
|
|
||||||
|
|
||||||
## Порядок работы
|
## **Порядок работы**
|
||||||
|
|
||||||
### Подготовка окружения для локальной разработки
|
### **Подготовка окружения для локальной разработки**
|
||||||
1. Выкачивать локально на свой компьютер шаблон командой: `git clone https://git.good-production.xyz/Good-Production/template-for-verstka.git`
|
1. Выкачивать локально на свой компьютер шаблон командой: `git clone https://git.good-production.xyz/Good-Production/template-for-verstka.git`
|
||||||
2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}`
|
2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}`
|
||||||
3. Приступить к локальной разработке в созданной ветке
|
3. Приступить к локальной разработке в созданной ветке
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
`${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`.
|
||||||
@@ -45,6 +45,6 @@
|
|||||||
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из `style-core.css`
|
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из `style-core.css`
|
||||||
|
|
||||||
|
|
||||||
### Примечания
|
### **Примечания**
|
||||||
|
|
||||||
Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв.
|
Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв.
|
||||||
Reference in New Issue
Block a user