Compare commits
No commits in common. 'center_consult' and 'master' have entirely different histories.
center_con
...
master
@ -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 |
||||
@ -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> |
||||
@ -0,0 +1,84 @@ |
||||
## **Требования к верстке** |
||||
|
||||
### **С точки зрения веб-разработки:** |
||||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) |
||||
* соблюдаем Scope-ориентированный подход: |
||||
- каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри секции/экрана, не влияя на другие части сайта. |
||||
|
||||
- пример: <br> |
||||
|
||||
HTML: |
||||
``` |
||||
<section class="my-namespace"> |
||||
<h1>Новый заголовок</h1> |
||||
<button class="my-button">Кнопка</button> |
||||
</section> |
||||
``` |
||||
|
||||
CSS: |
||||
|
||||
``` |
||||
.my-namespace h1 { |
||||
font-size: 24px; |
||||
color: #333; |
||||
} |
||||
|
||||
.my-namespace .my-button { |
||||
background-color: #007BFF; |
||||
color: #fff; |
||||
} |
||||
``` |
||||
|
||||
|
||||
* чтобы дополнительно структурировать CSS при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: |
||||
`block-name__elem-name--mod-name--mod-val` |
||||
+ имена записываются латиницей в нижнем регистре |
||||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-) |
||||
+ имя элемента отделяется от имени блока двумя подчеркиваниями (__) |
||||
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--) |
||||
+ значение модификатора отделяется от его имени двумя дефисами (--) |
||||
* из конечного HTML-файла убрать все комментарии, если такие имеются |
||||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4) |
||||
* **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки. |
||||
* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы |
||||
* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил. |
||||
* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.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. Выкачивать локально на свой компьютер один из 2х шаблонов (по веткам: 1 - master, 2 - with-phpmailer) командой: `git clone -b ${branch_name} https://git.good-production.xyz/Good-Production/template-for-verstka.git` |
||||
|
||||
заменить переменную: |
||||
`${branch_name}` -- на "master", если достаточно только отправки форм в ТГ, либо "with-phpmailer", если нужна отправка на почту средствами PHP (без использования плагинов CMS) |
||||
|
||||
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` |
||||
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из `style-core.css` |
||||
|
||||
|
||||
### **Примечания** |
||||
|
||||
Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв. |
||||
@ -0,0 +1,16 @@ |
||||
/* Переменные, шрифты, UI kit */ |
||||
|
||||
|
||||
|
||||
|
||||
/* |
||||
|
||||
ШАБЛОН использования глобальных переменных: |
||||
|
||||
:root { |
||||
--main-text: #e1667c; |
||||
--main-color: #8da6cb; |
||||
--font-family: "Craftwork Grotesk", sans-serif; |
||||
} |
||||
|
||||
*/ |
||||
@ -0,0 +1,18 @@ |
||||
/* Основные стили для компьютера */ |
||||
|
||||
|
||||
|
||||
/* писать сюда... */ |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Стили для лептопов */ |
||||
/* @media only screen and (min-width: 992px) and (max-width: 1400px) { |
||||
|
||||
} */ |
||||
@ -0,0 +1,5 @@ |
||||
/* Стили для мобильных устройств */ |
||||
@media only screen and (max-width: 576px) { |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 992px) { |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
/* Стили для ультрашироких экранов */ |
||||
@media only screen and (min-width: 1400px) { |
||||
|
||||
} |
||||
@ -0,0 +1,2 @@ |
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} |
||||
/*# sourceMappingURL=normalize.min.css.map */ |
||||
@ -0,0 +1 @@ |
||||
*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer} |
||||
@ -1,8 +0,0 @@ |
||||
/** |
||||
* Minified by jsDelivr using clean-css v4.2.0. |
||||
* Original file: /npm/slick-carousel@1.8.1/slick/slick.css |
||||
* |
||||
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files |
||||
*/ |
||||
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} |
||||
/*# sourceMappingURL=/sm/fb3ed351cd5c0f1f30f88778ee1f9b056598e6d25ac4fdcab1eebcd8be521cd9.map */ |
||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 797 KiB |
|
Before Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 198 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 457 B |
|
Before Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 945 B |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 549 B |
|
Before Width: | Height: | Size: 739 B |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 489 B |
|
Before Width: | Height: | Size: 511 B |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 658 B |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 418 B |
|
Before Width: | Height: | Size: 930 B |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |