├── dev
    ├── js
    │   └── index.js
    ├── sass
    │   └── index.scss
    └── html
    │   ├── index.html
    │   └── templates
    │       ├── footer.html
    │       └── header.html
├── .browserslistrc
├── examples
    ├── sass-smacss
    │   ├── layout
    │   │   ├── _footer.scss
    │   │   ├── _header.scss
    │   │   └── _index.scss
    │   ├── modules
    │   │   ├── _index.scss
    │   │   └── _buttons.scss
    │   ├── base
    │   │   ├── _index.scss
    │   │   ├── _base.scss
    │   │   └── _print.scss
    │   ├── index.scss
    │   └── README.md
    ├── sass-utilities-mixins
    │   ├── base
    │   │   ├── _index.scss
    │   │   └── _base.scss
    │   ├── functions
    │   │   ├── _index.scss
    │   │   └── _utils.scss
    │   ├── configs
    │   │   ├── _index.scss
    │   │   ├── _config.scss
    │   │   ├── _colors.scss
    │   │   ├── _vars.scss
    │   │   └── _typography.scss
    │   ├── mixins
    │   │   ├── _resets.scss
    │   │   ├── _hover.scss
    │   │   ├── _index.scss
    │   │   ├── _if-no-supported.scss
    │   │   ├── _typography.scss
    │   │   ├── _centered.scss
    │   │   ├── _hide.scss
    │   │   └── _media.scss
    │   ├── index.scss
    │   └── README.md
    └── sass-bootstrap-3
    │   ├── index.scss
    │   ├── vendor
    │       ├── _index.scss
    │       ├── _bootstrap.scss
    │       ├── _vars_overwrites.scss
    │       └── _grid_customized.scss
    │   └── README.md
├── .babelrc
├── renovate.json
├── .gitignore
├── gulpfile.js
├── .travis.yml
├── .eslintrc.js
├── tasks
    ├── sizeReport.js
    ├── static.js
    ├── fonts.js
    ├── lib
    │   └── logger.js
    ├── default.js
    ├── js.js
    ├── watch.js
    ├── clean.js
    ├── html.js
    ├── images.js
    ├── sprite.js
    ├── browserSync.js
    └── css.js
├── .editorconfig
├── ISSUE_TEMPLATE.md
├── .env.dist
├── .env.wordpress
├── LICENSE
├── webpack.config.js
├── CONTRIBUTING.md
├── config.js
├── package.json
├── CODE_OF_CONDUCT.md
└── README.md


/dev/js/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/dev/sass/index.scss:
--------------------------------------------------------------------------------
1 | @charset 'utf-8';
2 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | last 3 versions
2 | > 2%
3 | 


--------------------------------------------------------------------------------
/examples/sass-smacss/layout/_footer.scss:
--------------------------------------------------------------------------------
1 | .l-footer {}
2 | 


--------------------------------------------------------------------------------
/examples/sass-smacss/layout/_header.scss:
--------------------------------------------------------------------------------
1 | .l-header {}
2 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env"]
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/sass-smacss/modules/_index.scss:
--------------------------------------------------------------------------------
1 | @import 'buttons';
2 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/base/_index.scss:
--------------------------------------------------------------------------------
1 | @import 'base';
2 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/functions/_index.scss:
--------------------------------------------------------------------------------
1 | @import "utils";
2 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "config:base"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/sass-smacss/base/_index.scss:
--------------------------------------------------------------------------------
1 | @import 'base';
2 | @import 'print';
3 | 
4 | 


--------------------------------------------------------------------------------
/examples/sass-smacss/layout/_index.scss:
--------------------------------------------------------------------------------
1 | @import 'header';
2 | @import 'footer';
3 | 


--------------------------------------------------------------------------------
/examples/sass-bootstrap-3/index.scss:
--------------------------------------------------------------------------------
1 | @charset 'utf-8';
2 | 
3 | @import 'vendor/index';
4 | 


--------------------------------------------------------------------------------
/dev/html/index.html:
--------------------------------------------------------------------------------
1 | @@include('header.html')
2 |   <h1>Hello world!</h1>
3 | @@include('footer.html')
4 | 


--------------------------------------------------------------------------------
/dev/html/templates/footer.html:
--------------------------------------------------------------------------------
1 |     <script src="assets/js/main.js"></script>
2 |   </body>
3 | </html>
4 | 


--------------------------------------------------------------------------------
/examples/sass-smacss/modules/_buttons.scss:
--------------------------------------------------------------------------------
1 | .btn {
2 |   &.btn-rounded {}
3 |   &.is-btn-active {}
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | assets
 3 | dist
 4 | yarn-error.log
 5 | npm-debug.log
 6 | /*.html
 7 | .DS_Store
 8 | .idea
 9 | .env
10 | 


--------------------------------------------------------------------------------
/examples/sass-smacss/index.scss:
--------------------------------------------------------------------------------
1 | @charset 'utf-8';
2 | 
3 | @import 'base/index';
4 | @import 'layout/index';
5 | @import 'modules/index';
6 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/configs/_index.scss:
--------------------------------------------------------------------------------
1 | @import 'colors';
2 | @import 'config';
3 | @import 'vars';
4 | @import 'typography';
5 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/mixins/_resets.scss:
--------------------------------------------------------------------------------
1 | @mixin reset-list {
2 |   list-style: none;
3 |   margin: 0;
4 |   padding: 0;
5 | }
6 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config();
2 | 
3 | const requireDir = require('require-dir');
4 | 
5 | requireDir('./tasks', { recurse: true });
6 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/mixins/_hover.scss:
--------------------------------------------------------------------------------
1 | @mixin hover {
2 |   &:hover,
3 |   &.active,
4 |   &.current-menu-item {
5 |     @content;
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/examples/sass-bootstrap-3/vendor/_index.scss:
--------------------------------------------------------------------------------
1 | @import 'normalize-css/normalize';
2 | 
3 | @import 'bootstrap';
4 | @import 'vars_overwrites';
5 | @import 'grid_customized';
6 | 


--------------------------------------------------------------------------------
/examples/sass-bootstrap-3/vendor/_bootstrap.scss:
--------------------------------------------------------------------------------
1 | @import 'bootstrap-sass/assets/stylesheets/bootstrap/variables';
2 | @import 'bootstrap-sass/assets/stylesheets/bootstrap/mixins';
3 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/index.scss:
--------------------------------------------------------------------------------
1 | @charset 'utf-8';
2 | 
3 | @import 'functions/index';
4 | @import 'configs/index';
5 | @import 'mixins/index';
6 | @import 'base/index';
7 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "10.16.0"
 4 | before_script:
 5 |   - cp .env.dist .env
 6 | install:
 7 |   - yarn install
 8 | script:
 9 |   - yarn build
10 | os:
11 |   - linux
12 | 


--------------------------------------------------------------------------------
/examples/sass-bootstrap-3/README.md:
--------------------------------------------------------------------------------
1 | # Bootstrap 3
2 | 
3 | 1. Install [bootstrap 3](yarn add https://www.npmjs.com/package/bootstrap-sass) official Sass port:
4 | 
5 | `yarn add bootstrap-sass -D`
6 | 
7 | 


--------------------------------------------------------------------------------
/examples/sass-smacss/README.md:
--------------------------------------------------------------------------------
1 | ## SMACSS
2 | 
3 | SMACSS is a CSS methodology ([read more](https://smacss.com/)).
4 | 
5 | In this example we tried to fit the convention shared by the methodology.
6 | 
7 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/README.md:
--------------------------------------------------------------------------------
1 | ## Utilities and mixins
2 | 
3 | In this example we want to show how to make your Sass code more DRY using 
4 | real-world **variables, mixins, functions**.
5 | 
6 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/mixins/_index.scss:
--------------------------------------------------------------------------------
1 | @import "centered";
2 | @import "hide";
3 | @import "hover";
4 | @import "if-no-supported";
5 | @import "media";
6 | @import "resets";
7 | @import "typography";
8 | 


--------------------------------------------------------------------------------
/examples/sass-smacss/base/_base.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 |   font-size: 1rem;
 4 |   height: 100%;
 5 | }
 6 | 
 7 | * {
 8 |   box-sizing: inherit;
 9 | 
10 |   &:before,
11 |   &:after {
12 |     @extend *;
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     "extends": "airbnb-base",
3 |     "rules": {
4 |       "import/no-extraneous-dependencies": [2, { devDependencies: true }],
5 |       "no-unused-expressions": ["error", {"allowTernary": true}],
6 |     }
7 | };
8 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/mixins/_if-no-supported.scss:
--------------------------------------------------------------------------------
 1 | @mixin supported($feature) {
 2 |   .#{$feature} & {
 3 |     @content;
 4 |   }
 5 | }
 6 | 
 7 | @mixin not-supported($feature) {
 8 |   .no-js &,
 9 |   .no-#{$feature} & {
10 |     @content;
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/mixins/_typography.scss:
--------------------------------------------------------------------------------
 1 | @mixin make-headlines($font-size, $scale) {
 2 |   $value: 1;
 3 | 
 4 |   @for $i from 4 through 1 {
 5 |     .h#{$i}, h#{$i} {
 6 |       $value: $scale * $value;
 7 |       font-size: ($value) + rem;
 8 |       @content;
 9 |     }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/tasks/sizeReport.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | const sizeReport = require('gulp-sizereport');
 3 | const path = require('path');
 4 | 
 5 | const config = require('../config');
 6 | 
 7 | gulp.task('sizeReport', () =>
 8 |   gulp
 9 |     .src(path.join(config.root.dist, 'assets/**/*.+(css|js)'))
10 |     .pipe(sizeReport()));
11 | 


--------------------------------------------------------------------------------
/tasks/static.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | const path = require('path');
 3 | const { reload } = require('browser-sync');
 4 | 
 5 | const config = require('../config');
 6 | 
 7 | gulp.task('static', () =>
 8 |   gulp
 9 |     .src(path.join(config.root.dev, config.static.dev, '**/*'))
10 |     .pipe(gulp.dest(path.join(config.root.dist, config.static.dist)))
11 |     .pipe(reload({ stream: true })));
12 | 


--------------------------------------------------------------------------------
/tasks/fonts.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | const path = require('path');
 3 | const { reload } = require('browser-sync');
 4 | 
 5 | const config = require('../config');
 6 | 
 7 | gulp.task('fonts', () =>
 8 |   gulp
 9 |     .src(path.join(config.root.dev, config.fonts.dev, config.fonts.extensions))
10 |     .pipe(gulp.dest(path.join(config.root.dist, config.fonts.dist)))
11 |     .pipe(reload({ stream: true })));
12 | 


--------------------------------------------------------------------------------
/tasks/lib/logger.js:
--------------------------------------------------------------------------------
 1 | const gUtil = require('gulp-util');
 2 | 
 3 | function Log(taskName, message) {
 4 |   this.error = function error() {
 5 |     throw new gUtil.PluginError({
 6 |       plugin: taskName,
 7 |       message: gUtil.colors.red(message),
 8 |     });
 9 |   };
10 |   this.info = function info() {
11 |     gUtil.log(taskName, gUtil.colors.magenta(message));
12 |   };
13 | }
14 | 
15 | module.exports = Log;
16 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | indent_size = 2
 8 | indent_style = space
 9 | max_line_length = 80
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | 
13 | [*.md]
14 | max_line_length = 0
15 | trim_trailing_whitespace = false
16 | 
17 | [COMMIT_EDITMSG]
18 | max_line_length = 0
19 | 
20 | [Makefile]
21 | indent_size = 2
22 | indent_style = tab
23 | 


--------------------------------------------------------------------------------
/dev/html/templates/header.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <title></title>
 7 |     <meta name="description" content="">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <meta name="theme-color" content="#fafafa">
10 |     <link rel="stylesheet" href="/assets/css/main.css">
11 |   </head>
12 |   <body>
13 | 


--------------------------------------------------------------------------------
/tasks/default.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | const runSequence = require('run-sequence');
 3 | 
 4 | const config = require('../config');
 5 | 
 6 | const assets = ['images', 'fonts', 'static', 'sprite'];
 7 | 
 8 | if (config.html.run) {
 9 |   assets.push('html');
10 | }
11 | 
12 | gulp.task('default', (cb) => {
13 |   config.production
14 |     ? runSequence('clean', assets, ['css', 'js'], 'sizeReport', cb)
15 |     : runSequence(assets, 'css', 'watch', cb);
16 | });
17 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/mixins/_centered.scss:
--------------------------------------------------------------------------------
 1 | @mixin center-vertically {
 2 |   display: inline-block;
 3 |   float: none;
 4 |   vertical-align: middle;
 5 | }
 6 | 
 7 | @mixin pad-ratio($x, $y, $selector: img) {
 8 |   position: relative;
 9 |   padding: 0 0 percentage($y/$x) 0;
10 |   height: 0;
11 | 
12 |   #{$selector} {
13 |     position: absolute;
14 |     top: 0;
15 |     left: 0;
16 |     width: 100%;
17 |     height: 100%;
18 |   }
19 | }
20 | 
21 | @mixin center-box {
22 |   display: block;
23 |   margin-left: auto;
24 |   margin-right: auto;
25 | }
26 | 


--------------------------------------------------------------------------------
/tasks/js.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | const webpack = require('webpack');
 3 | 
 4 | const webpackConfig = require('../webpack.config');
 5 | 
 6 | const Log = require('./lib/logger');
 7 | 
 8 | gulp.task('js', (cb) => {
 9 |   webpack(webpackConfig, (err, stats) => {
10 |     if (err) {
11 |       new Log('Webpack', err).error();
12 |     }
13 | 
14 |     new Log('Webpack', stats.toString({
15 |       assets: true,
16 |       chunks: false,
17 |       chunkModules: false,
18 |       colors: true,
19 |       hash: false,
20 |       timings: true,
21 |       version: false,
22 |     })).info();
23 | 
24 |     cb();
25 |   });
26 | });
27 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/configs/_config.scss:
--------------------------------------------------------------------------------
 1 | $mq: (
 2 |   p: "print",
 3 |   s: "screen",
 4 |   ld: "(orientation: landscape)",
 5 |   pt: "(orientation: portrait)",
 6 |   hd: "handheld",
 7 |   r2: ("(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi)"),
 8 |   r3: ("(-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx), (min-resolution: 300dpi)"),
 9 |   ar169: ("device-aspect-ratio: 16/9")
10 | ) !default;
11 | 
12 | $zindex: (
13 |   null: 0,
14 |   back: -1000,
15 |   default: 1,
16 |   base: 1000,
17 |   footer: 1100,
18 |   header: 1000,
19 |   sidebar: 900,
20 |   drop: 1300,
21 |   overlay: 1400,
22 |   top: 1000,
23 |   modal: 1500
24 | ) !default;
25 | 


