GP init

.gitignore

@@ -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

README.md

@@ -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-свойсв.

assets/css/gp-style-core.css

@@ -0,0 +1,11 @@
+/* 
+
+ШАБЛОН использования глобальных переменных:
+
+:root {
+    --main-text: #e1667c;
+    --main-color: #8da6cb;
+    --font-family: "Craftwork Grotesk", sans-serif;
+} 
+
+*/

assets/css/gp-style-desktop.css

@@ -0,0 +1,4 @@
+/* Стили для лептопов  */
+@media only screen and (max-width: 1720px) {
+
+}

assets/css/gp-style-mobile.css

@@ -0,0 +1,5 @@
+/* Стили для мобильных устройств  */
+@media only screen and (max-width: 480px) {
+
+
+}

assets/css/gp-style-tablet.css

@@ -0,0 +1,5 @@
+/* Стили для планшетов  */
+@media only screen and (max-width: 1024px) {
+
+    
+}

assets/css/gp-style-ultra.css

@@ -0,0 +1,2 @@
+/* Стили для ультрашироких экранов  */
+@media only screen and (min-width: 1720px) {}

index.html

@@ -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>

ui_kit.html

@@ -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>