├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── dependabot.yml └── workflows │ └── test.yml ├── .gitignore ├── .prettierrc ├── .stylelintrc.js ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── source ├── fonts │ ├── Roboto-Regular.woff │ └── Roboto-Regular.woff2 ├── html │ ├── includes │ │ ├── common │ │ │ ├── footer.html │ │ │ └── header.html │ │ └── index │ │ │ ├── hero.html │ │ │ └── structure.html │ └── views │ │ └── index.html ├── img │ └── logo.svg ├── js │ ├── index.js │ └── script.js ├── root │ └── manifest.json ├── scss │ ├── blocks │ │ ├── container.scss │ │ ├── header.scss │ │ ├── hero.scss │ │ ├── logo.scss │ │ ├── nav.scss │ │ └── visually-hidden.scss │ ├── font-face.scss │ ├── global.scss │ ├── style.scss │ └── variables.scss └── vendors │ └── normalize-css │ └── normalize.min.css └── webpack ├── helpers └── generateHtmlPlugins.js └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['plugin:prettier/recommended'], 3 | plugins: ['import', 'prettier'], 4 | env: { 5 | browser: true, 6 | es6: true, 7 | jquery: true, 8 | }, 9 | parserOptions: { 10 | ecmaVersion: 'latest', 11 | sourceType: 'module', 12 | }, 13 | rules: { 14 | 'no-duplicate-imports': 'error', 15 | 'prettier/prettier': 'error', 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text eol=lf 2 | 3 | *.png binary 4 | *.jpg binary 5 | *.jpeg binary 6 | *.webp binary 7 | *.woff binary 8 | *.woff2 binary -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "weekly" 7 | open-pull-requests-limit: 20 8 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Lint & build 2 | 3 | on: 4 | pull_request: 5 | push: 6 | branches: 7 | - master 8 | 9 | jobs: 10 | lint: 11 | runs-on: ubuntu-latest 12 | strategy: 13 | matrix: 14 | node: [ 16, 18, 20 ] 15 | steps: 16 | - uses: actions/checkout@v3 17 | - uses: actions/setup-node@v3 18 | with: 19 | node-version: ${{ matrix.node }} 20 | - name: Install dependencies on Node v${{ matrix.node }} 21 | run: npm install --ci 22 | - name: Lint on Node v${{ matrix.node }} 23 | run: npm run lint 24 | - name: Check if project builds on Node v${{ matrix.node }} 25 | run: npm run build 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Файлы и папки операционной системы 2 | .DS_Store 3 | Thumbs.db 4 | 5 | # Файлы редактора 6 | .idea 7 | *.sublime* 8 | .vscode 9 | .prettierignore 10 | 11 | # Вспомогательные файлы 12 | *.log* 13 | node_modules/ 14 | build/ 15 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "singleQuote": true, 4 | "tabWidth": 2, 5 | "useTabs": false, 6 | "arrowParens": "avoid", 7 | "trailingComma": "all", 8 | "overrides": [ 9 | { 10 | "files": "*.scss", 11 | "options": { "singleQuote": false } 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['stylelint-prettier'], 3 | rules: { 4 | 'prettier/prettier': [ 5 | true, 6 | { 7 | singleQuote: false, 8 | tabWidth: 2, 9 | }, 10 | ], 11 | 'declaration-no-important': true, 12 | 'length-zero-no-unit': true, 13 | 'selector-class-pattern': 14 | '^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$', 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Webtime.Studio 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

[Deprecated] Create HTML boilerplate

2 |

3 | Версия проекта 4 | Минимально необходимая версия NodeJS 5 |

6 | 7 |

Со времени создания данного boilerplate вышло много новых инструментов и поддрежка данного проекта более не выглядит целесообразной, поэтому мы решили его заархивировать и более не будем обновлять зависимости. Проект останется доступным и будет в режиме только для чтения.

8 |

9 | Данная сборка вдохновлена проектом с хабра и многими часами вёрстки и 10 | разработки. Здесь специально нет ничего лишнего и только набор базовых 11 | файлов, чтобы было понятно как построить базовую структуру. 12 |

13 | 20 | 21 | ## Зависимости 22 | 23 | - node ^16 24 | 25 | ## Что под капотом 26 | 27 | - Webpack 28 | - SCSS 29 | - JS с Babel 30 | - Stylelint, Eslint 31 | - Prettier – для автоформатирования 32 | 33 | ## Установка 34 | 35 | ```sh 36 | npm i 37 | ``` 38 | 39 | ## Запуск 40 | 41 | ```sh 42 | npm start 43 | ``` 44 | 45 | ## Авторы 46 | 47 | 👤 **[Webtime.Studio](https://github.com/webtime-studio)** 48 | 49 | - [Павел Клочков @ckomop0x](https://github.com/ckomop0x) 50 | - [Тина Кузьменко @tinakuzmenko](https://github.com/tinakuzmenko) 51 | 52 | ## Show your support 53 | 54 | Поставьте нам звёздочку ⭐️ если этот проект помог вам! 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-html-boilerplate", 3 | "version": "2.0.8", 4 | "description": "Boilerplate for creating modular websites with HTML, SCSS and JavaScript without any headache", 5 | "author": { 6 | "name": "Pavel Klochkov", 7 | "email": "paul.klochkov@gmail.com" 8 | }, 9 | "license": "MIT", 10 | "scripts": { 11 | "start": "webpack-dev-server --config webpack/webpack.config.js --open", 12 | "lint": "concurrently npm:stylelint npm:eslint", 13 | "build": "webpack --progress --config webpack/webpack.config.js --mode production", 14 | "stylelint": "stylelint \"source/scss/**/*.(scss|css)\" --custom-syntax postcss-scss", 15 | "eslint": "eslint \"source/js/**/*.js\"", 16 | "prettier": "prettier --write \"source/(scss|js)/**/*.(scss|css|js|json)\"" 17 | }, 18 | "dependencies": { 19 | "concurrently": "^8.2.2", 20 | "picturefill": "^3.0.3" 21 | }, 22 | "devDependencies": { 23 | "@babel/core": "^7.23.5", 24 | "autoprefixer": "^10.4.16", 25 | "babel-loader": "^9.1.3", 26 | "clean-webpack-plugin": "^4.0.0", 27 | "copy-webpack-plugin": "^11.0.0", 28 | "css-loader": "^6.8.1", 29 | "eslint": "^8.55.0", 30 | "eslint-config-airbnb-base": "^15.0.0", 31 | "eslint-config-prettier": "^9.1.0", 32 | "eslint-plugin-import": "^2.29.0", 33 | "eslint-plugin-prettier": "^5.0.1", 34 | "html-webpack-plugin": "^5.5.3", 35 | "imagemin-webp-webpack-plugin": "^3.3.6", 36 | "imagemin-webpack-plugin": "^2.4.2", 37 | "mini-css-extract-plugin": "^2.7.6", 38 | "postcss": "^8.4.32", 39 | "postcss-loader": "^7.3.3", 40 | "postcss-scss": "^4.0.9", 41 | "prettier": "^3.1.0", 42 | "raw-loader": "^4.0.2", 43 | "sass": "^1.69.5", 44 | "sass-loader": "^13.3.2", 45 | "stylelint": "^15.11.0", 46 | "stylelint-config-recommended-scss": "^13.1.0", 47 | "stylelint-config-standard": "^34.0.0", 48 | "stylelint-prettier": "^4.1.0", 49 | "stylelint-scss": "^5.3.1", 50 | "svg-sprite-loader": "^6.0.11", 51 | "svgo": "^3.0.5", 52 | "svgo-loader": "^4.0.0", 53 | "terser-webpack-plugin": "^5.3.9", 54 | "webpack": "^5.89.0", 55 | "webpack-cli": "^5.1.4", 56 | "webpack-dev-server": "^4.15.1" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /source/fonts/Roboto-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webtime-studio/create-html-boilerplate/90f2ca9e4002ee3b473865f677c0278783f178b0/source/fonts/Roboto-Regular.woff -------------------------------------------------------------------------------- /source/fonts/Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webtime-studio/create-html-boilerplate/90f2ca9e4002ee3b473865f677c0278783f178b0/source/fonts/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /source/html/includes/common/footer.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /source/html/includes/common/header.html: -------------------------------------------------------------------------------- 1 |
2 | 11 |
12 | -------------------------------------------------------------------------------- /source/html/includes/index/hero.html: -------------------------------------------------------------------------------- 1 |
2 |

Привет! Спасибо за то что используете наш Create HTML boilerplate.

3 |

4 | Данная сборка вдохновлена проектом с Хабр и многими часами вёрстки и 5 | разработки. Здесь специально нет ничего лишнего и только набор базовых 6 | файлов, чтобы было понятно как построить базовую структуру проекта. 7 |

8 |
9 | -------------------------------------------------------------------------------- /source/html/includes/index/structure.html: -------------------------------------------------------------------------------- 1 |
2 |

Файловая структура

3 | 4 |
 5 |       myApp
 6 |       ├── .github
 7 |       │   ├── bug_report.md                - шаблон для создания issue
 8 |       │   └── feature_request.md           - шаблон для создания запроса на улучшение
 9 |       │
10 |       ├── source                           - все основные файлы, которые вам нужны
11 |       │   ├── fonts                        - папка с подключаемыми шрифтами
12 |       │   │   ├── Roboto-Regular.woff      – шрифт старого формата
13 |       │   │   └── Roboto-Regular.woff2     – шрифт более современного формата
14 |       │   │
15 |       │   ├── html                         – HTML компоненты сайта
16 |       │   │   ├── includes/                – блоки
17 |       │   │   │   ├── common               - папка с переиспользуемыми блоками
18 |       │   │   │   │   ├── footer.html      - футер сайта
19 |       │   │   │   │   └── header.html      - хедер сайта
20 |       │   │   │   │
21 |       │   │   │   └── index                - папка блоков для страницы views/index.html
22 |       │   │   │       ├── hero.html        - секция hero
23 |       │   │   │       └── structure.html   - секция structure
24 |       │   │   │
25 |       │   │   └── views/                   – страницы
26 |       │   │       └── index.html           - главная (корневая) страница сайта
27 |       │   │
28 |       │   ├── img                          - графика
29 |       │   │   └── logo.svg                 - лого проекта
30 |       │   │
31 |       │   ├── js                           - скрипты сайта
32 |       │   │   └── index.js                 - точка входа для скриптов
33 |       │   │   └── script.js                - пример импортируемого модуля
34 |       │   │
35 |       │   ├── root                         - файлы, которые будут лежать в корне проекта
36 |       │   │   └── manifest.json            - базовая информация о сайте для браузера
37 |       │   │
38 |       │   ├── scss                         - стили проекта
39 |       │   │   ├── blocks                   - примеры стилей вынесенных в блоки
40 |       │   │   │   ├── container.scss       - стили для .container
41 |       │   │   │   ├── header.scss          - стили для .header
42 |       │   │   │   ├── logo.scss            - стили для .logo
43 |       │   │   │   ├── nav.scss             - стили для .nav
44 |       │   │   │   └── visually-hidden.scss - этот блок используется для того, чтобы доступно прятать контент на странице.
45 |       │   │   │
46 |       │   │   ├── font-face.scss           - подключение шрифтов
47 |       │   │   ├── global.scss              - глобальные стили
48 |       │   │   ├── style.scss               – точка входа для стилей проекта
49 |       │   │   └── variables.scss           - переменные (цвета, размеры, шрифты и т.п.)
50 |       │   │
51 |       │   └── vendors                      - папка для внешних скриптов и библиотек
52 |       │       └── normalize-css/           - нормализация стилей по умолчанию (https://necolas.github.io/normalize.css/)
53 |       │           └── normalize.min.css    - минифицированный файл
54 |       │
55 |       ├── webpack                          - папка для конфигураций webpack
56 |       │   └── webpack.config.js            - конфиг для webpack
57 |       │
58 |       ├── .editorconfig                    - настройки для редактора кода
59 |       ├── .eslintrc.js                     - настройки для линтера JS (ESLint)
60 |       ├── .gitattributes                   - технический файл для Git
61 |       ├── .gitignore                       - файлы/папки игнорируемые Git
62 |       ├── .prettierrc                      - настройки форматирования кода (Prettier)
63 |       ├── .stylelintrc.js                  - настройки для линтера SCSS (Stylelint)
64 |       ├── LICENSE                          - лицензия проекта (MIT)
65 |       ├── package.json                     - зависимости, скрипты и базовая информация
66 |       └── README.md                        - описание проекта
67 | 
68 |       * Обратите внимание! Мы не добавляли в проект файлы package-lock.json и yarn.lock,
69 |       так как они будут сгенерированы автоматически во время установки проекта.
70 |     
71 |
72 |
73 | -------------------------------------------------------------------------------- /source/html/views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HTML5 webpack boilerplate 9 | 10 | 15 | 16 | 17 | 18 | <%= _.template(require('../includes/common/header.html').default)({version: htmlWebpackPlugin.options.custom.version,}) %> 19 |
20 | 21 | <%= _.template(require('../includes/index/hero.html').default)({}) %> 22 | 23 | <%= _.template(require('../includes/index/structure.html').default)({}) %> 24 |
25 | 26 | <%= _.template(require('../includes/common/footer.html').default)({}) %> 27 | 28 | 29 | -------------------------------------------------------------------------------- /source/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /source/js/index.js: -------------------------------------------------------------------------------- 1 | // Это - ваша точка входа для скриптов страницы. Импортируйте сюда нужные вам файлы. 2 | 3 | import './script'; 4 | -------------------------------------------------------------------------------- /source/js/script.js: -------------------------------------------------------------------------------- 1 | // Это пример файла со скриптами. Можете писать здесь код, который будет на странице. 2 | -------------------------------------------------------------------------------- /source/root/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-html-boilerplate", 3 | "short_name": "create-html-boilerplate", 4 | "theme_color": "#cc5803", 5 | "background_color": "#cc5803", 6 | "display": "browser", 7 | "scope": "/", 8 | "start_url": "/" 9 | } 10 | -------------------------------------------------------------------------------- /source/scss/blocks/container.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | width: $sm; 4 | padding: 0 20px; 5 | 6 | @media screen and (min-width: $md) { 7 | width: $md; 8 | padding: 0 40px; 9 | } 10 | 11 | @media screen and (min-width: $xl) { 12 | width: $xl; 13 | padding: 0 50px; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /source/scss/blocks/header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | background-color: $white; 3 | margin: 0; 4 | } 5 | -------------------------------------------------------------------------------- /source/scss/blocks/hero.scss: -------------------------------------------------------------------------------- 1 | .hero { 2 | h1 { 3 | margin-bottom: 20px; 4 | } 5 | 6 | p { 7 | margin-bottom: 20px; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /source/scss/blocks/logo.scss: -------------------------------------------------------------------------------- 1 | .logo { 2 | display: flex; 3 | flex-shrink: 0; 4 | height: 83px; 5 | width: 72px; 6 | } 7 | -------------------------------------------------------------------------------- /source/scss/blocks/nav.scss: -------------------------------------------------------------------------------- 1 | .nav { 2 | display: flex; 3 | justify-content: left; 4 | } 5 | 6 | .nav__link { 7 | display: flex; 8 | align-items: flex-start; 9 | padding: 10px 0; 10 | } 11 | 12 | .nav__title { 13 | color: #cc5906; 14 | display: flex; 15 | align-items: center; 16 | font-size: 20px; 17 | font-weight: bold; 18 | } 19 | 20 | .nav__logo { 21 | width: 50px; 22 | margin-right: 20px; 23 | } 24 | -------------------------------------------------------------------------------- /source/scss/blocks/visually-hidden.scss: -------------------------------------------------------------------------------- 1 | /* Этот блок используется для того, чтобы доступно прятать контент на странице. */ 2 | 3 | .visually-hidden { 4 | clip: rect(0 0 0 0); 5 | height: 1px; 6 | margin: -1px; 7 | position: absolute; 8 | width: 1px; 9 | } 10 | -------------------------------------------------------------------------------- /source/scss/font-face.scss: -------------------------------------------------------------------------------- 1 | /* Добавьте сюда все @font-face, которые будут использоваться в проекте */ 2 | 3 | @font-face { 4 | font-family: "Roboto"; 5 | src: 6 | url("../fonts/Roboto-Regular.woff2") format("woff2"), 7 | url("../fonts/Roboto-Regular.woff") format("woff"); 8 | font-weight: normal; 9 | font-style: normal; 10 | font-display: swap; 11 | } 12 | -------------------------------------------------------------------------------- /source/scss/global.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: inherit; 9 | } 10 | 11 | body { 12 | background-color: $white; 13 | color: $black; 14 | font-family: $main-font; 15 | font-size: 14px; 16 | font-weight: normal; 17 | line-height: 20px; 18 | margin: 0; 19 | padding: 0; 20 | } 21 | 22 | img { 23 | max-width: 100%; 24 | } 25 | 26 | a { 27 | text-decoration: none; 28 | } 29 | 30 | h1 { 31 | font-size: 24px; 32 | line-height: 1.25; 33 | } 34 | 35 | pre { 36 | overflow-x: auto; 37 | font-size: 16px; 38 | width: 100%; 39 | padding: 20px; 40 | border: 1px solid rgb(204, 89, 6); 41 | background-color: #252525; 42 | color: rgba(255, 255, 255, 0.7); 43 | border-radius: 15px 0 15px 0; 44 | } 45 | -------------------------------------------------------------------------------- /source/scss/style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Это точка входа для всех стилей. 3 | Подключите сюда все файлы, которые 4 | должны быть на странице. 5 | */ 6 | 7 | @import "font-face"; 8 | @import "variables"; 9 | @import "global"; 10 | 11 | @import "blocks/visually-hidden"; 12 | @import "blocks/container"; 13 | @import "blocks/header"; 14 | @import "blocks/nav"; 15 | @import "blocks/logo"; 16 | @import "blocks/hero"; 17 | -------------------------------------------------------------------------------- /source/scss/variables.scss: -------------------------------------------------------------------------------- 1 | /* Здесь хранятся все переменные стилей проекта. Указанные ниже переменные приведены в качестве демонстрации. */ 2 | 3 | // Размеры вьюпорта 4 | $sm: 320px; 5 | $md: 768px; 6 | $xl: 1280px; 7 | 8 | // Цвета 9 | $black: #000; 10 | $white: #fff; 11 | $grey: #ccc; 12 | 13 | // Шрифты 14 | $main-font: "Roboto", "Arial", sans-serif; 15 | -------------------------------------------------------------------------------- /source/vendors/normalize-css/normalize.min.css: -------------------------------------------------------------------------------- 1 | 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} 2 | -------------------------------------------------------------------------------- /webpack/helpers/generateHtmlPlugins.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | /** 6 | * Функция принимает конфиг с путём для шаблонов страниц templatesPath 7 | * и опциями, которые можно передать в эти шаблоны. 8 | * Возвращает массив HtmlWebpackPlugin сгенерированные для 9 | * каждого html файла найденного в templatesPath. 10 | * 11 | * @param templatesPath 12 | * @param options 13 | * @returns {HtmlWebpackPlugin[]} 14 | */ 15 | const generateHtmlPlugins = ({ templatesPath, options = {} }) => { 16 | const templateFiles = fs.readdirSync(path.resolve(__dirname, templatesPath)); 17 | const htmlFiles = templateFiles.filter(templateFile => { 18 | const parts = templateFile.split('.'); 19 | return parts[1] === 'html'; 20 | }); 21 | 22 | return htmlFiles.map(htmlFile => { 23 | const [name, extension] = htmlFile.split('.'); 24 | 25 | return new HtmlWebpackPlugin({ 26 | title: options.title || 'Create HTML Boilerplate', 27 | filename: `${name}.html`, 28 | template: path.resolve( 29 | __dirname, 30 | `${templatesPath}/${name}.${extension}`, 31 | ), 32 | inject: true, 33 | custom: options, 34 | }); 35 | }); 36 | }; 37 | 38 | module.exports = generateHtmlPlugins; 39 | -------------------------------------------------------------------------------- /webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 5 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 6 | const ImageminPlugin = require('imagemin-webpack-plugin').default; 7 | const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin'); 8 | const TerserPlugin = require('terser-webpack-plugin'); 9 | const SpriteLoaderPlugin = require('svg-sprite-loader/plugin'); 10 | const generateHtmlPlugins = require('./helpers/generateHtmlPlugins'); 11 | 12 | /** 13 | * Получает root директорию проекта. 14 | * @type {string} 15 | */ 16 | const projectRootDir = process.cwd(); 17 | /** 18 | * Текущая версия проекта из package.json 19 | * @type {string} 20 | */ 21 | const version = require('../package.json').version; 22 | /** 23 | * Кастомный title для сайта 24 | * @type {string} 25 | */ 26 | const title = 'Create HTML Boilerplate'; 27 | /** 28 | * Директория с шаблонами 29 | * @type {string} 30 | */ 31 | const templatesPath = path.join(projectRootDir, 'source', 'html', 'views'); 32 | /** 33 | * Базовый конфиг для сайта 34 | * templatesPath – путь для HTML шаблонов (обязательный параметр) 35 | * options – любые данные которые необходимы в шаблоне (опциональный параметр) 36 | * @type {{templatesPath: string, options: {[key]: string | number | any }}} 37 | */ 38 | const config = { 39 | templatesPath, 40 | options: { 41 | version, 42 | title, 43 | }, 44 | }; 45 | /** 46 | * Определяет в каком режиме работает сборка – девелопмент или продакшн. 47 | * @type {boolean} 48 | */ 49 | const isProd = process.argv.mode === 'production'; 50 | const htmlPlugins = generateHtmlPlugins(config); 51 | 52 | module.exports = { 53 | resolve: { 54 | alias: { 55 | source: path.join('..', 'source'), 56 | }, 57 | }, 58 | mode: isProd ? 'production' : 'development', 59 | entry: { 60 | bundle: './source/js/index.js', 61 | libs: ['picturefill'], 62 | style: './source/scss/style.scss', 63 | }, 64 | devtool: 'inline-source-map', 65 | devServer: { 66 | port: 9001, 67 | hot: true, 68 | compress: true, 69 | watchFiles: ['source/**'], 70 | }, 71 | module: { 72 | rules: [ 73 | { 74 | test: /\.js$/, 75 | exclude: /node_modules/, 76 | use: 'babel-loader', 77 | }, 78 | { 79 | test: /\.(sa|sc|c)ss$/, 80 | use: [ 81 | { 82 | loader: MiniCssExtractPlugin.loader, 83 | }, 84 | { 85 | loader: 'css-loader', 86 | options: { 87 | url: false, 88 | }, 89 | }, 90 | { 91 | loader: 'postcss-loader', 92 | options: { 93 | postcssOptions: { 94 | plugins: [['autoprefixer']], 95 | }, 96 | }, 97 | }, 98 | { 99 | loader: 'sass-loader', 100 | }, 101 | ], 102 | }, 103 | { 104 | test: /\.html$/, 105 | include: path.resolve(__dirname, '../source/html/includes'), 106 | use: ['raw-loader'], 107 | }, 108 | ], 109 | }, 110 | plugins: [ 111 | new webpack.ProgressPlugin(), 112 | new CleanWebpackPlugin(), 113 | new SpriteLoaderPlugin(), 114 | new MiniCssExtractPlugin({ 115 | filename: 'css/[name].min.css', 116 | }), 117 | new CopyWebpackPlugin({ 118 | patterns: [ 119 | /* Копируем шрифты */ 120 | { 121 | from: 'source/fonts', 122 | to: './fonts', 123 | }, 124 | /* Копируем изображения */ 125 | { 126 | from: 'source/img', 127 | to: './img', 128 | }, 129 | /* Копируем внешние библиотеки */ 130 | { 131 | from: 'source/vendors', 132 | to: './vendors', 133 | }, 134 | /* Копируем файлы, которые необходимы нам в корне проекта */ 135 | { 136 | from: 'source/root', 137 | to: './', 138 | }, 139 | ], 140 | }), 141 | new ImageminPlugin({ 142 | test: 'source/img/**', 143 | optimizationLevel: 3, 144 | progressive: true, 145 | }), 146 | new ImageminWebpWebpackPlugin({ 147 | config: [ 148 | { 149 | test: /\.(jpe?g|png)/, 150 | options: { 151 | quality: 85, 152 | }, 153 | }, 154 | ], 155 | overrideExtension: true, 156 | detailedLogs: false, 157 | silent: false, 158 | strict: true, 159 | }), 160 | ].concat(htmlPlugins), 161 | output: { 162 | filename: 'js/[name].js', 163 | path: path.resolve(__dirname, '../build'), 164 | }, 165 | optimization: { 166 | minimize: true, 167 | splitChunks: { 168 | chunks: 'all', 169 | }, 170 | minimizer: isProd 171 | ? [ 172 | new TerserPlugin({ 173 | cache: true, 174 | parallel: true, 175 | sourceMap: false, 176 | }), 177 | ] 178 | : [], 179 | }, 180 | }; 181 | --------------------------------------------------------------------------------