├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .stylelintrc
├── GUIDE.md
├── GULP-GUIDE.md
├── README.md
├── csscomb.json
├── eslintconfig.cjs
├── gulp
├── compileHtml.mjs
├── compileScripts.mjs
├── compileStyles.mjs
├── copyAssets.mjs
└── optimizeImages.mjs
├── gulpfile.js
├── package.json
├── source
├── fonts
│ ├── rouble.woff
│ └── rouble.woff2
├── html
│ ├── base
│ │ ├── footer.html
│ │ ├── head.html
│ │ ├── header.html
│ │ └── modal.html
│ ├── components.html
│ ├── components
│ │ ├── modal-feedback.html
│ │ └── modal-success.html
│ ├── index.html
│ └── sitemap.html
├── img
│ ├── bg
│ │ └── placeholder.jpg
│ ├── content
│ │ └── placeholder.jpg
│ ├── slides
│ │ └── placeholder.jpg
│ ├── sprite
│ │ └── icon-close.svg
│ └── svg
│ │ └── not-needed-in-sprite.svg
├── js
│ ├── main.js
│ ├── modules
│ │ └── modals
│ │ │ ├── init-modals.js
│ │ │ └── modals.js
│ ├── utils
│ │ ├── focus-lock.js
│ │ ├── ios-checker.js
│ │ ├── ios-vh-fix.js
│ │ └── scroll-lock.js
│ ├── vendor.js
│ └── vendor
│ │ ├── focus-visible-polyfill.js
│ │ └── swiper.js
└── sass
│ ├── blocks
│ ├── btn.scss
│ ├── footer.scss
│ ├── header.scss
│ ├── main-nav.scss
│ └── modal.scss
│ ├── functions.scss
│ ├── global
│ ├── container.scss
│ ├── fonts.scss
│ ├── reboot.scss
│ └── utils.scss
│ ├── keyframes.scss
│ ├── mixins.scss
│ ├── style.scss
│ ├── variables.scss
│ └── vendor
│ ├── normalize.scss
│ └── swiper.scss
├── stylelintconfig.cjs
└── webpack.config.cjs
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Файл с настройками для редактора.
2 | #
3 | # Если вы разрабатываете в редакторе WebStorm, BBEdit, Coda или SourceLair
4 | # этот файл уже поддерживается и не нужно производить никаких дополнительных
5 | # действий.
6 | #
7 | # Если вы ведёте разработку в другом редакторе, зайдите
8 | # на https://editorconfig.org и в разделе «Download a Plugin»
9 | # скачайте дополнение для вашего редактора.
10 |
11 | root = true
12 |
13 | [*]
14 | charset = utf-8
15 | end_of_line = lf
16 | indent_size = 2
17 | indent_style = space
18 | insert_final_newline = true
19 | trim_trailing_whitespace = true
20 |
21 | [*.md]
22 | trim_trailing_whitespace = false
23 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | source/js/vendor/*.js
3 | gulpfile.js
4 | webpack.config.js
5 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | root: true
2 |
3 | parserOptions:
4 | ecmaVersion: 2015
5 | sourceType: 'module'
6 |
7 | env:
8 | es6: true
9 | browser: true
10 | commonjs: true
11 |
12 | extends: "./eslintconfig.cjs"
13 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text eol=lf
2 |
3 | *.png binary
4 | *.jpg binary
5 | *.jpeg binary
6 | *.avif binary
7 | *.webp binary
8 | *.webm binary
9 | *.gif binary
10 | *.woff binary
11 | *.woff2 binary
12 | *.pdf binary
13 | *.mp3 binary
14 | *.mp4 binary
15 | *.avi binary
16 | *.mov binary
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .idea
3 | .vscode
4 | package-lock.json
5 | *.ai
6 | *.log
7 | *.psd
8 | *.sublime*
9 | node_modules/
10 | npm-debug.*
11 | source/css/*.css
12 | source/css/*.map
13 | Thumbs.db
14 |
--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./stylelintconfig.cjs"
3 | }
4 |
--------------------------------------------------------------------------------
/GUIDE.md:
--------------------------------------------------------------------------------
1 | # Гайд по работе со сборкой
2 | ## Основные отличия от старой сборки
3 | 1. PNG \ JPG автоматически не ужимаются, webp не создается.
4 | При необходимости используйте `npm run webp` и `npm run imagemin`
5 | Webp - создание в source, imagemin - оптимизация в build
6 | 2. `PostHtml` плагин для инклюдов заменен на `gulp-file-include`
7 | 3. Добавлены дополнительные вотчеры, чтобы при изменении js и картинок не приходилось перезапускать сборку
8 | 4. Добавлена **[сущность модалок](#Модалки)**
9 | 5. Немного изменен eslint. Косые кавычки теперь должны использоваться только в шаблонных строках
10 | 6. Добавлены различные фиксы для ie11
11 | 7. Обновлена файловая структура, добавлен пример `container.scss`, в `reboot.scss` собраны различные ресеты \ кроссбраузерные фиксы
12 |
13 | ❗ Обязательно обратите внимание на `chrome autofill background removal` в `reboot.scss`. Там необходимо заменить цвета на используемые в проекте.
14 |
15 | ## Gulp-file-include
16 | Так как в текущее время разработка большинства проектов связана с созданием копонентов - возникла необходимость передавать переменные в инклюды. Ведь в стандартном `posthtml-include` чтобы расширить компонент модификатором - приходилось создавать новый html файл, копипастить содержимое. И при изменении базы компонента - приходилось бы редактировать и модифицированную версию, а это бы нарушало принцип компонентного подхода.
17 |
18 | На помощь приходит плагин `gulp-file-include`.
19 |
20 | ❗ Важное уточнение. Если у вас крупный проект, множестно расширяемых компонентов - используйте `pug` или другой шаблонизатор, заточенный под такие задачи. Этот плагин не решит тех задач, которые стоят перед шаблонизаторами.
21 |
22 | ### Стандартный include
23 | Раньше для инклюда с `post-html` мы использовали такой синтаксис
24 |
25 | ```html
26 |
27 | ```
28 |
29 | Теперь он станет таким
30 |
31 | ```html
32 | @@include("source/html/components/card.html")
33 | ```
34 |
35 | ### Использования переменных.
36 | Важно понимать, что `gulp-file-include` подчиняется законам javascript, но у него есть свои особенности и ограничения.
37 |
38 | #### Объявление переменной
39 | 1. Локальное
40 |
41 | ```
42 | @@include("source/html/components/card.html", {
43 | "title": "text",
44 | "mod": "tall"
45 | })
46 | ```
47 |
48 | ❗ Если внутри одного инклюда используется другой инклюд - переменная переданная в родителя не может быть прочитана у потомков. Чтобы решить эту проблему требуется создать цепочку передачи переменных.
49 |
50 | ```
51 | @@include("source/html/components/card-child.html", {
52 | "title": "@@text"
53 | })
54 | ```
55 |
56 | 2. Глобальное
57 |
58 | Глобальное объявление переменных доступно только в `gulpfile.js`, объявить глобальную переменную на страницу невозможно.
59 |
60 | Глобальную переменную можно переопределить для конкретного инклюда просто передав её в него с другим значением.
61 |
62 | ❗ Тщательно подбирайте нейминг для глобальных переменных. Не `navLinks`, а `headerNavLinks`, чтобы любой разработчик мог уже в gulp понять область применения этой глобальной переменной. Также нельзя передавать в глобал переменную `mod`.
63 |
64 | ```js
65 | gulp.task(`html`, function () {
66 | return gulp.src([`source/html/*.html`])
67 | .pipe(fileinclude({
68 | prefix: `@@`,
69 | basepath: `@root`,
70 | context: {
71 | featuresCardTitle: "text",
72 | featuresCardMod: "tall"
73 | }
74 | }))
75 | .pipe(gulp.dest(`build`));
76 | });
77 | ```
78 |
79 | #### Обращение к переменной
80 |
81 | ```html
82 |
83 |
@@title
84 |
85 | ```
86 |
87 | ### Условия
88 | Переменные и условия можно вставить буквально куда угодно. В классы, атрибуты и пр.
89 |
90 | Чаще всего условия будут применяться, чтобы добавить модификатор к компоненту или если на одной странице в компонент переменная передается, а на другой нет.
91 |
92 | ```html
93 |