GP init
This commit is contained in:
Max
133
.gitignore
vendored
Normal file
133
.gitignore
vendored
Normal file
@@ -0,0 +1,133 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# TypeScript v1 declaration files
|
||||
typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
# next.js build output
|
||||
.next
|
||||
|
||||
# nuxt.js build output
|
||||
.nuxt
|
||||
|
||||
# Nuxt generate
|
||||
dist
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless
|
||||
|
||||
# IDE
|
||||
.idea
|
||||
.vscode
|
||||
config.js
|
||||
/yarn-error.log
|
||||
package-lock.json
|
||||
jsconfig.json
|
||||
|
||||
|
||||
# GP | Files ext
|
||||
*.sql
|
||||
*.tgz
|
||||
*.tar.gz
|
||||
*.tar
|
||||
*.rar
|
||||
*.zip
|
||||
*.wav
|
||||
*.flv
|
||||
*.db
|
||||
*.psd
|
||||
*.pdf
|
||||
*.doc
|
||||
*.docx
|
||||
*.txt
|
||||
*.text
|
||||
*.log
|
||||
*.config
|
||||
*.xml
|
||||
*.tbk
|
||||
*.csv
|
||||
*.json
|
||||
|
||||
# GP | Dirs & files
|
||||
/bower_components/
|
||||
/node_modules/
|
||||
/nbproject/
|
||||
/cache/
|
||||
.cache/
|
||||
/phpMyAdmin-*
|
||||
/timthumb_cache/
|
||||
/webstat/
|
||||
/.idea/
|
||||
/.csscomb.json
|
||||
/.htaccess
|
||||
/sitemap*.xml
|
||||
/sftp-config.json
|
||||
/robots.txt
|
||||
/bower.json
|
||||
/.bowerrc
|
||||
/backup_rsync/
|
||||
.bash_history
|
||||
.idea/
|
||||
.fleet/
|
||||
.DS_Store
|
||||
.config/
|
||||
.bash*
|
||||
.vim*
|
||||
test*.php
|
||||
gp-test*.php
|
||||
34
README.md
Normal file
34
README.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Требования к верстке
|
||||
|
||||
|
||||
## С точки зрения веб-разработки:
|
||||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
|
||||
* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
|
||||
`block-name__elem-name--mod-name--mod-val`
|
||||
+ имена записываются латиницей в нижнем регистре
|
||||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-)
|
||||
+ имя элемента отделяется от имени блока двумя подчеркиваниями (__)
|
||||
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--)
|
||||
+ значение модификатора отделяется от его имени двумя дефисами (--)
|
||||
* из конечного HTML-файла убрать все комментарии, если такие имеются
|
||||
<!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить 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. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл style-core.css
|
||||
2. Все шрифты выкачать и сохранить локально в директорию /assets/fonts/ и подключить их в файле style-core.css
|
||||
3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Для удобства подготовлен файл "ui_kit.html"
|
||||
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html"
|
||||
|
||||
|
||||
### Примечания
|
||||
|
||||
Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв.
|
||||
11
assets/css/gp-style-core.css
Normal file
11
assets/css/gp-style-core.css
Normal file
@@ -0,0 +1,11 @@
|
||||
/*
|
||||
|
||||
ШАБЛОН использования глобальных переменных:
|
||||
|
||||
:root {
|
||||
--main-text: #e1667c;
|
||||
--main-color: #8da6cb;
|
||||
--font-family: "Craftwork Grotesk", sans-serif;
|
||||
}
|
||||
|
||||
*/
|
||||
4
assets/css/gp-style-desktop.css
Normal file
4
assets/css/gp-style-desktop.css
Normal file
@@ -0,0 +1,4 @@
|
||||
/* Стили для лептопов */
|
||||
@media only screen and (max-width: 1720px) {
|
||||
|
||||
}
|
||||
5
assets/css/gp-style-mobile.css
Normal file
5
assets/css/gp-style-mobile.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Стили для мобильных устройств */
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
|
||||
}
|
||||
5
assets/css/gp-style-tablet.css
Normal file
5
assets/css/gp-style-tablet.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Стили для планшетов */
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
|
||||
}
|
||||
2
assets/css/gp-style-ultra.css
Normal file
2
assets/css/gp-style-ultra.css
Normal file
@@ -0,0 +1,2 @@
|
||||
/* Стили для ультрашироких экранов */
|
||||
@media only screen and (min-width: 1720px) {}
|
||||
0
assets/js/main.js
Normal file
0
assets/js/main.js
Normal file
20
index.html
Normal file
20
index.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Main page</title>
|
||||
<link rel="stylesheet" media="screen and (min-width: 1720px)" href="/assets/css/gp-style-ultra.css">
|
||||
<link rel="stylesheet" media="screen and (max-width: 1720px)" href="/assets/css/gp-style-desktop.css">
|
||||
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="/assets/css/gp-style-tablet.css">
|
||||
<link rel="stylesheet" media="screen and (max-width: 480px)" href="/assets/css/gp-style-mobile.css">
|
||||
<link rel="stylesheet" href="/assets/css/gp-style-core.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<script src="/assets/js/gp-main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
37
ui_kit.html
Normal file
37
ui_kit.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UI kit</title>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/style-core.css">
|
||||
</head>
|
||||
<style>
|
||||
/* Стили для выравнивания UI-элеметнов */
|
||||
.ui__ui-wrapper{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.ui,
|
||||
.ui__item{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<body class="ui">
|
||||
<div class="ui__ui-wrapper">
|
||||
<div class="ui__item"></div>
|
||||
<div class="ui__item"></div>
|
||||
<div class="ui__item"></div>
|
||||
<!-- ... -->
|
||||
<div class="ui__item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user