--------------------------------------------------------------------------------
/tasks/watch.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | const path = require('path');
 3 | const watch = require('gulp-watch');
 4 | 
 5 | const config = require('../config');
 6 | 
 7 | const Log = require('./lib/logger');
 8 | 
 9 | gulp.task('watch', ['liveReload'], () => {
10 |   const tasksToWatch = ['css', 'images', 'sprite', 'static', 'fonts', 'js'];
11 | 
12 |   if (config.html.run) {
13 |     tasksToWatch.push('html');
14 |   }
15 | 
16 |   tasksToWatch.forEach((task) => {
17 |     if (!config[ task ]) {
18 |       return new Log('watch', `Task "${task}" is not exist.`).error();
19 |     }
20 | 
21 |     watch(path.resolve(config.root.dev, config[task].dev), () => {
22 |       gulp.start(task);
23 |     });
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | # Expected Behavior
 2 | 
 3 | Please describe the behavior you are expecting
 4 | 
 5 | # Current Behavior
 6 | 
 7 | What is the current behavior?
 8 | 
 9 | # Failure Information (for bugs)
10 | 
11 | Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.
12 | 
13 | ## Steps to Reproduce
14 | 
15 | Please provide detailed steps for reproducing the issue.
16 | 
17 | 1. step 1
18 | 2. step 2
19 | 3. you get it...
20 | 
21 | ## Context
22 | 
23 | Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
24 | 
25 | * Operating System.
26 | * Node & npm versions.
27 | 


--------------------------------------------------------------------------------
/examples/sass-bootstrap-3/vendor/_vars_overwrites.scss:
--------------------------------------------------------------------------------
 1 | // Overwrites bootstrap 3 config
 2 | 
 3 | $screen-xs-min: 480px !default;
 4 | $screen-sm-min: 768px !default;
 5 | $screen-md-min: 992px !default;
 6 | $screen-lg-min: 1200px !default;
 7 | 
 8 | $screen-xs-max: ($screen-sm-min - 1) !default;
 9 | $screen-sm-max: ($screen-md-min - 1) !default;
10 | $screen-md-max: ($screen-lg-min - 1) !default;
11 | $screen-lg-max: 1920px !default;
12 | 
13 | $container-sm: (720px + $grid-gutter-width) !default;
14 | $container-md: (940px + $grid-gutter-width) !default;
15 | $container-lg: (1140px + $grid-gutter-width) !default;
16 | 
17 | $breakpoints: (
18 |   xs: $screen-xs-min,
19 |   sm: $screen-sm-min,
20 |   md: $screen-md-min,
21 |   lg: $screen-lg-min,
22 |   xl: $screen-lg-max
23 | ) !default;
24 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/configs/_colors.scss:
--------------------------------------------------------------------------------
 1 | // Descriptive colors
 2 | $black: #000 !default;
 3 | $black-light: lighten(#000, 25%) !default;
 4 | $white: #fff !default;
 5 | $white-darken: darken($white, 35%);
 6 | $red: red !default;
 7 | 
 8 | // Theme colors
 9 | $color-primary: $black !default;
10 | $color-accent: $red !default;
11 | $color-shadow: rgba($black, .125);
12 | 
13 | // Main elements colors
14 | $text-link: $color-accent !default;
15 | $color-text-main: $black-light !default;
16 | $color-headers: $black-light !default;
17 | 
18 | // Links
19 | $color-link: $color-accent !default;
20 | $color-link-hover: darken($color-accent, 10%) !default;
21 | $color-link-visited: $color-accent !default;
22 | $color-link-bg-hover: $color-accent !default;
23 | 
24 | // Backgrounds
25 | $color-background: $white !default;
26 | 


--------------------------------------------------------------------------------
/tasks/clean.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | const del = require('del');
 3 | 
 4 | const config = require('../config');
 5 | 
 6 | const Log = require('./lib/logger');
 7 | 
 8 | gulp.task('clean', () => {
 9 |   const tasksFoldersToDelete = ['js', 'css', 'images', 'sprite', 'fonts'].map(task => {
10 |     if (!config[ task ] || !config[ task ].dist) {
11 |       return new Log(
12 |         'clear',
13 |         `Task "${task}" is NOT exist or dist folder was not specified properly.`
14 |       ).error();
15 |     }
16 | 
17 |     return `${config.root.dist}/${config[ task ].dist}`;
18 |   });
19 | 
20 |   if (config.html.run) {
21 |     tasksFoldersToDelete.push(`${config.root.dist}/${config.html.dist}/*.html`);
22 |   }
23 | 
24 |   del.sync(tasksFoldersToDelete, {
25 |     force: config.cleanFilesOutsideWorkingDir,
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/tasks/html.js:
--------------------------------------------------------------------------------
 1 | const fileInclude = require('gulp-file-include');
 2 | const gulp = require('gulp');
 3 | const notify = require('gulp-notify');
 4 | const path = require('path');
 5 | const plumber = require('gulp-plumber');
 6 | const { reload } = require('browser-sync');
 7 | 
 8 | const config = require('../config');
 9 | 
10 | gulp.task('html', () =>
11 |   gulp
12 |     .src(path.join(config.root.dev, config.html.dev, './*.html'))
13 |     .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
14 |     .pipe(fileInclude({
15 |       prefix: '@@',
16 |       basepath: path.join(
17 |         config.root.dev,
18 |         config.html.dev,
19 |         config.html.parts,
20 |       ),
21 |     }))
22 |     .pipe(gulp.dest(path.join(config.root.dist, config.html.dist)))
23 |     .pipe(reload({ stream: true })));
24 | 
25 | 


--------------------------------------------------------------------------------
/.env.dist:
--------------------------------------------------------------------------------
 1 | CLEAN_FILES_OUTSIDE_WORKING_DIR=true
 2 | 
 3 | ROOT_DEV=./dev
 4 | ROOT_DIST=./dist
 5 | 
 6 | HTML_DEV=html
 7 | HTML_DIST=./
 8 | HTML_PARTS=templates
 9 | HTML_RUN=true
10 | 
11 | CSS_DEV=sass
12 | CSS_DIST=assets/css
13 | CSS_EXTENTIONS=*.+(css|scss)
14 | CSS_PURGE=false
15 | CSS_PURGE_WHITELIST=active,in,opened
16 | CSS_PURGE_CONTENT=./dev/html/**/*.html
17 | 
18 | JS_DEV=js
19 | JS_DIST=assets/js
20 | 
21 | IMAGES_DEV=images/**/
22 | IMAGES_DIST=assets/images
23 | IMAGES_EXTENTIONS=*.+(jpg|jpeg|gif|png|svg)
24 | 
25 | SVG_SPRITE_DEV=images/sprite
26 | SVG_SPRITE_DIST=assets/sprite
27 | 
28 | FONTS_DEV=fonts
29 | FONTS_DIST=assets/fonts
30 | FONTS_EXTENTIONS=*.+(woff2|woff|eot|ttf|svg)
31 | 
32 | STATIC_DEV=static
33 | STATIC_DIST=assets/static
34 | 
35 | BROWSER_SYNC_PORT=3333
36 | BROWSER_SYNC_TARGET=
37 | BROWSER_SYNC_PUBLIC_PATH=
38 | BROWSER_SYNC_FILES=
39 | 


--------------------------------------------------------------------------------
/examples/sass-bootstrap-3/vendor/_grid_customized.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   @include container-fixed;
 3 | 
 4 |   @media (min-width: $screen-sm-min) {
 5 |     width: $container-sm;
 6 |   }
 7 |   @media (min-width: $screen-md-min) {
 8 |     width: $container-md;
 9 |   }
10 |   @media (min-width: $screen-lg-min) {
11 |     width: $container-lg;
12 |   }
13 | }
14 | 
15 | .container-fixed {
16 |   @include container-fixed;
17 |   max-width: $screen-lg-max;
18 | }
19 | 
20 | .container-fluid {
21 |   @include container-fixed;
22 | }
23 | 
24 | .row {
25 |   @include make-row;
26 | }
27 | 
28 | @include make-grid-columns;
29 | 
30 | @include make-grid(xs);
31 | 
32 | @media (min-width: $screen-sm-min) {
33 |   @include make-grid(sm);
34 | }
35 | 
36 | @media (min-width: $screen-md-min) {
37 |   @include make-grid(md);
38 | }
39 | 
40 | @media (min-width: $screen-lg-min) {
41 |   @include make-grid(lg);
42 | }
43 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/mixins/_hide.scss:
--------------------------------------------------------------------------------
 1 | @mixin hide-text {
 2 |   overflow: hidden;
 3 |   text-indent: 101%;
 4 |   white-space: nowrap;
 5 | }
 6 | 
 7 | // Hide only visually, but have it available for screenreaders
 8 | @mixin hidden {
 9 |   border: 0;
10 |   clip: rect(0 0 0 0);
11 |   height: 1px;
12 |   margin: -1px;
13 |   overflow: hidden;
14 |   padding: 0;
15 |   position: absolute;
16 |   width: 1px;
17 | 
18 |   // Extends the .visually-hidden class to allow the element to be focusable
19 |   // when navigated to via the keyboard: h5bp.com/p
20 |   &.focusable {
21 |     &:active,
22 |     &:focus {
23 |       clip: auto;
24 |       height: auto;
25 |       margin: 0;
26 |       overflow: visible;
27 |       position: static;
28 |       width: auto;
29 |     }
30 |   }
31 | }
32 | 
33 | // Hide visually and from screen readers, but maintain layout
34 | @mixin invisible {
35 |   visibility: hidden;
36 | }
37 | 


--------------------------------------------------------------------------------
/.env.wordpress:
--------------------------------------------------------------------------------
 1 | CLEAN_FILES_OUTSIDE_WORKING_DIR=true
 2 | 
 3 | ROOT_DEV=./dev
 4 | ROOT_DIST=..
 5 | 
 6 | HTML_DEV=html
 7 | HTML_DIST=./
 8 | HTML_PARTS=templates
 9 | HTML_RUN=false
10 | 
11 | CSS_DEV=sass
12 | CSS_DIST=assets/css
13 | CSS_EXTENTIONS=*.+(css|scss)
14 | CSS_PURGE=false
15 | CSS_PURGE_WHITELIST=active,in,opened
16 | CSS_PURGE_CONTENT=../**/*.php
17 | 
18 | JS_DEV=js
19 | JS_DIST=assets/js
20 | 
21 | IMAGES_DEV=images/**/
22 | IMAGES_DIST=assets/images
23 | IMAGES_EXTENTIONS=*.+(jpg|jpeg|gif|png|svg)
24 | 
25 | SVG_SPRITE_DEV=images/sprite
26 | SVG_SPRITE_DIST=assets/sprite
27 | 
28 | FONTS_DEV=fonts
29 | FONTS_DIST=assets/fonts
30 | FONTS_EXTENTIONS=*.+(woff2|woff|eot|ttf|svg)
31 | 
32 | STATIC_DEV=static
33 | STATIC_DIST=assets/static
34 | 
35 | BROWSER_SYNC_PORT=3333
36 | BROWSER_SYNC_TARGET=http://localhost/[awesome_wp_project]/
37 | BROWSER_SYNC_PUBLIC_PATH=http://localhost:3333/[awesome_wp_project]/wp-content/themes/[theme_folder_name]/assets/js/
38 | BROWSER_SYNC_FILES=*.php
39 | 


--------------------------------------------------------------------------------
/tasks/images.js:
--------------------------------------------------------------------------------
 1 | const changed = require('gulp-changed');
 2 | const gulp = require('gulp');
 3 | const imageMin = require('gulp-imagemin');
 4 | const notify = require('gulp-notify');
 5 | const path = require('path');
 6 | const plumber = require('gulp-plumber');
 7 | const pngQuant = require('imagemin-pngquant');
 8 | const { reload } = require('browser-sync');
 9 | 
10 | const config = require('../config');
11 | 
12 | gulp.task('images', () =>
13 |   gulp
14 |     .src(path.join(config.root.dev, config.images.dev, config.images.extensions))
15 |     .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
16 |     .pipe(changed(path.join(config.root.dist, config.images.dist)))
17 |     .pipe(imageMin({
18 |       progressive: true,
19 |       svgoPlugins: [
20 |         { removeViewBox: false },
21 |         { cleanupIDs: false },
22 |       ],
23 |       use: [
24 |         pngQuant(),
25 |       ],
26 |     }))
27 |     .pipe(gulp.dest(path.join(config.root.dist, config.images.dist)))
28 |     .pipe(reload({ stream: true })));
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Dmytro Chumak
 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.


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/configs/_vars.scss:
--------------------------------------------------------------------------------
 1 | // Grid
 2 | $grid-gutter-width: 30px !default;
 3 | $grid-columns: 12 !default;
 4 | 
 5 | // Links
 6 | $link-hover-decoration: none !default;
 7 | 
 8 | // Border radius
 9 | $border-radius-base: 0 !default;
10 | $border-radius-medium: 6px !default;
11 | $border-radius-small: 3px !default;
12 | 
13 | // Animation
14 | $timeline-base: .4s !default;
15 | $timeline-fast: .2s !default;
16 | $timeline-slow: .8s !default;
17 | 
18 | // Border
19 | $b-s-base: 1px;
20 | $b-s-medium: $b-s-base*3;
21 | $b-s-big: $b-s-medium*2;
22 | 
23 | // Padding/margin
24 | $padding: $grid-gutter-width/2 !default;
25 | $margin: $grid-gutter-width/2 !default;
26 | 
27 | // Padding for elements
28 | $padding-base-vertical: 6px !default;
29 | $padding-base-horizontal: 12px !default;
30 | 
31 | $padding-large-vertical: 10px !default;
32 | $padding-large-horizontal: 16px !default;
33 | 
34 | $padding-small-vertical: 5px !default;
35 | $padding-small-horizontal: 10px !default;
36 | 
37 | // Cursor controls
38 | $cursor-active: pointer !default;
39 | $cursor-disabled: not-allowed !default;
40 | $cursor-resize: col-resize !default;
41 | 


--------------------------------------------------------------------------------
/tasks/sprite.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | const { reload } = require('browser-sync');
 3 | const notify = require('gulp-notify');
 4 | const plumber = require('gulp-plumber');
 5 | const sprite = require('gulp-svg-sprite');
 6 | const path = require('path');
 7 | 
 8 | const config = require('../config');
 9 | 
10 | const svgSpiteConfig = {
11 |   shape: {
12 |     spacing: {
13 |       padding: 10,
14 |     },
15 |     dimension: {
16 |       maxWidth: 32,
17 |       maxHeight: 32,
18 |     },
19 |   },
20 |   mode: {
21 |     css: {
22 |       dimensions: true,
23 |       common: 'icon',
24 |       layout: 'vertical',
25 |       prefix: '.icon-',
26 |       bust: false,
27 |       dest: '.',
28 |       sprite: './sprite.svg',
29 |       render: {
30 |         css: true
31 |       }
32 |     }
33 |   },
34 | };
35 | 
36 | gulp.task('sprite', () =>
37 |   gulp
38 |     .src(path.join(config.root.dev, config.sprite.dev, '*.svg'))
39 |     .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
40 |     .pipe(sprite(svgSpiteConfig))
41 |     .pipe(gulp.dest(path.join(config.root.dist, config.sprite.dist)))
42 |     .pipe(reload({ stream: true })));
43 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/base/_base.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 |   font-size: 1rem;
 4 |   height: 100%;
 5 | }
 6 | 
 7 | * {
 8 |   box-sizing: inherit;
 9 | 
10 |   &:before,
11 |   &:after {
12 |     @extend *;
13 |   }
14 | }
15 | 
16 | body {
17 |   -webkit-font-smoothing: antialiased; //Make text look good on mac(Tim Van Damme test)
18 |   color: $color-text-main;
19 |   font: #{$font-size-base}/#{$line-height-base} $font-family-base;
20 |   height: 100%;
21 |   overflow-x: hidden;
22 |   text-rendering: optimizeLegibility; //The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures. https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
23 | }
24 | 
25 | @include make-headlines($font-size-base, $scale-typography);
26 | 
27 | a {
28 |   background: transparent;
29 |   color: $color-link;
30 |   text-decoration: $link-hover-decoration;
31 |   transition: color .2s;
32 | 
33 |   @include hover {
34 |     color: $color-link-hover;
35 |   }
36 | }
37 | 
38 | p {
39 |   color: transparentize($color-text-main, .1);
40 |   font-weight: 400;
41 |   line-height: $line-height-small;
42 |   margin: 0;
43 |   margin-bottom: $margin;
44 | }
45 | 
46 | small,
47 | .small {
48 |   color: $color-text-main;
49 |   font-size: $font-size-small;
50 |   line-height: $line-height-base;
51 | }
52 | 


--------------------------------------------------------------------------------
/tasks/browserSync.js:
--------------------------------------------------------------------------------
 1 | const browserSync = require('browser-sync');
 2 | const gulp = require('gulp');
 3 | const webpack = require('webpack');
 4 | const webpackDevMiddleware = require('webpack-dev-middleware');
 5 | const webpackHotMiddleware = require('webpack-hot-middleware');
 6 | 
 7 | const config = require('../config');
 8 | const webpackConfig = require('../webpack.config');
 9 | 
10 | const webpackCompiler = webpack(webpackConfig);
11 | 
12 | const browserSyncConfig = {
13 |   logPrefix: 'gulp-webpack-starter',
14 |   port: config.browserSync.port,
15 |   ui: {
16 |     port: config.browserSync.port + 1,
17 |   },
18 | };
19 | 
20 | /** Uses Proxy. Otherwise creates a server. */
21 | if (config.browserSync.proxy.target) {
22 |   browserSyncConfig.proxy = {
23 |     target: config.browserSync.proxy.target,
24 |   };
25 | 
26 |   browserSyncConfig.files = config.browserSync.proxy.files;
27 | } else {
28 |   browserSyncConfig.server = {
29 |     baseDir: config.root.dist,
30 |   };
31 | }
32 | 
33 | if (!config.production) {
34 |   browserSyncConfig.middleware = [
35 |     webpackDevMiddleware(webpackCompiler, {
36 |       publicPath: config.browserSync.proxy.publicPath,
37 |       noInfo: true,
38 |       stats: {
39 |         colors: true,
40 |       },
41 |     }),
42 |     webpackHotMiddleware(webpackCompiler),
43 |   ];
44 | }
45 | 
46 | gulp.task('liveReload', () => {
47 |   browserSync.init(browserSyncConfig);
48 | });
49 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path');
 3 | 
 4 | const config = require('./config');
 5 | 
 6 | const JS_DEV = path.resolve(config.root.dev, config.js.dev);
 7 | const JS_DIST = path.resolve(config.root.dist, config.js.dist);
 8 | 
 9 | const webpackConfig = {
10 |   mode: config.production ? 'production' : 'development',
11 |   optimization: {
12 |     minimize: config.production
13 |   },
14 |   context: JS_DEV,
15 |   entry: {
16 |     app: [
17 |       './index.js',
18 |     ],
19 |   },
20 |   output: {
21 |     path: JS_DIST,
22 |     filename: 'main.js',
23 |     publicPath: config.production ? '' : config.browserSync.proxy.publicPath,
24 |   },
25 |   module: {
26 |     rules: [
27 |       {
28 |         test: /\.js$/,
29 |         exclude: /node_modules/,
30 |         loader: 'babel-loader'
31 |       },
32 |     ],
33 |   },
34 |   resolve: {
35 |     modules: [
36 |       JS_DEV,
37 |       'node_modules',
38 |     ],
39 |     extensions: ['.js', '.json'],
40 |   },
41 |   plugins: [],
42 | };
43 | 
44 | /** Modifies webpackConfig depends on mode. */
45 | if (config.production) {
46 |   webpackConfig.plugins.push(
47 |     new webpack.NoEmitOnErrorsPlugin(),
48 |   );
49 | } else {
50 |   webpackConfig.devtool = 'inline-source-map';
51 |   webpackConfig.entry.app.unshift('webpack-hot-middleware/client?reload=true');
52 |   webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
53 | }
54 | 
55 | module.exports = webpackConfig;
56 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | [Questions and comments](https://gitter.im/gulp-webpack-starter/Lobby), [issues](https://github.com/wwwebman/gulp-webpack-starter/issues), [pull requests](https://github.com/wwwebman/gulp-webpack-starter/pulls) are all welcome.  
 3 | Let's create something cool together :raised_hand:
 4 | 
 5 | ## Getting Started - right way
 6 | 
 7 | * Make sure you have a [GitHub account](https://github.com/signup/free)
 8 | * Submit a Github issue for this Repo
 9 |   * Clearly describe the issue
10 | * Fork the repository on GitHub
11 | 
12 | ## Making Changes
13 | 
14 | * Create a topic branch from where you want to base your work
15 |   * This is usually the master branch
16 |   * Only target release branches if you are certain your fix must be on that
17 |     branch
18 |   * To quickly create a topic branch based on master, run `git checkout -b
19 |     fix/my_awesome_change`. Please avoid working directly on the
20 |     `master` branch
21 | * Make commits of logical and atomic units 
22 | * Check for unnecessary whitespace with `git diff --check` before committing
23 | * Make sure your commit messages are in the proper format:
24 |   * Short (50 chars or less) summary of changes
25 |   * Start the line with "Fix", "Add", "Change" instead of "Fixed", "Added", "Changed"
26 |   * Capitalize the subject line
27 | * Push changes
28 | * Create Pull Request
29 | 
30 | # Contributors
31 | * **[Samuel Allemang](https://github.com/scallemang)**
32 |   * Documentation improvements
33 | 
34 | 


--------------------------------------------------------------------------------
/examples/sass-smacss/base/_print.scss:
--------------------------------------------------------------------------------
 1 | //==============================================
 2 | // State/print
 3 | //==============================================
 4 | 
 5 | // @source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
 6 | 
 7 | @include media('print') {
 8 |   * {
 9 |     &:before,
10 |     &:after {
11 |       background: transparent !important;
12 |       color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
13 |       box-shadow: none !important;
14 |       text-shadow: none !important;
15 |     }
16 |   }
17 |   a,
18 |   a:visited {
19 |     text-decoration: underline;
20 |   }
21 | 
22 |   a[href]:after {
23 |     content: " (" attr(href) ")";
24 |   }
25 | 
26 |   abbr[title]:after {
27 |     content: " (" attr(title) ")";
28 |   }
29 | 
30 |   // Don't show links that are fragment identifiers,
31 |   // or use the `javascript:` pseudo protocol
32 |   a[href^="#"]:after,
33 |   a[href^="javascript:"]:after {
34 |     content: "";
35 |   }
36 |   pre,
37 |   blockquote {
38 |     border: 1px solid #999;
39 |     page-break-inside: avoid;
40 |   }
41 |   // Printing Tables:
42 |   // http://css-discuss.incutio.com/wiki/Printing_Tables
43 |   thead {
44 |     display: table-header-group;
45 |   }
46 |   tr,
47 |   img {
48 |     page-break-inside: avoid;
49 |   }
50 |   img {
51 |     max-width: 100% !important;
52 |   }
53 |   p,
54 |   h2,
55 |   h3 {
56 |     orphans: 3;
57 |     widows: 3;
58 |   }
59 |   h2,
60 |   h3 {
61 |     page-break-after: avoid;
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/tasks/css.js:
--------------------------------------------------------------------------------
 1 | const autoPrefixer = require('gulp-autoprefixer');
 2 | const gulp = require('gulp');
 3 | const gulpif = require('gulp-if');
 4 | const minify = require('gulp-clean-css');
 5 | const notify = require('gulp-notify');
 6 | const path = require('path');
 7 | const plumber = require('gulp-plumber');
 8 | const purgecss = require('gulp-purgecss');
 9 | const rename = require('gulp-rename');
10 | const sass = require('gulp-sass');
11 | const sourcemaps = require('gulp-sourcemaps');
12 | const { reload } = require('browser-sync');
13 | 
14 | const config = require('../config');
15 | 
16 | gulp.task('css', () =>
17 |   gulp
18 |     .src(path.join(config.root.dev, config.css.dev, 'index.scss'))
19 |     .pipe(gulpif(!config.production, sourcemaps.init()))
20 |     .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
21 |     .pipe(sass({
22 |       includePaths: ['./node_modules'],
23 |       outputStyle: 'expanded',
24 |       sourceMap: true,
25 |       errLogToConsole: true,
26 |     }))
27 |     .pipe(gulpif(
28 |       config.css.purge,
29 |       purgecss({
30 |         content: config.css.purgeContent,
31 |         whitelist: config.css.purgeWhitelist,
32 |       })
33 |     ))
34 |     .pipe(autoPrefixer())
35 |     .pipe(gulpif(
36 |       config.production,
37 |       minify({
38 |         keepSpecialComments: 0,
39 |       }),
40 |     ))
41 |     .pipe(gulpif(!config.production, sourcemaps.write()))
42 |     .pipe(rename('main.css'))
43 |     .pipe(gulp.dest(path.join(config.root.dist, config.css.dist)))
44 |     .pipe(reload({ stream: true })));
45 | 


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const { env } = process;
 4 | 
 5 | module.exports = {
 6 |   production: env.NODE_ENV === 'production',
 7 |   cleanFilesOutsideWorkingDir: env.CLEAN_FILES_OUTSIDE_WORKING_DIR === 'true',
 8 |   root: {
 9 |     dev: env.ROOT_DEV,
10 |     dist: env.ROOT_DIST,
11 |   },
12 |   html: {
13 |     dev: env.HTML_DEV,
14 |     dist: env.HTML_DIST,
15 |     parts: env.HTML_PARTS,
16 |     run: env.HTML_RUN === 'true',
17 |   },
18 |   css: {
19 |     dev: env.CSS_DEV,
20 |     dist: env.CSS_DIST,
21 |     extensions: env.CSS_EXTENTIONS,
22 |     purge: env.CSS_PURGE === 'true',
23 |     purgeWhitelist: env.CSS_PURGE_WHITELIST ? env.CSS_PURGE_WHITELIST.split(',') : [],
24 |     purgeContent: env.CSS_PURGE_CONTENT ? env.CSS_PURGE_CONTENT.split(',') : [],
25 |   },
26 |   js: {
27 |     dev: env.JS_DEV,
28 |     dist: env.JS_DIST,
29 |   },
30 |   images: {
31 |     dev: env.IMAGES_DEV,
32 |     dist: env.IMAGES_DIST,
33 |     extensions: env.IMAGES_EXTENTIONS,
34 |   },
35 |   sprite: {
36 |     dev: env.SVG_SPRITE_DEV,
37 |     dist: env.SVG_SPRITE_DIST,
38 |   },
39 |   fonts: {
40 |     dev: env.FONTS_DEV,
41 |     dist: env.FONTS_DIST,
42 |     extensions: env.FONTS_EXTENTIONS,
43 |   },
44 |   static: {
45 |     dev: env.STATIC_DEV,
46 |     dist: env.STATIC_DIST,
47 |   },
48 |   browserSync: {
49 |     port: Number(env.BROWSER_SYNC_PORT),
50 |     proxy: {
51 |       target: env.BROWSER_SYNC_TARGET,
52 |       publicPath: env.BROWSER_SYNC_PUBLIC_PATH || path.join('/', env.JS_DIST),
53 |       files: [
54 |         path.join(env.ROOT_DIST, env.BROWSER_SYNC_FILES)
55 |       ],
56 |     },
57 |   },
58 | };
59 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/configs/_typography.scss:
--------------------------------------------------------------------------------
 1 | $scale-typography: 1.25 !default;
 2 | 
 3 | // $base-font-size
 4 | $font-size-base: 18px !default;
 5 | $font-size-medium: ceil(($font-size-base * $scale-typography)) !default;
 6 | $font-size-large: ceil(($font-size-base * $scale-typography * 1.5)) !default;
 7 | $font-size-small: ceil(($font-size-base / $scale-typography)) !default;
 8 | 
 9 | // $line-height
10 | $line-height-base: 1 !default;
11 | $line-height-medium: 1.6 !default;
12 | $line-height-large: 1.8 !default;
13 | $line-height-small: 1.5 !default;
14 | 
15 | // Round a number down
16 | $line-height-count: floor(($font-size-base * $line-height-base)) !default;
17 | 
18 | // font family
19 | $font-family-fallback: 'Arial', sans-serif;
20 | $font-family-open: 'industry', sans-serif, $font-family-fallback;
21 | $font-family-base: $font-family-open;
22 | $font-family-second: $font-family-open;
23 | 
24 | $font-family-monospace: 'Inconsolata', 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'Courier', monospace;
25 | 
26 | // Use $typefaces to render custom font using @font-face.
27 | // $typefaces - {map}
28 | // @family - {string}
29 | // @weight - {integer} or {keyword} i.e. 800, bold
30 | // @style - {keyword} i.e. normal, italic
31 | 
32 | // $typefaces: (
33 | //   'industry': (
34 | //    family: 'industry',
35 | //    weight: 100,
36 | //    style: normal,
37 | //   )
38 | // );
39 | 
40 | @if variable-exists(typefaces) {
41 |   @each $file, $option in $typefaces {
42 |     @font-face {
43 |       font-family: map-get(map-get($typefaces, $file), family);
44 |       font-style: map-get(map-get($typefaces, $file), style);
45 |       font-weight: map-get(map-get($typefaces, $file), weight);
46 |       src: url('../fonts/#{$file}.ttf') format('truetype'),
47 |       url('../fonts/#{$file}.woff') format('woff'),
48 |       url('../fonts/#{$file}.woff2') format('woff2');
49 |     }
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gulp-webpack-starter",
 3 |   "version": "2.1.0",
 4 |   "description": "Gulp Webpack Starter - awesome static and WordPress site builder.",
 5 |   "engines": {
 6 |     "node": ">=10.16.0"
 7 |   },
 8 |   "keywords": [
 9 |     "gulp",
10 |     "webpack",
11 |     "html",
12 |     "sass",
13 |     "js",
14 |     "browsersync",
15 |     "gulp-webpack",
16 |     "gulp-starter",
17 |     "gulp-builder",
18 |     "wordpress",
19 |     "builder",
20 |     "toolkit"
21 |   ],
22 |   "author": "Dmytro Chumak <hello@webman.pro> (https://webman.pro/)",
23 |   "license": "MIT",
24 |   "repository": {
25 |     "type": "git",
26 |     "url": "https://github.com/wwwebman/gulp-webpack-starter.git"
27 |   },
28 |   "scripts": {
29 |     "start": "gulp",
30 |     "build": "cross-env NODE_ENV=production gulp"
31 |   },
32 |   "devDependencies": {
33 |     "@babel/core": "7.9.6",
34 |     "@babel/preset-env": "7.9.6",
35 |     "babel-core": "6.26.3",
36 |     "babel-loader": "8.1.0",
37 |     "browser-sync": "2.26.7",
38 |     "cross-env": "7.0.2",
39 |     "del": "5.1.0",
40 |     "dotenv": "8.2.0",
41 |     "eslint": "6.8.0",
42 |     "eslint-config-airbnb-base": "14.1.0",
43 |     "eslint-plugin-import": "2.20.2",
44 |     "glob": "7.1.6",
45 |     "gulp": "3.9.1",
46 |     "gulp-autoprefixer": "7.0.1",
47 |     "gulp-changed": "4.0.2",
48 |     "gulp-clean-css": "4.3.0",
49 |     "gulp-file-include": "2.2.2",
50 |     "gulp-if": "3.0.0",
51 |     "gulp-imagemin": "7.1.0",
52 |     "gulp-notify": "3.2.0",
53 |     "gulp-plumber": "1.2.1",
54 |     "gulp-prompt": "1.2.0",
55 |     "gulp-purgecss": "2.1.2",
56 |     "gulp-rename": "2.0.0",
57 |     "gulp-sass": "4.1.0",
58 |     "gulp-sizereport": "1.2.1",
59 |     "gulp-sourcemaps": "2.6.5",
60 |     "gulp-svg-sprite": "1.5.0",
61 |     "gulp-util": "3.0.8",
62 |     "gulp-watch": "5.0.1",
63 |     "imagemin-pngquant": "8.0.0",
64 |     "path": "0.12.7",
65 |     "require-dir": "1.2.0",
66 |     "run-sequence": "2.2.1",
67 |     "webpack": "4.43.0",
68 |     "webpack-dev-middleware": "3.7.2",
69 |     "webpack-hot-middleware": "2.25.0"
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/mixins/_media.scss:
--------------------------------------------------------------------------------
 1 | @function parse-expression($expr) {
 2 |   $val: "";
 3 |   $width: "";
 4 |   $result: "";
 5 |   $is-custom: true;
 6 |   $operator: str-slice($expr, 1, 1);
 7 |   $equally: str-slice($expr, 2, 2);
 8 | 
 9 |   // Checks if is $operator or $equally
10 |   @if ($operator == ">" or $operator == "<" and ($equally != "=")) {
11 |     $val: str-slice($expr, 2);
12 |   } @else if (($operator == ">") or ($operator == "<") and ($equally == "=")) {
13 |     $val: str-slice($expr, 3);
14 |   } @else {
15 |     $val: str-slice($expr, 1);
16 |   }
17 | 
18 |   // Gets value
19 |   @if map-has-key($breakpoints, $val) {
20 |     $result: map-get($breakpoints, $val);
21 |   } @else if map-has-key($mq, $val) {
22 |     $result: map-get($mq, $val);
23 |     $is-custom: false;
24 |   } @else {
25 |     $result: $val;
26 |   }
27 | 
28 |   // Gets operator
29 |   @if ($is-custom == true) {
30 |     @if (($operator == ">") and ($equally != "=")) {
31 |       $result: "(min-width: #{$result})";
32 |     } @else if (($operator == "<") and ($equally != "=")) {
33 |       $result: "(max-width: #{$result - 1})";
34 |     } @else if (($operator == "<") and ($equally == "=")) {
35 |       $result: "(max-width: #{$result})";
36 |     } @else if (($operator == ">") and ($equally == "=")) {
37 |       $result: "(min-width: #{$result})";
38 |     }
39 |   } @else {
40 |     $result: $result;
41 |   }
42 | 
43 |   @return $result;
44 | }
45 | 
46 | @function concat($expressions) {
47 |   $result: "";
48 |   @each $expression in $expressions {
49 |     @if (str-length($result) != 0) {
50 |       $result: $result + " and ";
51 |     }
52 |     $result: $result + $expression;
53 |   }
54 |   @return $result;
55 | }
56 | 
57 | @mixin media($conditions...) {
58 |   @for $i from 1 through length($conditions) {
59 |     $conditions: set-nth($conditions, $i, parse-expression(nth($conditions, $i)));
60 |   }
61 | 
62 |   $concats: concat($conditions);
63 |   $mq: "";
64 | 
65 |   @each $concat in $concats {
66 |     @if (str-length($mq) != 0) {
67 |       $mq: $mq + ", ";
68 |     }
69 |     $mq: $mq + $concat;
70 |   }
71 | 
72 |   @media #{$mq} {
73 |     @content;
74 |   }
75 | }
76 | 
77 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our Standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our Responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at github@webman.pro. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 | 
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 | 


--------------------------------------------------------------------------------
/examples/sass-utilities-mixins/functions/_utils.scss:
--------------------------------------------------------------------------------
  1 | // Unit Conversion
  2 | // strip-unit($num)
  3 | //
  4 | // Strip units from values.
  5 | //
  6 | // $num       - Value to be stripped.
  7 | // @returns   - number
  8 | // @source    - http://hugogiraudel.com/2013/08/12/sass-functions
  9 | @function strip-unit($num) {
 10 |   @return $num / ($num * 0 + 1);
 11 | }
 12 | 
 13 | // em()
 14 | //
 15 | //  Convert pixel values to ems.
 16 | //
 17 | // $target    - Value to convert to ems.
 18 | // $context   - The context the conversion is based on. Defaults to `$base-font-size`
 19 | // @requires  - `$base-font-size` / `@strip-units`
 20 | // @returns   - number
 21 | // @source    - http://www.pjmccormick.com/sweet-sass-function-convert-px-em
 22 | @function em($target, $context: $font-size-base) {
 23 |   @if not unitless($target) {
 24 |     $target: strip-unit($target);
 25 |   }
 26 |   @if not unitless($context) {
 27 |     $context: strip-unit($context);
 28 |   }
 29 |   @if $target == 0 {
 30 |     @return 0
 31 |   }
 32 |   @return $target / $context + 0em;
 33 | }
 34 | 
 35 | // rem()
 36 | //
 37 | // Convert pixel values to rems.
 38 | //
 39 | // $target    - Value to convert to ems.
 40 | // $context   - The context the conversion is based on. Defaults to `$base-font-size`
 41 | // @requires  - `$base-font-size` / `@strip-units`
 42 | // @returns   - number
 43 | // @source    - http://www.pjmccormick.com/sweet-sass-function-convert-px-em
 44 | @function rem($target, $context: $font-size-base) {
 45 |   @if not unitless($target) {
 46 |     $target: strip-unit($target);
 47 |   }
 48 |   @if not unitless($context) {
 49 |     $context: strip-unit($context);
 50 |   }
 51 |   @if $target == 0 {
 52 |     @return 0
 53 |   }
 54 |   @return $target / $context + 0rem;
 55 | }
 56 | 
 57 | // px()
 58 | //
 59 | // Convery em values to pixels.
 60 | //
 61 | // $target    - Value to convert to ems.
 62 | // $context   - The context the conversion is based on. Defaults to `$base-font-size`
 63 | // @requires  - `$base-font-size` / `@strip-units`
 64 | // @returns   - number
 65 | // @source    - http://www.pjmccormick.com/sweet-sass-function-convert-px-em
 66 | @function px($target, $context: $font-size-base) {
 67 |   @if not unitless($target) {
 68 |     $pxval: strip-unit($target);
 69 |   }
 70 |   @if not unitless($context) {
 71 |     $base: strip-unit($context);
 72 |   }
 73 |   @if $target == 0 {
 74 |     @return 0
 75 |   }
 76 |   @return $target * $context + 0px;
 77 | }
 78 | 
 79 | // map-has-nested-keys($map)
 80 | //
 81 | // $map       - Parent map to get values from.
 82 | // @returns   - boolean
 83 | @function map-has-nested-keys($map, $keys...) {
 84 |   @each $key in $keys {
 85 |     @if not map-has-key($map, $key) {
 86 |       @return false;
 87 |     }
 88 |     $map: map-get($map, $key);
 89 |   }
 90 |   @return true;
 91 | }
 92 | 
 93 | // map-deep-get($map)
 94 | //
 95 | // $map       - Parent map to get values from.
 96 | // @returns   - `$map`
 97 | // @source    - http://www.sitepoint.com/better-solution-managing-z-index-sass/
 98 | @function map-deep-get($map, $keys...) {
 99 |   @each $key in $keys {
100 |     $map: map-get($map, $key);
101 |   }
102 |   @return $map;
103 | }
104 | 
105 | // z()
106 | //
107 | // @requires  - `@map-has-nested-keys` / `@map-deep-get` / `$zindex`
108 | // @returns   - `map-deep-get($zindex, $indexes...)`
109 | // @source    - http://www.sitepoint.com/extra-map-functions-sass/
110 | @function z($indexes...) {
111 |   @if not map-has-nested-keys($zindex, $indexes...) {
112 |     @warn 'No index found for `#{inspect($indexes...)}` in $zindex map. Property omitted.';
113 |   }
114 |   @return map-deep-get($zindex, $indexes...);
115 | }
116 | 
117 | // bp()
118 | //
119 | // @requires  - `@map-has-nested-keys` / `@map-deep-get` / `$breakpoints`
120 | // @returns   - `map-deep-get($breakpoints, $point...)`
121 | // @source    - http://www.sitepoint.com/extra-map-functions-sass/
122 | @function bp($point...) {
123 |   @if not map-has-nested-keys($breakpoints, $point...) {
124 |     @warn 'No breakpoint found for `#{inspect($point...)}` in $breakpoints map. Property omitted.';
125 |   }
126 |   @return map-deep-get($breakpoints, $point...);
127 | }
128 | 
129 | // Positive or negative integer exponents
130 | // @source - https://css-tricks.com/snippets/sass/power-function/
131 | @function pow($number, $exponent) {
132 |   $value: 1;
133 | 
134 |   @if $exponent > 0 {
135 |     @for $i from 1 through $exponent {
136 |       $value: $value * $number;
137 |     }
138 |   } @else if $exponent < 0 {
139 |     @for $i from 1 through -$exponent {
140 |       $value: $value / $number;
141 |     }
142 |   }
143 | 
144 |   @return $value;
145 | }
146 | 
147 | @function border($color: $white, $size: $b-s-base, $style: "solid") {
148 |   $border: $size + " " + $color + " " + $style;
149 | 
150 |   @return #{$border};
151 | }
152 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 |   <a href="https://webman.pro">
  3 |     <img src="https://raw.githubusercontent.com/wwwebman/wwwebman/master/wwwebman.svg" width="50px" alt="webman.pro" valign="middle">
  4 |      :tada:
  5 |     <img alt="gulp-webpack-starter" src="https://user-images.githubusercontent.com/13425833/73493741-a2eefe00-43b3-11ea-8cae-202e646582ac.png" height="150px" valign="middle" />
  6 |   </a>
  7 |   <br />
  8 |   <h1>Gulp Webpack Starter</h1>
  9 |   <a href="https://github.com/wwwebman/gulp-webpack-starter/blob/master/CONTRIBUTING.md">
 10 |     <img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat" alt="Contributions">
 11 |   </a>
 12 |   <a href="https://github.com/wwwebman/gulp-webpack-starter/blob/master/CONTRIBUTING.md">
 13 |     <img src="https://img.shields.io/github/contributors/wwwebman/gulp-webpack-starter.svg" alt="Contributors">
 14 |   </a>
 15 |   <a href="https://github.com/wwwebman/gulp-webpack-starter/blob/master/LICENSE">
 16 |     <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="License">
 17 |   </a>
 18 |   <a href="https://travis-ci.org/wwwebman/gulp-webpack-starter">
 19 |     <img src="https://travis-ci.org/wwwebman/gulp-webpack-starter.svg?branch=master" alt="Travis CI">
 20 |   </a>
 21 |   <a href="https://gitter.im/gulp-webpack-starter/Lobby">
 22 |     <img src="https://img.shields.io/gitter/room/tj/git-extras.svg?style=flat-square" alt="Gitter Chat">
 23 |   </a>
 24 | </div>
 25 | <br />
 26 | 
 27 | **Gulp Webpack Starter** - fast and simple web development toolkit. 
 28 | It uses Gulp task runner and Webpack bundler.
 29 | The starter perfectly fits [building static HTML templates](#dart-1-static-html-templating) 
 30 | or [speeding up WordPress](#eyes-2-wordpress) theme development.
 31 | 
 32 | [Version 2](https://github.com/wwwebman/gulp-webpack-starter/releases/tag/v2.0.0) is released :tada:.
 33 | 
 34 | **Easy to start, nice to use. Check it out! :octopus:**
 35 | ___
 36 | 
 37 | ## List of Content
 38 | 
 39 | 1. [Features](#gift-features)
 40 | 1. [Getting Started?](#getting-started)
 41 |     * [Recommendations](#closed_book-recommendations)
 42 |     * [Static HTML templating](#dart-1-static-html-templating)
 43 |     * [WordPress](#eyes-2-wordpress)
 44 | 1. [Contributing](./CONTRIBUTING.md)
 45 | 1. [Examples](./examples)
 46 | 
 47 | ## :gift: Features
 48 | 
 49 | |Features|Description|
 50 | |------------------|-----------|
 51 | |CSS| [SASS](http://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), [gulp-purgecss](https://www.npmjs.com/package/gulp-purgecss)|
 52 | |JS|[Webpack](https://webpack.js.org/), [Babel](http://babeljs.io/)|
 53 | |Live Reload|[BrowserSync](http://www.browsersync.io/), [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware), [Webpack Hot Middleware](https://github.com/glenjamin/webpack-hot-middleware)|
 54 | |HTML| [gulp-file-include](https://www.npmjs.com/package/gulp-file-include)|
 55 | |Images| [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)|
 56 | |SVG sprite| [gulp-svg-sprite](https://github.com/jkphl/gulp-svg-sprite)|
 57 | 
 58 | ## Getting started?
 59 | 
 60 | ### :closed_book: Recommendations
 61 | 
 62 | Make sure you have installed the following: 
 63 | * [Node.js](https://nodejs.org/)(**Recommended to use Node.js v10.16.0**)
 64 | * [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/en/). 
 65 | In this tutorial we use yarn, but you can use npm. 
 66 | 
 67 | ## :dart: 1. Static HTML templating
 68 | 
 69 | #### Step 1 - clone
 70 | 
 71 | ```bash
 72 | git clone https://github.com/wwwebman/gulp-webpack-starter [my-static-template-project-name]
 73 | cd [my-static-template-project-name]
 74 | ```
 75 | 
 76 | #### Step 2 - run
 77 | 
 78 | `cp .env.dist .env`
 79 | 
 80 | ```bash
 81 | yarn
 82 | yarn start
 83 | ```
 84 | 
 85 | Start files modification under `[my-static-template-project-name]/dev/*` to feel a great 
 86 | development experience.
 87 | 
 88 | **Cool and pretty easy, right?**
 89 | 
 90 | ***
 91 | 
 92 | ## :eyes: 2. WordPress
 93 | 
 94 | ### 1. Preparation
 95 | 
 96 | It can be setup in a number of different ways, but we would like to describe the simplest:
 97 | 
 98 | Please be sure of the following:
 99 |  - WordPress website is available under `http://localhost/[awesome_wp_project]`
100 |  - WordPress Theme exists
101 | 
102 | Note: folder naming on different OS can differ.
103 | 
104 | ```bash
105 | cd [awesome_wp_project]/wp-content/themes/[theme_folder_name]
106 | 
107 | git clone git@github.com:wwwebman/gulp-webpack-starter.git [frontend_folder_name]
108 | 
109 | cd [frontend_folder_name]
110 | 
111 | cp .env.wordpress .env
112 | ```
113 | 
114 | ### 2. Modify .env
115 | 
116 | ##### Required
117 | 
118 | Set correct values to `BROWSER_SYNC_TARGET` and `BROWSER_SYNC_PUBLIC_PATH` variables.
119 | 
120 | - `BROWSER_SYNC_TARGET` - refers to WordPress website installed locally
121 | - `BROWSER_SYNC_PUBLIC_PATH` - refers to the relative pathname of `bundle.js` in the browser.
122 | 
123 | ##### Not required
124 | 
125 | All compiled files land to `themes/[theme_folder_name_folder]/assets`.
126 | Modify `ROOT_DIST` to change the destination.
127 | 
128 | ### 3. Double check if assets attached in `[theme_folder_name]/functions.php`:
129 | 
130 | ```php
131 | function enqueue_styles()
132 | {
133 |   wp_enqueue_style('custom', get_template_directory_uri() . '/assets/css/bundle.css', [], null);
134 | }
135 | 
136 | add_action('wp_enqueue_scripts', 'enqueue_styles');
137 | 
138 | function register_scripts()
139 | {
140 |   wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/js/bundle.js', [], null, true);
141 | }
142 | 
143 | add_action('wp_enqueue_scripts', 'register_scripts');
144 | ```
145 | 
146 | #### 4. Run
147 | 
148 | ```bash
149 | cd [theme_folder_name]/[frontend_folder_name]
150 | yarn
151 | yarn start
152 | ```
153 | 
154 | **This is cool, isn't it?**
155 | 
156 | If you still have a problem, let us know by opening an [issue](https://github.com/wwwebman/gulp-webpack-starter/issues).
157 | 
158 | ## Commands
159 | 
160 | ```bash
161 | yarn start // Runs development mode
162 | yarn build // Compiles assets in production mode
163 | ```
164 | 
165 | ## License
166 | 
167 | MIT License, Copyright © 2015-present, [Dmytro Chumak](https://webman.pro).
168 | See [LICENSE](./LICENSE) for more information.
169 | 


--------------------------------------------------------------------------------