init

2024-03-21 14:45:10 +03:00 · 2024-03-21 14:45:10 +03:00 · ecd3d5fc12
commit ecd3d5fc12
61 changed files with 29288 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,29 @@
+# Default
+.gulp
+.idea
+.vscode
+
+# Node
+node_modules
+
+# Dist & test
+test
+dist
+
+# BD, logs
+*.log
+*.sql
+*.sqlite
+
+# Other
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock
+
+# Special
+Thumbs.db
+Desktop.ini
+.DS_Store*
+ehthumbs.db
+Icon?
--- a/README.md
+++ b/README.md
@ -0,0 +1,262 @@
+<div align="center">
+  <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
+  <h1>Webpack Template</h1>
+  <p>
+    Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
+  </p>
+  <p>Base Template: <a href="https://github.com/vedees/webpack-template">webpack-template</a></p>
+  <p>Author: <a href="https://tocode.ru" target="_blank">To code</a> | <a href="https://www.youtube.com/playlist?list=PLkCrmfIT6LBQWN02hNj6r1daz7965GxsV" target="_blank">Youtube guide in Russian</a></p>
+</div>
+
+
+## Build Setup:
+
+``` bash
+# OLD repository:
+git clone https://github.com/vedees/webpack-template-pug webpack-template-pug
+
+# Go to the app:
+cd webpack-template-pug
+
+# Install dependencies:
+npm install
+
+# Server with hot reload at http://localhost:8081/
+npm run dev
+
+# Output will be at dist/ folder
+npm run build
+```
+
+## Project Structure:
+
+* `src/pug/layout` - put custom layout for pages
+* `src/pug/includes` - all app includes
+* `src/pug/utils` - pug mixins and other
+* `src/pug/pages` - put custom app pages. Don't forget to import them in `index.js`
+* `src/assets/scss` - put custom app SCSS styles here. Don't forget to import them in `index.js`
+* `src/assets/css` - the same as above but CSS here. Don't forget to import them in `index.js`
+* `src/assets/img` - put images here. Don't forget to use correct path: `assets/img/some.jpg`
+* `src/js` - put custom app scripts here
+* `src/index.js` - main app file where you include/import all required libs and init app
+* `src/components` - folder with custom `.vue` components
+* `static/` - folder with extra static assets that will be copied into output folder
+
+<div align="center">
+  <h2>Settings:</h2>
+</div>
+
+## Main const:
+Easy way to move all files.
+Default:
+``` js
+const PATHS = {
+  // Path to main app dir
+  src: path.join(__dirname, '../src'),
+  // Path to Output dir
+  dist: path.join(__dirname, '../dist'),
+  // Path to Second Output dir (js/css/fonts etc folder)
+  assets: 'assets/'
+}
+```
+## Customize:
+Change any folders:
+``` js
+const PATHS = {
+  // src must be src
+  src: path.join(__dirname, '../src'),
+  // dist to public
+  dist: path.join(__dirname, '../public'),
+  // assets to static
+  assets: 'static/'
+}
+```
+
+## Import Another libs:
+1. Install libs
+2. Import libs in `./index.js`
+``` js
+// React example
+import React from 'react'
+// Bootstrap example
+import Bootstrap from 'bootstrap/dist/js/bootstrap.min.js'
+// or
+import 'bootstrap/dist/js/bootstrap.min.js'
+```
+
+## Import only SASS or CSS libs:
+1. Install libs
+2. Go to `/assets/scss/utils/libs.scss`
+3. Import libs in node modules
+``` scss
+// Sass librarys example:
+@import '../../node_modules/spinners/stylesheets/spinners';
+// CSS librarys example:
+@import '../../node_modules/flickity/dist/flickity.css';
+```
+
+## Import js files:
+1. Create another js module in `./js/` folder
+2. Import modules in `./js/index.js` file
+``` js
+// another js file for example
+import './common.js'
+```
+
+## PUG Dir Folder:
+#### Default:
+* .pug dir: `./pug/pages`
+* Configurations: in `./build/webpack.base.conf.js`
+**Usage:**
+All files must be created in the `./pug/pages` folder.
+Example:
+``` bash
+./pug/pages/index.pug
+./pug/pages/about.pug
+```
+
+#### Change PUG Default Dir Folder:
+Example for `./pug/mynewfolder/pages`:
+* Change `./build/webpack.base.conf.js` const PAGES_DIR:
+``` js
+// Your new path
+const PAGES_DIR = `${PATHS.src}/pug/mynewfolder/pages/`
+```
+3. Rerun webpack dev server
+
+## Create Another PUG Files:
+#### Default: 
+Automatic creation any pug pages:
+1. Create another pug file in `./pug/pages/`
+2. Open new page `http://localhost:8081/about.html` (Don't forget to RERUN dev server)
+
+#### Second method:
+Manual (not Automaticlly) creation any pug pages (Don't forget to RERUN dev server and COMMENT lines above)
+1. Create another pug file in `./pug/pages/`
+2. Go to `./build/webpack.base.conf.js`
+3. Comment lines above (create automaticlly pug pages)
+4. Create new page in pug:
+``` js
+    new HtmlWebpackPlugin({
+      template: `${PAGES_DIR}/about/index.pug`,
+      filename: './about/index.html',
+      inject: true
+    }),
+    new HtmlWebpackPlugin({
+      template: `${PAGES_DIR}/about/portfolio.pug`,
+      filename: './about/portfolio.html',
+      inject: true
+    })
+```
+5. Open new page `http://localhost:8081/about.html` (Don't forget to RERUN dev server)
+
+#### Third method: (BEST)
+Сombine the first method and the second.
+Example:
+``` js
+    ...PAGES.map(page => new HtmlWebpackPlugin({
+      template: `${PAGES_DIR}/${page}`,
+      filename: `./${page.replace(/\.pug/,'.html')}`
+    }))
+    new HtmlWebpackPlugin({
+      template: `${PAGES_DIR}/about/index.pug`,
+      filename: './about/index.html',
+      inject: true
+    })
+```
+
+
+## Vue install:
+Default: **already have**
+
+1. Install vue
+``` bash
+npm install vue --save
+```
+2. Init vue `index.js`:
+``` js
+const app = new Vue({
+  el: '#app'
+})
+```
+3. Create div id app
+``` pug
+#app
+  //- Content
+```
+
+## Vuex install:
+1. Install vuex
+``` bash
+npm install vuex --save
+```
+2. Import Vuex
+``` js
+import store from './store'
+```
+3. Create index.js in `./store`
+``` js
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  // vuex content
+})
+```
+
+## Add Vue Components:
+Create your component in `/components/`
+
+**PUG Usage:**
+1. Init component in `index.js`:
+``` js
+Vue.component('example-component', require('./components/Example.vue').default)
+```
+2. Any pug files:
+``` pug
+example-component
+```
+
+**VUE Usage:**
+1. import components in .vue:
+``` js
+import example from '~/components/Example.vue'
+```
+2. Register component:
+``` js
+  components: {
+    example
+  }
+```
+3. Init in vue component:
+``` html
+<example />
+```
+
+## Add Fonts:
+Add @font-face in `/assets/scss/utils/fonts.scss`:
+
+``` scss
+// Example with Helvetica
+@font-face {
+  font-family: "Helvetica-Base";
+  src: url('/assets/fonts/Helvetica/Base/Helvetica-Base.eot'); /* IE9 Compat Modes */
+  src: url('/assets/fonts/Helvetica/Base/Helvetica-Base.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/assets/fonts/Helvetica/Base/Helvetica-Base.woff') format('woff'), /* Pretty Modern Browsers */
+       url('/assets/fonts/Helvetica/Base/Helvetica-Base.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('/assets/fonts/Helvetica/Base/Helvetica-Base.svg') format('svg'); /* Legacy iOS */
+}
+```
+
+Add vars for font in `/assets/scss/utils/vars.scss`:
+
+``` scss
+$mySecontFont : 'Helvetica-Base', Arial, sans-serif;
+```
+
+
+## License
+[MIT](./LICENSE)
+
+Copyright (c) 2018-present, [Evgenii Vedegis](https://github.com/vedees)
--- a/conf/postcss.config.js
+++ b/conf/postcss.config.js
@ -0,0 +1,18 @@
+const sortCSSmq = require('sort-css-media-queries');
+module.exports = {
+  plugins: [
+    require('autoprefixer'),
+    require('css-mqpacker')({
+      sort: sortCSSmq.desktopFirst
+    }),
+    require('cssnano')({
+      preset: [
+        'default', {
+          discardComments: {
+            removeAll: true
+          }
+        }
+      ]
+    })
+  ]
+}
--- a/conf/webpack.base.conf.js
+++ b/conf/webpack.base.conf.js
@ -0,0 +1,201 @@
+const path = require('path')
+const fs = require('fs')
+const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { VueLoaderPlugin } = require('vue-loader')
+const globImporter = require('node-sass-glob-importer');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+
+
+const PATHS = {
+  src: path.join(__dirname, '../src'),
+  dist: path.join(__dirname, '../dist'),
+  assets: 'assets/',
+  fonts: 'assets/fonts',
+  img: 'assets/img',
+  sprites:'assets/sprites/',
+  svgicon:'../src/assets/svg-icon/',
+  svgcoloricon:'../src/assets/svg-color-icon/',
+}
+
+const PAGES_DIR = `${PATHS.src}/pug/pages/`
+const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'))
+
+module.exports = {
+  externals: {
+    paths: PATHS
+  },
+  entry: {
+    app: PATHS.src,
+    // module: `${PATHS.src}/your-module.js`,
+  },
+  output: {
+    filename: `${PATHS.assets}js/[name].js`,
+    path: PATHS.dist,
+  },
+  optimization: {
+    // minimize: false,
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          name: 'vendors',
+          test: /node_modules/,
+          chunks: 'all',
+          enforce: true
+        }
+      }
+    }
+  },
+  module: {
+    rules: [{
+      test: /\.pug$/,
+      loader: 'pug-loader',
+      options:{
+        pretty: '\t'
+      }
+    }, {
+      test: /\.js$/,
+      loader: 'babel-loader',
+      exclude: '/node_modules/'
+    }, {
+      test: /\.vue$/,
+      loader: 'vue-loader',
+      options: {
+        loader: {
+          scss: 'vue-style-loader!css-loader!sass-loader'
+        }
+      }
+    }, {
+      test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
+      loader: 'file-loader',
+      options: {
+        name: '[name].[ext]',
+        outputPath: PATHS.fonts,
+        publicPath: '../fonts/'
+      }
+    }, {
+      test: /\.(png|jpg|gif)$/,
+      loader: 'file-loader',
+      options: {
+        name: '[name].[ext]',
+        outputPath: PATHS.img,
+        publicPath: '../img/'
+      }
+    },
+    {
+      test: /\.svg$/,
+      include: [
+        path.resolve(__dirname, PATHS.svgicon),
+      ],
+      use:[{
+        loader: 'svg-sprite-loader',
+        options: {
+          esModule: false,
+          extract: true,
+          spriteFilename: 'sprite.svg',
+          // outputPath: PATHS.sprites,
+          publicPath: PATHS.sprites,
+        }
+      },{
+        loader: 'svgo-loader',
+        options: {
+          plugins: [
+            { removeNonInheritableGroupAttrs: true },
+            { collapseGroups: true },
+            { removeAttrs: { attrs: '(fill|stroke)' } },
+          ]
+        }
+      }]
+    },
+    {
+      test: /\.svg$/,
+      include: [
+        path.resolve(__dirname, PATHS.svgcoloricon),
+      ],
+      use:[{
+        loader: 'svg-sprite-loader',
+        options: {
+          esModule: false,
+          extract: true,
+          spriteFilename: 'spritecolor.svg',
+          // outputPath: PATHS.sprites,
+          publicPath: PATHS.sprites,
+        }
+      },{
+        loader: 'svgo-loader',
+        options: {
+          plugins: [
+            { removeNonInheritableGroupAttrs: true },
+            { collapseGroups: true },
+          ]
+        }
+      }]
+    },
+    
+    {
+      test: /\.scss$/,
+      use: [
+        'style-loader',
+        MiniCssExtractPlugin.loader,
+        {
+          loader: 'css-loader',
+          options: { sourceMap: true }
+        }, {
+          loader: 'postcss-loader',
+          options: { sourceMap: true, config: { path: `./conf/postcss.config.js` } }
+        }, {
+          loader: 'sass-loader',
+          options: { 
+            sourceMap: true,
+            // importer: globImporter()
+          }
+        }
+      ]
+    }, {
+      test: /\.css$/,
+      use: [
+        'style-loader',
+        MiniCssExtractPlugin.loader,
+        {
+          loader: 'css-loader',
+          options: { sourceMap: true }
+        }, {
+          loader: 'postcss-loader',
+          options: { sourceMap: true, config: { path: `./conf/postcss.config.js` } }
+        }
+      ]
+    }]
+  },
+  resolve: {
+    alias: {
+      '~': PATHS.src,
+      'vue$': 'vue/dist/vue.js',
+    }
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery'
+    }),
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: `${PATHS.assets}css/[name].css`,
+    }),
+    new SpriteLoaderPlugin({
+      plainSprite: true
+    }),
+    new CopyWebpackPlugin([
+      { from: `${PATHS.src}/${PATHS.assets}img`, to: `${PATHS.assets}img` },
+      // { from: `${PATHS.src}/${PATHS.assets}fonts`, to: `${PATHS.assets}fonts` },
+      // { from: `${PATHS.src}/static`, to: '' },
+    ]),
+    ...PAGES.map(page => new HtmlWebpackPlugin({
+      template: `${PAGES_DIR}/${page}`,
+      filename: `./${page.replace(/\.pug/,'.html')}`
+    }))
+  ],
+}
--- a/conf/webpack.build.conf.js
+++ b/conf/webpack.build.conf.js
@ -0,0 +1,25 @@
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const ImageSpritePlugin = require('image-sprite-webpack-plugin');
+
+const buildWebpackConfig = merge(baseWebpackConfig, {
+  // BUILD config
+  mode: 'production',
+  plugins: [
+    new ImageSpritePlugin({
+      commentOrigin: false,
+      compress: true,
+      extensions: ['png'],
+      indent: '',
+      log: true,
+      //outputPath: './public',
+      outputFilename: 'assets/sprites/sprite-[hash].png',
+      padding: 20
+      // suffix: '?' + Date.now() // do not need to use it with a outputFilename's [hash].
+    })
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  resolve(buildWebpackConfig)
+})
--- a/conf/webpack.dev.conf.js
+++ b/conf/webpack.dev.conf.js
@ -0,0 +1,38 @@
+const webpack =  require('webpack')
+const merge = require('webpack-merge')
+const ImageSpritePlugin = require('image-sprite-webpack-plugin');
+const baseWebpackConfig = require('./webpack.base.conf')
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  // DEV config
+  mode: 'development',
+  devtool: 'cheap-module-eval-source-map',
+  devServer: {
+    contentBase: baseWebpackConfig.externals.paths.dist,
+    port: 8081,
+    overlay: {
+      warnings: true,
+      errors: true
+    }
+  },
+  plugins: [
+    new webpack.SourceMapDevToolPlugin({
+      filename: '[file].map'
+    }),
+    new ImageSpritePlugin({
+      commentOrigin: true,
+      compress: false,
+      extensions: ['png'],
+      indent: '  ',
+      log: true,
+      //outputPath: './public',
+      outputFilename: 'assets/sprites/sprite.png',
+      padding: 20,
+      suffix: ''
+    })
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  resolve(devWebpackConfig)
+})
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,71 @@
+{
+  "name": "webpacktemplate",
+  "version": "1.0.0",
+  "description": "My template + pug",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server --open --config ./conf/webpack.dev.conf.js",
+    "build": "webpack --config ./conf/webpack.build.conf.js"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 3 version"
+  ],
+  "author": "https://github.com/vedees",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vedees/webpack-template-pug.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vedees/webpack-template-pug/issues"
+  },
+  "keywords": [
+    "webpack",
+    "webpack4",
+    "merge",
+    "bable",
+    "bable7",
+    "scss",
+    "pug"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "autoprefixer": "^9.8.6",
+    "babel-loader": "^8.2.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "^2.1.1",
+    "css-mqpacker": "^7.0.0",
+    "cssnano": "^4.1.10",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "image-sprite-webpack-plugin": "^0.2.4",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass-glob-importer": "^5.3.2",
+    "postcss-loader": "^3.0.0",
+    "pug": "^2.0.4",
+    "pug-loader": "^2.4.0",
+    "sass": "^1.50.0",
+    "sass-loader": "^10.3.1",
+    "sort-css-media-queries": "^1.5.2",
+    "style-loader": "^0.23.1",
+    "svg-sprite-loader": "^4.3.0",
+    "svgo-loader": "^2.2.1",
+    "vue-loader": "^15.9.5",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.12",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {
+    "@fancyapps/ui": "^4.0.26",
+    "inputmask": "^4.0.9",
+    "jquery": "^3.6.0",
+    "select2": "^4.0.13",
+    "swiper": "^8.4.5"
+  }
+}
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -0,0 +1 @@
+/* Example css file */
--- a/src/assets/fonts/Roboto/Roboto-Bold.eot
+++ b/src/assets/fonts/Roboto/Roboto-Bold.eot
--- a/src/assets/fonts/Roboto/Roboto-Bold.ttf
+++ b/src/assets/fonts/Roboto/Roboto-Bold.ttf
--- a/src/assets/fonts/Roboto/Roboto-Bold.woff
+++ b/src/assets/fonts/Roboto/Roboto-Bold.woff
--- a/src/assets/fonts/Roboto/Roboto-Bold.woff2
+++ b/src/assets/fonts/Roboto/Roboto-Bold.woff2
--- a/src/assets/fonts/Roboto/Roboto-BoldItalic.eot
+++ b/src/assets/fonts/Roboto/Roboto-BoldItalic.eot
--- a/src/assets/fonts/Roboto/Roboto-BoldItalic.ttf
+++ b/src/assets/fonts/Roboto/Roboto-BoldItalic.ttf
--- a/src/assets/fonts/Roboto/Roboto-BoldItalic.woff
+++ b/src/assets/fonts/Roboto/Roboto-BoldItalic.woff
--- a/src/assets/fonts/Roboto/Roboto-BoldItalic.woff2
+++ b/src/assets/fonts/Roboto/Roboto-BoldItalic.woff2
--- a/src/assets/fonts/Roboto/Roboto-Italic.eot
+++ b/src/assets/fonts/Roboto/Roboto-Italic.eot
--- a/src/assets/fonts/Roboto/Roboto-Italic.ttf
+++ b/src/assets/fonts/Roboto/Roboto-Italic.ttf
--- a/src/assets/fonts/Roboto/Roboto-Italic.woff
+++ b/src/assets/fonts/Roboto/Roboto-Italic.woff
--- a/src/assets/fonts/Roboto/Roboto-Italic.woff2
+++ b/src/assets/fonts/Roboto/Roboto-Italic.woff2
--- a/src/assets/fonts/Roboto/Roboto-Medium.eot
+++ b/src/assets/fonts/Roboto/Roboto-Medium.eot
--- a/src/assets/fonts/Roboto/Roboto-Medium.ttf
+++ b/src/assets/fonts/Roboto/Roboto-Medium.ttf
--- a/src/assets/fonts/Roboto/Roboto-Medium.woff
+++ b/src/assets/fonts/Roboto/Roboto-Medium.woff
--- a/src/assets/fonts/Roboto/Roboto-Medium.woff2
+++ b/src/assets/fonts/Roboto/Roboto-Medium.woff2
--- a/src/assets/fonts/Roboto/Roboto-MediumItalic.eot
+++ b/src/assets/fonts/Roboto/Roboto-MediumItalic.eot
--- a/src/assets/fonts/Roboto/Roboto-MediumItalic.ttf
+++ b/src/assets/fonts/Roboto/Roboto-MediumItalic.ttf
--- a/src/assets/fonts/Roboto/Roboto-MediumItalic.woff
+++ b/src/assets/fonts/Roboto/Roboto-MediumItalic.woff
--- a/src/assets/fonts/Roboto/Roboto-MediumItalic.woff2
+++ b/src/assets/fonts/Roboto/Roboto-MediumItalic.woff2
--- a/src/assets/fonts/Roboto/Roboto-Regular.eot
+++ b/src/assets/fonts/Roboto/Roboto-Regular.eot
--- a/src/assets/fonts/Roboto/Roboto-Regular.ttf
+++ b/src/assets/fonts/Roboto/Roboto-Regular.ttf
--- a/src/assets/fonts/Roboto/Roboto-Regular.woff
+++ b/src/assets/fonts/Roboto/Roboto-Regular.woff
--- a/src/assets/fonts/Roboto/Roboto-Regular.woff2
+++ b/src/assets/fonts/Roboto/Roboto-Regular.woff2
--- a/src/assets/icon/.gitkeep
+++ b/src/assets/icon/.gitkeep
--- a/src/assets/img/.gitkeep
+++ b/src/assets/img/.gitkeep
--- a/src/assets/scss/components/icons.scss
+++ b/src/assets/scss/components/icons.scss
@ -0,0 +1,15 @@
+/*-------------- icons -----------------*/
+.icon{
+	display: inline-block;
+	vertical-align: middle;
+	max-width: 100%;
+	max-height: 100%;
+	fill: #404040;
+
+	&.ic-white{fill: #fff;}
+
+	&.ic-stroke{
+		stroke: var(--color-text);
+		fill: transparent;
+	}
+}
--- a/src/assets/scss/components/type-icon.scss
+++ b/src/assets/scss/components/type-icon.scss
@ -0,0 +1,21 @@
+/*-------------- type-icon -----------------*/
+.type-icon{
+	display: flex;
+	flex-wrap: wrap;
+
+	&__item{
+		width: 100px;
+		margin: 15px;
+		text-align: center;
+	}
+
+	&__img{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100px;
+		width: 100%;
+	}
+
+	&_white{color: #fff;}
+}
--- a/src/assets/scss/layouts/footer.scss
+++ b/src/assets/scss/layouts/footer.scss
--- a/src/assets/scss/layouts/header.scss
+++ b/src/assets/scss/layouts/header.scss
--- a/src/assets/scss/layouts/main.scss
+++ b/src/assets/scss/layouts/main.scss
@ -0,0 +1,176 @@
+:root{
+	--font-site: 'Roboto', Arial, sans-serif;
+	--color-primary: #005a8e;
+	--color-text: #172540;
+	--color-link: var(--color-primary);
+	--color-link-hover: var(--color-text);
+
+	--color-danger: #E01E1E;
+	--margin-indent: 140px;
+	--bg-grey: #F2F2F2;
+}
+
+
+html,
+body{
+	background: #fff;
+	font-family: var(--font-site);
+	@include font(normal, normal, .9375vw, 1.5, var(--color-text));
+	box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+	font-size: inherit;
+	font-family: inherit;
+}
+
+img{max-width: 100%;}
+
+a{
+	color: var(--color-link);
+	transition: color 0.2s ease 0s;
+}
+
+a:hover,
+a:active,
+a:focus{
+	color: var(--color-link-hover);
+	text-decoration: none;
+}
+
+p{
+	padding: 0;
+	margin-bottom: 1.0416666667vw;
+}
+
+h1,.h1,
+h2,.h2,
+h3,.h3,
+h4,.h4,
+h5,.h5
+{
+	line-height: 1.4;
+	color: var(--color-primary);
+}
+
+h1,.h1{
+	font-size: 2.5vw;
+	margin-bottom: 2.6041666667vw;
+}
+
+h2,.h2{
+	font-size: 2.5vw;
+	margin-top: 2.6041666667vw;
+	margin-bottom: 2.6041666667vw;
+}
+
+h3,.h3{
+	font-size: 1.5625vw;
+	margin-top: 1.0416666667vw;
+	margin-bottom: 1.0416666667vw;
+}
+
+h4,.h4{
+	font-size: 1.25vw;
+	text-transform: uppercase;
+	margin-top: 1.0416666667vw;
+	margin-bottom: 1.0416666667vw;
+}
+
+h5,.h5{
+	font-size: 1vw;
+	text-transform: uppercase;
+	margin-top: 1.0416666667vw;
+	margin-bottom: 1.0416666667vw;
+}
+
+.wrapper{
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	width: 100%;
+	max-width: 1920px;
+	height: 100%;
+	margin: 0 auto;
+}
+
+main{
+	flex: 1 1 auto;
+	padding-bottom: 76px;
+	width: 100%;
+}
+
+.btn,
+input[type="submit"].btn,
+button.btn{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 22px;
+	height: 2.8645833333vw;
+	// min-width: 260px;
+	background: var(--color-primary);
+	border: 1px solid var(--color-primary);
+	border-radius: 8px;
+	@include font(normal, 500, .9375vw, 1.2, #fff);
+	text-transform: uppercase;
+	text-align: center;
+	letter-spacing: 2px;
+	text-decoration: none;
+	text-align: center;
+	padding: 0 25px;
+	cursor: pointer;
+	transition: all 0.2s ease-in-out 0s;
+
+
+	.icon{
+		flex-shrink: 0;
+		fill: #fff;
+	}
+
+	.icon.ic-stroke{
+		fill: transparent;
+		stroke: #fff;
+		transition: all 0.2s ease 0s;
+	}
+
+	&:hover{
+		translate: 0 -6px;
+		color: #fff;
+
+		.icon{fill: var(--color-text);}
+
+		.icon.ic-stroke{
+			fill: transparent;
+			stroke: var(--color-text);
+		}
+	}
+
+	&_border{border-color: #fff;}
+
+	&_white{
+		border-color: #fff;
+		background: #fff;
+		color: var(--color-primary);
+	}
+}
+
+.code{
+	background-color: #f7f7f7;
+	border: 1px solid #e1e1e8;
+	color: #d14;
+	padding: 1px 4px;
+	display: inline-block;
+	font-family: monospace, arial;
+	border-radius: 3px;
+}
+
+.text-left{text-align: left !important;}
+.text-center{text-align: center !important;}
+.text-right{text-align: right !important;}
+.text-justify{text-align: justify !important;}
+.text-uppercase{text-transform: uppercase !important;}
+.text-bold {font-weight: 700 !important;}
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@ -0,0 +1,18 @@
+// fancybox
+// @import '~@fancyapps/fancybox/dist/jquery.fancybox.css';
+
+@import "utils/vars";
+
+// Наш сайт
+// @import "utils/libs";
+@import "utils/mixins";
+@import "utils/fonts";
+@import "utils/reset";
+
+
+@import "layouts/main";
+@import "layouts/header";
+@import "layouts/footer";
+
+@import "components/icons";
+@import "components/type-icon";
--- a/src/assets/scss/utils/fonts.scss
+++ b/src/assets/scss/utils/fonts.scss
@ -0,0 +1,78 @@
+
+@font-face {
+	font-family: 'Roboto';
+	src:  url('#{$path-fonts}/Roboto/Roboto-MediumItalic.eot');
+	src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
+		 url('#{$path-fonts}/Roboto/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'),
+		 url('#{$path-fonts}/Roboto/Roboto-MediumItalic.woff') format('woff'),
+		 url('#{$path-fonts}/Roboto/Roboto-MediumItalic.woff2') format('woff2'),
+		 url('#{$path-fonts}/Roboto/Roboto-MediumItalic.ttf') format('truetype');
+	font-weight: 500;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src:  url('#{$path-fonts}/Roboto/Roboto-Italic.eot');
+	src: local('Roboto Italic'), local('Roboto-Italic'),
+		 url('#{$path-fonts}/Roboto/Roboto-Italic.eot?#iefix') format('embedded-opentype'),
+		 url('#{$path-fonts}/Roboto/Roboto-Italic.woff') format('woff'),
+		 url('#{$path-fonts}/Roboto/Roboto-Italic.woff2') format('woff2'),
+		 url('#{$path-fonts}/Roboto/Roboto-Italic.ttf') format('truetype');
+	font-weight: normal;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src:  url('#{$path-fonts}/Roboto/Roboto-Bold.eot');
+	src: local('Roboto Bold'), local('Roboto-Bold'),
+		 url('#{$path-fonts}/Roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
+		 url('#{$path-fonts}/Roboto/Roboto-Bold.woff') format('woff'),
+		 url('#{$path-fonts}/Roboto/Roboto-Bold.woff2') format('woff2'),
+		 url('#{$path-fonts}/Roboto/Roboto-Bold.ttf') format('truetype');
+	font-weight: bold;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src:  url('#{$path-fonts}/Roboto/Roboto-Regular.eot');
+	src: local('Roboto'), local('Roboto-Regular'),
+		 url('#{$path-fonts}/Roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
+		 url('#{$path-fonts}/Roboto/Roboto-Regular.woff') format('woff'),
+		 url('#{$path-fonts}/Roboto/Roboto-Regular.woff2') format('woff2'),
+		 url('#{$path-fonts}/Roboto/Roboto-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src:  url('#{$path-fonts}/Roboto/Roboto-Medium.eot');
+	src: local('Roboto Medium'), local('Roboto-Medium'),
+		 url('#{$path-fonts}/Roboto/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
+		 url('#{$path-fonts}/Roboto/Roboto-Medium.woff') format('woff'),
+		 url('#{$path-fonts}/Roboto/Roboto-Medium.woff2') format('woff2'),
+		 url('#{$path-fonts}/Roboto/Roboto-Medium.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src:  url('#{$path-fonts}/Roboto/Roboto-BoldItalic.eot');
+	src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
+		 url('#{$path-fonts}/Roboto/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'),
+		 url('#{$path-fonts}/Roboto/Roboto-BoldItalic.woff') format('woff'),
+		 url('#{$path-fonts}/Roboto/Roboto-BoldItalic.woff2') format('woff2'),
+		 url('#{$path-fonts}/Roboto/Roboto-BoldItalic.ttf') format('truetype');
+	font-weight: bold;
+	font-style: italic;
+	font-display: swap;
+}
--- a/src/assets/scss/utils/libs.scss
+++ b/src/assets/scss/utils/libs.scss
@ -0,0 +1,2 @@
+// libs here
+// see more: https://github.com/vedees/webpack-template/blob/master/README.md#import-only-sass-or-css-libs
--- a/src/assets/scss/utils/mixins.scss
+++ b/src/assets/scss/utils/mixins.scss
@ -0,0 +1,18 @@
+@mixin font($font-style, $font-weight, $font-size, $line-height, $font-color) {
+	font-style: $font-style;
+	font-weight: $font-weight;
+	font-size: $font-size;
+	line-height: $line-height;
+	color: $font-color;
+}
+
+@mixin top-center {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+@mixin reset-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
--- a/src/assets/scss/utils/reset.scss
+++ b/src/assets/scss/utils/reset.scss
@ -0,0 +1,62 @@
+// Default
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+// Links
+a {
+  text-decoration: none;
+  &:active, &:hover {
+    outline: 0;
+  }
+}
+
+// List
+ul, li {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+// Headlines
+h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
+
+// Default
+html { box-sizing: border-box; }
+*, *:before, *:after { box-sizing: border-box; }
+:focus { outline: 0; }
+
+img, audio, video { max-width: 100%; height: auto; }
+audio, canvas, iframe, video, img, svg { vertical-align: middle; }
+iframe { border: 0 }
+
+// From
+textarea {
+  resize: none; /*remove the resize handle on the bottom right*/
+  overflow: auto;
+  vertical-align: top;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+}
+input, textarea, select, button { outline: none; border: none; font-size: 100%; margin: 0;}
+button, input { line-height: normal; }
+
+// Table
+table { border-collapse: collapse; border-spacing: 0; }
+td, th { padding: 0; text-align: left; }
--- a/src/assets/scss/utils/vars.scss
+++ b/src/assets/scss/utils/vars.scss
@ -0,0 +1,34 @@
+//Path
+$path-img: "../img";
+$path-fonts: "../fonts";
+
+//Font
+// $font-site: 'Roboto', Arial, sans-serif;
+
+// Site
+// $color-text: #000;
+// $color-grey: #818181;
+// $color-grey-light: #bfbfbf;
+
+// Grid
+// $grid-breakpoints: (
+//   xs: 0,
+//   sm: 576px,
+//   md: 768px,
+//   lg: 992px,
+//   xl: 1200px,
+//   xxl: 1336px,
+//   xxxl: 1890px
+// ) !default;
+
+// $container-max-widths: (
+//   sm: 540px,
+//   md: 720px,
+//   lg: 960px,
+//   xl: 1140px,
+//   xxl: 1310px,
+//   xxxl: 1860px
+// ) !default;
+
+
+// $grid-columns: 16;
--- a/src/assets/svg-color-icon/.gitkeep
+++ b/src/assets/svg-color-icon/.gitkeep
--- a/src/assets/svg-icon/ic-twitter.svg
+++ b/src/assets/svg-icon/ic-twitter.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 132 108" style="enable-background:new 0 0 132 108;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#2CA7E0;}
+</style>
+<g id="形状_2">
+	<g>
+		<path class="st0" d="M132,12.7c-4.9,2.2-10.1,3.6-15.6,4.3c5.6-3.4,9.9-8.7,11.9-15c-5.2,3.1-11,5.4-17.2,6.6
+			C106.2,3.3,99.2,0,91.4,0c-15,0-27.1,12.1-27.1,27.1c0,2.1,0.2,4.2,0.7,6.2C42.5,32.1,22.5,21.3,9.2,5c-2.3,4-3.7,8.7-3.7,13.6
+			c0,9.4,4.8,17.7,12,22.5C13.1,41,9,39.8,5.3,37.7c0,0.1,0,0.2,0,0.3c0,13.1,9.3,24.1,21.7,26.6c-2.3,0.6-4.7,1-7.1,1
+			c-1.7,0-3.4-0.2-5.1-0.5c3.4,10.8,13.4,18.6,25.3,18.8c-9.3,7.3-20.9,11.6-33.6,11.6c-2.2,0-4.3-0.1-6.5-0.4
+			c12,7.7,26.2,12.2,41.5,12.2c49.8,0,77.1-41.3,77.1-77.1c0-1.2,0-2.3-0.1-3.5C123.8,22.9,128.4,18.1,132,12.7z"/>
+	</g>
+</g>
+</svg>
--- a/src/components/.gitkeep
+++ b/src/components/.gitkeep
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,9 @@
+// import './assets/img/_sprite.svg';
+import './js/'
+import './assets/scss/main.scss'
+
+global.$ = global.jQuery = $;
+
+function requireAll(r){r.keys().forEach(r);}
+requireAll(require.context('./assets/svg-icon/', true, /\.svg$/));
+requireAll(require.context('./assets/svg-color-icon/', true, /\.svg$/));
--- a/src/js/common.js
+++ b/src/js/common.js
@ -0,0 +1,8 @@
+import $ from 'jquery';
+// import '@fancyapps/fancybox'
+// import 'bootstrap/js/dist/modal';
+// import 'slick-slider/slick/slick.min.js';
+// import 'select2';
+// import Inputmask from "inputmask";
+
+export {$};
--- a/src/js/index.js
+++ b/src/js/index.js
@ -0,0 +1,10 @@
+import {$} from './common';
+
+$(window).scroll(function(){
+	if($(this).scrollTop()>300){
+		$('.js-move-up').addClass('visible');
+	}else{
+		$('.js-move-up').removeClass('visible');
+	}
+});
+$('.js-move-up').click(function(){$('body,html').animate({scrollTop:0},800);return false;});
--- a/src/pug/components/item-test.pug
+++ b/src/pug/components/item-test.pug
@ -0,0 +1 @@
+div тест
--- a/src/pug/layout/footer.pug
+++ b/src/pug/layout/footer.pug
@ -0,0 +1,2 @@
+footer.footer
+	.st-width footer
--- a/src/pug/layout/header.pug
+++ b/src/pug/layout/header.pug
@ -0,0 +1,2 @@
+header.header
+	.st-width header
--- a/src/pug/layout/main.pug
+++ b/src/pug/layout/main.pug
@ -0,0 +1,20 @@
+include ../utils/mixins
+block variables
+
+doctype html
+html(lang='ru')
+	head
+		meta(charset='utf-8')
+		meta(name='viewport', content='width=device-width, initial-scale=1')
+		title #{title}
+
+	body
+		.wrapper
+			include ./header
+			main
+				block header-ban
+				block breadcrumb
+				if h1
+					+h1(h1)
+				block content
+			include ./footer
--- a/src/pug/pages/index.pug
+++ b/src/pug/pages/index.pug
@ -0,0 +1,22 @@
+extends ../layout/main
+
+block variables
+	- var title = 'Содержание';
+	- 
+		var pagelist = [
+			{href: 'main.html',name:'Главная'},
+			{href: 'tipografika.html',name:'Типографика'},
+		];
+
+block content
+	section
+		.container
+			.row
+				.col-12
+					h1 содержание
+					ul
+						each page in pagelist
+							li
+								a(href=page.href,)= page.name
+
+
--- a/src/pug/pages/tipografika.pug
+++ b/src/pug/pages/tipografika.pug
@ -0,0 +1,72 @@
+extends ../layout/main
+
+block variables
+	- var title = 'Типографика';
+	- var h1 = 'Типографика';
+
+
+block breadcrumb
+	-
+		var breadcrumbs=[
+			{href:'/',name:'Главная'},
+			{href:'#',name:'Типографика'},
+		];
+
+	+breadcrumbs(breadcrumbs)
+
+block content
+	section.st-width
+		p
+			a(href='#') Это стандартная ссылка
+
+		p Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
+
+		p По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у некторых людей недоумение при попытках прочитать рыбу текст. В отличии от lorem ipsum, текст рыба на русском языке наполнит любой макет непонятным смыслом и придаст неповторимый колорит советских времен.
+
+		br
+		br
+		div.h2 Доп. классы для текста
+		p <span class="code">text-left</span> Выравнивание текста по левому краю
+		p <span class="code">text-center</span> Выравнивание текста по центру
+		p <span class="code">text-right</span> Выравнивание текста по правому краю
+		p <span class="code">text-justify</span> Выравнивание текста по ширине
+		p <span class="code">text-uppercase</span> Все символы текста становятся прописными (верхний регистр)
+		p <span class="code">text-bold</span> Жирный текст
+
+		br
+		br
+		div.h2 Заголовки
+		h1 Заголовок - h1
+		h2 Заголовок - h2
+		h3 Заголовок - h3
+		h4 Заголовок - h4
+		h5 Заголовок - h5
+
+		br
+		p.h1 Это класс с названием h1
+		p.h2 Это класс с названием h2
+		p.h3 Это класс с названием h3
+		p.h4 Это класс с названием h4
+		p.h5 Это класс с названием h5
+
+		br
+		br
+		br
+		div.h2 Кнопки
+		a.btn(href='#') Кнопка
+		br
+		br
+		a.btn.btn_border(href='#') Кнопка
+		br
+		br
+		div(style="background: var(--color-primary); padding: 20px")
+		a.btn.btn_white(href='#') Кнопка
+
+		br
+		br
+		div.h2 Иконки
+		.type-icon
+			.type-icon__item
+				.type-icon__img
+					+svg('ic-twitter','ic-twitter', '17', '14')
+				.type-icon__name ic-twitter
--- a/src/pug/utils/mixins.pug
+++ b/src/pug/utils/mixins.pug
@ -0,0 +1,24 @@
+mixin h1(v)
+	.container
+		.row
+			.col-12
+				h1= v
+
+
+mixin breadcrumbs(links)
+	- var len=links.length
+	.container.d-none.d-md-block
+		.row
+			.col-12
+				ul.breadcrumb
+					- var i=0
+					while i < len-1
+						li.breadcrumb__item
+							a(href=links[i].href).breadcrumb__link=links[i].name
+						- i++
+					li.breadcrumb__item
+						span=links[i].name
+
+mixin svg(icon, name_class, width,height)
+	svg.icon(class=name_class?name_class:'', width=width?width:'', height=height?height:'')
+		use(xlink:href='assets/sprites/sprite.svg#'+icon)
--- a/src/static/.gitkeep
+++ b/src/static/.gitkeep