Browse Source

rebased off github.com/WeAreAthlon/frontend-webpack-boilerplate: eslint using airbnb-base; added prettier; added pug template support

master
Adam Piontek 8 months ago
parent
commit
fde10dcb3e
  1. 29
      .eslintrc.js
  2. 5
      .gitignore
  3. 108
      .sasslintrc
  4. 22
      .travis.yml
  5. 777
      CHANGELOG.md
  6. 21
      LICENSE
  7. 184
      README.md
  8. 22
      configuration/environment.js
  9. 38
      configuration/webpack.dev.config.js
  10. 33
      configuration/webpack.prod.config.js
  11. 13130
      package-lock.json
  12. 64
      package.json
  13. 5
      postcss.config.js
  14. 0
      src/fonts/.keep
  15. BIN
      src/fonts/DINPro-Regular.eot
  16. 8731
      src/fonts/DINPro-Regular.svg
  17. BIN
      src/fonts/DINPro-Regular.ttf
  18. BIN
      src/fonts/DINPro-Regular.woff
  19. 23
      src/images/content/logoa.svg
  20. BIN
      src/images/design/heading.png
  21. BIN
      src/images/favicon.ico
  22. 7
      src/index.js
  23. 6
      src/js/app.js
  24. 4
      src/js/demo.js
  25. 26
      src/scss/app.scss
  26. 12
      src/scss/base/_fonts.scss
  27. 49
      src/scss/base/_mixins.scss
  28. 29
      src/scss/base/_print.scss
  29. 187
      src/scss/base/_reset.scss
  30. 19
      src/scss/base/_vars.scss
  31. 40
      src/scss/demo.scss
  32. 3
      src/scss/dirty/_hacks.scss
  33. 8
      src/template.pug
  34. 53
      src/templates/index.pug
  35. 125
      webpack.config.js

29
.eslintrc.js

@ -1,15 +1,32 @@
module.exports = {
extends: ["airbnb-base", "prettier"],
env: {
node: true,
browser: true,
commonjs: true,
es2021: true,
},
extends: ['airbnb-base', 'prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-multiple-empty-lines': [2, { max: 2 }],
"no-use-before-define": 0,
"func-names": 0,
"prefer-arrow-callback": 0,
"no-var": 0,
"max-len": 0,
"guard-for-in": 0,
"object-shorthand": 0,
"no-restricted-syntax": 0,
"prefer-template": 0,
"import/no-amd": 0,
"space-before-function-paren": 0,
"import/no-unresolved": 0,
"import/extensions": 0,
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"no-multiple-empty-lines": [2, { max: 2 }],
},
parser: '@babel/eslint-parser',
}
globals: {
browser: false,
window: true,
document: true,
},
};

5
.gitignore

@ -1,3 +1,5 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Mac OS X
.DS_Store
._.*
@ -18,6 +20,3 @@ npm-debug.log
node_modules/
dist/
# administrative
TODO.md

108
.sasslintrc

@ -0,0 +1,108 @@
files:
# formatter: stylish
# include: '**/*.s+(a|c)ss'
ignore:
- 'src/scss/vendor/**/*.scss'
- 'src/scss/base/_reset.scss'
- 'src/scss/base/_print.scss'
- 'src/scss/base/_fonts.scss'
- 'src/scss/base/mixins.scss'
- 'src/scss/dirty/_hacks.scss'
rules:
# Extends
extends-before-mixins: 2
extends-before-declarations: 2
placeholder-in-extend: 2
# Mixins
mixins-before-declarations:
- 2
-
exclude: ['bp']
# Line Spacing
one-declaration-per-line: 2
empty-line-between-blocks: 2
single-line-per-selector: 2
# Disallows
no-attribute-selectors: 0
no-color-keywords: 2
no-color-literals: 2
no-combinators: 0
no-css-comments: 0
no-debug: 2
no-disallowed-properties: 0
no-duplicate-properties: 2
no-empty-rulesets: 2
no-extends: 1
no-ids: 2
no-important: 0
no-invalid-hex: 2
no-mergeable-selectors: 2
no-misspelled-properties: 2
no-qualifying-elements:
- 2
-
allow-element-with-attribute: true
no-trailing-whitespace: 2
no-trailing-zero: 2
no-transition-all: 0
no-universal-selectors: 2
no-url-protocols: 1
no-vendor-prefixes: 2
no-warn: 2
property-units: 0
# Nesting
force-attribute-nesting: 0
force-element-nesting: 0
force-pseudo-nesting: 0
# Name Formats
class-name-format: 2
function-name-format: 2
id-name-format: 2
mixin-name-format: 2
placeholder-name-format: 2
variable-name-format: 2
# Style Guide
attribute-quotes: 2
bem-depth: 0
border-zero:
- 2
-
convention: 'none'
brace-style: 2
clean-import-paths: 2
empty-args: 0
hex-length: 2
hex-notation: 2
indentation: 2
leading-zero: 2
nesting-depth: 0
property-sort-order: 0
pseudo-element: 2
quotes: 2
shorthand-values: 2
url-quotes: 2
variable-for-property: 0
zero-unit: 2
# Inner Spacing
space-after-comma: 2
space-before-colon: 2
space-after-colon: 2
space-before-brace: 2
space-before-bang: 2
space-after-bang: 2
space-between-parens: 2
space-around-operator: 2
# Final Items
trailing-semicolon: 2
final-newline: 2

22
.travis.yml

@ -0,0 +1,22 @@
language: node_js
dist: xenial
os: linux
node_js:
- node
- lts/*
install:
- npm ci
script:
- npm run lint:sass
- npm run lint:js
- npm run production
deploy:
strategy: git
provider: pages
skip_cleanup: true
token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable
keep_history: true
local_dir: dist
on:
branch: master
node_js: 'lts/*'

777
CHANGELOG.md

@ -0,0 +1,777 @@
# Change log
## [5.1.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v5.1.0)
### 01/12/2020
### New Features
* Image optimisation is now done using [`image-minimizer-webpack-plugin`](https://github.com/webpack-contrib/image-minimizer-webpack-plugin)
* We have **removed** te usage of the [`imagemin-webpack-plugin`](https://github.com/Klathmon/imagemin-webpack-plugin)
### Updates
* Updated `webpack.config.js` to configure the new image optimisation plugin.
* Updated *README* file with more clear features description and language style fixes.
### Added New Packages
* [`image-minimizer-webpack-plugin@1.0.0`](https://github.com/webpack-contrib/image-minimizer-webpack-plugin) - Plugin and Loader for webpack to optimize (compress) all images using imagemin. Do not worry about size of images, now they are always optimized/compressed.
* [`imagemin`](https://github.com/imagemin/imagemin) image optimisation packages for *loseless* image optimisation:
* [`imagemin-jpegtran@7.0.0`](https://www.npmjs.com/package/imagemin-jpegtran/v/7.0.0) - for optimizing *JPG* images
* [`imagemin-optipng@8.0.0`](https://www.npmjs.com/package/imagemin-optipng) - for optimizing *PNG* images
* [`imagemin-gifsicle@7.0.0`](https://www.npmjs.com/package/imagemin-gifsicle) - for optimizing *GIF* images
* [`imagemin-svgo@8.0.0`](https://www.npmjs.com/package/imagemin-svgo) - for optimizing *SVG* images
### Removed Packags
* [`imagemin-webpack-plugin`](https://github.com/Klathmon/imagemin-webpack-plugin)
### Package Version Updates
* `autoprefixer@10.0.4` change log can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/10.0.4).
* `@babel/core@7.12.9` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.9).
* `@babel/preset-env@7.12.7` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.9).
* `copy-webpack-plugin@6.3.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.3.0).
* `css-loader@5.0.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/postcss-loader/releases/tag/v5.0.1).
* `eslint-config-airbnb@18.2.1` change log can be found on the official [release notes](https://github.com/airbnb/javascript/releases/tag/eslint-config-airbnb-v18.2.1).
* `eslint@7.14.0` change log can be found on the official [release notes](https://github.com/eslint/eslint/releases/tag/v7.14.0).
* `mini-css-extract-plugin@1.3.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v1.3.0).
* `postcss@8.1.6` change log can be found on the official [release notes](https://github.com/postcss/postcss/releases/tag/8.1.6).
* `postcss-loader@4.1.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.1.0).
* `sass@1.29.0` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.29.0).
* `sass-loader@10.1.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v10.1.0).
* `webpack@5.9.0` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v5.9.0).
* `webpack-cli@4.2.0` change log can be found on the official [release notes](https://github.com/webpack/webpack-cli/releases/tag/v4.2.0).
* `webpack-merge@5.4.0` change log can be found on the official [change log](https://github.com/survivejs/webpack-merge/blob/master/CHANGELOG.md).
## [5.0.1](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v5.0.1)
### 28/10/2020
### Updates
* Fix `.travis.yml` configuration warnings.
* Fix varous spelling errors.
* Development wepback configuration cleanup.
### Packages Version Updates
* `file-loader@6.2.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/file-loader/releases/tag/v6.2.0).
* `mini-css-extract-plugin@1.2.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v1.2.1).
* `terser-webpack-plugin@5.0.3` change log can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v5.0.3).
* `webpack@5.3.1` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v5.3.1).
## [5.0.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v5.0.0)
### 27/10/2020
### New Features
* Configurable **browsers versions support**. It uses [`browserslist`](https://github.com/browserslist/browserslist#full-list) - just specify the browsers you want to support in the `package.json` file for `browserslist`.
* Configuration per **environment**
* `development` - [`sourcemaps`](https://webpack.js.org/configuration/devtool/), [`browser synced developmentment server`](https://webpack.js.org/configuration/dev-server/)
* `production` - [`minification`](https://webpack.js.org/plugins/terser-webpack-plugin/), [`sourcemaps`](https://webpack.js.org/configuration/devtool/)
* Automatic building of all template HTML files placed under `src/templates/`, no need to manually configure each file anymore.
* See the full [README](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/blob/master/README.md) file for all new features.
### Breaking Changes
* **Webpack** version update - support for [webpack 5](https://webpack.js.org/blog/2020-10-10-webpack-5-release/)
* New `webpack` configuration files.
* Webpack configuration restructure - split to `development` and `production` configuration files.
* Switched to `webpack-dev-server` instead of `browser-sync`.
* Template files moved from `src/` to `src/templates/`.
* Removed `npm run bundle` script - no need anymore.
* JavaScript syntax cheker command changed from `lint-js` to `lint:js`.
* SASS/PostCSS syntax cheker command changed from `lint-sass` to `lint:sass`.
* Configuration file is renamed from `.sass-lint.yml` to `.sasslintrc` for consistency.
### Updates
* `src/scss/app.scss` - grouped all demo page styles in a dedicated file called `demo.scss` for easer removal upon starting a new project.
* Added example demo code in `src/js/demo.js`
* Updated `README.md`
### Removed Dependencies
* `browser-sync` replaced with `webpack-dev-server`.
* `browser-sync-webpack-plugin` no need anymore as `webpack-dev-server` is used for this purpose.
* `cross-env` - not needed in this setup.
* `cssnano` - not needed to be provided explicitly, it is now a dev dependency of `css-minimizer-webpack-plugin`.
* `node-sass` - use `sass` instead.
* `optimize-css-assets-webpack-plugin` - missing support for webpack 5, replaced with `css-minimizer-webpack-plugin`.
* `style-loader` - no more support for inlining CSS with `<style>` tags.
### New Dependencies
* [`css-minimizer-webpack-plugin`](https://github.com/webpack-contrib/css-minimizer-webpack-plugin/) support for `webpack 5`.
* [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/) user to simplify development process.
### Packages Major Version Updates
* `css-loader@5.0.0` from `4.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/css-loader/releases/tag/v5.0.0).
* `mini-css-extract-plugin@1.2.0` from `0.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v1.2.0)
* `style-loader@2.0.0` from `1.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/style-loader/releases/tag/v2.0.0).
* `terser-webpack-plugin@5.0.1` from `4.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v5.0.1).
* `webpack@5.2.0` from `4.x` new features can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v5.2.0).
* `webpack-cli@4.1.0` from `3.x` new features can be found on the official [release notes](https://github.com/webpack/webpack-cli/releases/tag/v4.1.0)
### Packages Minor Version Updates
* `@babel/core@7.12.1` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.1).
* `@babel/preset-env@7.12.1` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.1).
* `ajv@6.12.6` change log can be found on the official [release notes](https://github.com/epoberezkin/ajv/releases/tag/v6.12.6).
* `copy-webpack-plugin@6.2.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.2.1).
* `eslint@7.12.1` change log can be found on the official [release notes](https://github.com/eslint/eslint/releases/tag/v7.12.1).
* `eslint-plugin-react@7.21.4` change log can be found on the official [release notes](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.21.4).
* `eslint-plugin-react-hooks` change log can be found on the official [release notes](https://www.npmjs.com/package/eslint-plugin-react-hooks).
* `eslint-plugin-jsx-a11y@6.4.1` change log can be found on the official [release notes](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/releases/tag/v6.4.1)
* `file-loader@6.1.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/file-loader/releases/tag/v6.1.1).
* `postcss@8.1.4` change log can be found on the official [release notes](https://github.com/postcss/postcss/releases/tag/8.1.4).
* `postcss-loader@4.0.4` change log can be found on the official [release notes](https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.0.4).
* `sass@1.27.0` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.27.0).
* `sass-loader@10.0.4` change log can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v10.0.4).
* `url-loader@4.1.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/url-loader/releases/tag/v4.1.1).
## [4.5.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.5.0)
### 27/09/2020
* Updated `README.md`
### Node Version Notes
* The current release supports the following list of node versions: `^10 || ^12 || >=14`. All other versions have no security updates anymore.
### New dependencies
* [`postcss`](https://github.com/postcss/postcss/releases/tag/8.0.0) required by `autoprefixer@10.0.0`
### Packages Major Version Updates
* `autoprefixer@10.0.0` from `9.x` new features and braking changes can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/10.0.0).
* `postcss-loader@4.0.2` from `3.x` new features and braking changes can be found on the official [release notes](https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.0.0).
* `sass-loader@10.0.2` from `9.x` new features and braking changes can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.3).
### Packages Minor Version Updates
* `copy-webpack-plugin@6.1.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.1.1).
* `eslint@7.10.0` change log can be found on the official [release notes](https://github.com/eslint/eslint/releases/tag/v7.10.0).
* `eslint-plugin-import@2.22.1` change log can be found on the official [release notes](https://github.com/benmosher/eslint-plugin-import/releases/tag/v2.22.1).
* `eslint-plugin-react@7.21.2` change log can be found on the official [release notes](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.21.2)
* `html-webpack-plugin@4.5.0` change log can be found on the official [release notes](https://github.com/jantimon/html-webpack-plugin/releases/tag/v4.5.0).
* `mini-css-extract-plugin@0.11.2` change log can be found on the official [release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v0.11.2)
* `sass@1.26.11` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.26.11)
* `terser-webpack-plugin@4.2.2` change log can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v4.2.2).
* `webpack@4.44.2` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v4.44.2).
## [4.4.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.4.0)
### 23/08/2020
### Updated
* `README.md` - simply badges and add badges to show the current supported `node` version and the used `webpack version`.
### Removed
* `VERSION` file - use the `package.json` defined version.
### Packages Major Version Updates
* `css-loader@4.2.1` from `3.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/css-loader/releases/tag/v4.0.0).
* `terser-webpack-plugin@4.0.0` from `3.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v3.0.7).
### Packages Minor Version Updates
* `@babel/core@7.11.1` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.11.0)
* `@babel/preset-env@7.11.0` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.11.0)
* `autoprefixer@9.8.6` change log can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/9.8.6).
* `browser-sync@2.26.12` change log can be found on the official [release notes](https://github.com/BrowserSync/browser-sync/releases).
* `eslint@7.6.0` change log can be found on the official [release notes](https://github.com/eslint/eslint/releases/tag/v7.6.0).
* `eslint-plugin-react@7.20.5` change log can be found on the official [release notes](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.20.5)
* `sass-loader@9.0.3` change log can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.3).
* `webpack@4.44.1` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v4.44.1).
## [4.3.1](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.3.1)
### 23/08/2020
### Updates
* `README` - fixed spelling (thanks to [@TammyTee](https://github.com/TammyTee)
* `npm` audit fixes across all packages.
### Packages Minor Version Updates
* `terser-webpack-plugin@3.0.7` change log can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v3.0.7).
* `eslint-plugin-react-hooks@4.0.8` change log can be found on the official [release notes](https://www.npmjs.com/package/eslint-plugin-react-hooks).
* `@babel/core@7.10.5` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.10.5).
* `browser-sync@2.26.10` change log can be found on the official [release notes](https://github.com/BrowserSync/browser-sync/releases).
* `eslint@7.5.0` change log can be found on the official [release notes](https://github.com/eslint/eslint/releases/tag/v7.4.0).
## [4.3.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.3.0)
### 13/08/2020
## Configuration Updates
* The latest version of `copy-webpack-plugin` has new a way of passing configuration patterns
* the plugin now accepts an object, you should change `new CopyPlugin(patterns, options)` to `new CopyPlugin({ patterns, options })`
### Packages Major Version Updates
* `copy-webpack-plugin@6.0.3` from `5.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.0.3).
* `eslint@7.4.0` from `6.x` new features can be found on the official [release notes](https://github.com/eslint/eslint/releases/tag/v7.4.0).
* `eslint-plugin-react-hooks@4.0.7` from `1.x` new features can be found on the official [release notes](https://www.npmjs.com/package/eslint-plugin-react-hooks).
* `file-loader@6.0.0` from `5.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/file-loader/releases/tag/v5.1.0).
* `html-webpack-plugin@4.3.0` from `3.x` new features can be found on the official [release notes](https://github.com/jantimon/html-webpack-plugin).
* `sass-loader@9.0.2` from `8.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.2).
* `terser-webpack-plugin@3.0.6` from `2.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v3.0.6).
* `url-loader@4.1.0` from `3.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/url-loader/releases/tag/v3.0.0).
### Packages Minor Version Updates
* `autoprefixer@9.8.5` change log can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/9.8.4).
### Removed Dependencies
* `fibers` - was required by `sass-loader@8.0.0`.
## [4.2.8](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.2.8)
### 10/08/2020
### Package Updates Full Change Set
* `@babel/core@7.10.4` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.10.4).
* @babel/preset-env@7.10.4 change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.10.4).
* `ajv@6.12.3` change log can be found on the official [release notes](https://github.com/epoberezkin/ajv/releases/tag/v6.12.3).
* `eslint-plugin-import@2.22.0` change log can be found on the official [release notes](https://github.com/benmosher/eslint-plugin-import/releases/tag/v2.22.0).
* `eslint-plugin-react@7.20.3` change log can be found on the official [release notes](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.20.3)
* `sass@1.26.10` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.26.10)
## [4.2.7](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.2.7)
### 25/06/2020
### Package Updates Full Change Set
* `@babel/preset-env@7.10.3` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.10.3)
* `@babel/core@7.10.3` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.10.3)
* `autoprefixer@9.8.4` change log can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/9.8.4)
* `css-loader@3.6.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/css-loader/releases/tag/v3.6.0)
* `eslint-config-airbnb@18.2.0` change log can be found on the official [release notes](https://github.com/airbnb/javascript/releases/tag/eslint-config-airbnb-v18.2.0).
* `eslint-plugin-jsx-a11y@6.3.1` change log can be found on the official [release notes](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/releases/tag/v6.3.1)
* `eslint-plugin-import@2.21.2` change log can be found on the official [release notes](https://github.com/benmosher/eslint-plugin-import/releases/tag/v2.21.2).
* `sass@1.26.9` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.26.9).
* `webpack-cli@3.3.12` change log can be found on the official [release notes](https://github.com/webpack/webpack-cli/releases/tag/v3.3.12).
## [4.2.6](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.2.6)
### 03/06/2020
### Package Updates Full Change Set
* `@babel/core@7.10.2` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.10.2)
* `@babel/preset-env@7.10.2` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.10.2)
* `autoprefixer@9.8.0` change log can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/9.8.0)
* `eslint-plugin-react@7.20.0` change log can be found on the official [release notes](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.20.0)
* `sass@1.26.7` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.26.7)
* `terser-webpack-plugin@2.3.7` change log can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v2.3.7)
## [4.2.5](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.2.5)
### 07/05/2020
### Package Updates Full Change Set
* `@babel/core@7.9.6` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.9.6).
* `@babel/preset-env@7.9.6` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.9.6).
* `css-loader@3.5.3` change log can be found on the official [release notes](https://github.com/webpack-contrib/css-loader/releases/tag/v3.5.3).
* `style-loader@1.2.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/style-loader/releases/tag/v1.2.1).
* `node-sass@4.14.1` change log can be found on the official [release notes](https://github.com/sass/node-sass/releases/tag/v4.14.1).
* `fibers@4.0.3` change log can be found on the official [release notes](https://github.com/laverdet/node-fibers/releases/tag/v4.0.3).
* `sass@1.26.5` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.26.5).
* `terser-webpack-plugin@2.3.6` change log can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v2.3.6).
* `webpack@4.43.0` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v4.43.0).
## [4.2.4](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.2.4)
### 05/04/2020
### Package Updates Full Change Set
* `@babel/preset-env@7.9.5` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.9.5).
* `autoprefixer@9.7.6` change log can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/9.7.6).
* `ajv@6.12.2` change log can be found on the official [release notes](https://github.com/epoberezkin/ajv/releases/tag/v6.12.2).
* `css-loader@3.5.2` change log can be found on the official [release notes](https://github.com/webpack-contrib/css-loader/releases/tag/v3.5.2).
* `style-loader@1.1.4` change log can be found on the official [release notes](https://github.com/webpack-contrib/style-loader/releases/tag/v1.1.4).
## [4.2.3](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.2.3)
### 05/04/2020
### Updates
* Sucurity audit fixes.
* README - update link to demo deployment page.
### Package Updates Full Change Set
* `eslint-plugin-import@2.20.2` change log can be found on the official [release notes](https://github.com/benmosher/eslint-plugin-import/releases/tag/v2.20.2).
## [4.2.2](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.2.2)
### 24/03/2020
### Updates
* Fix SASS linter errors on the updated demo page.
## [4.2.1](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.2.1)
### 24/03/2020
### Updates
* Updated demo page with brief description and link to the _GitHub_ repository.
* Demo deployment available on [Frontend Webpack Boilerplate](https://weareathlon.github.io/frontend-webpack-boilerplate/)
* Cleanup webpack config from side comments.
* README file update
* Updated build badge URL link.
## [4.2.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.2.0)
### 24/03/2020
### Repository File Structure Reorganisation
* Introduced `.github/` directory to group all _GitHub_ community development related templates.
* New issue templates for _bug_, _feature_, _support_ requests.
* [Travis CI](https://travis-ci.org/) integration configuration.
* Deploy to _GitHub_ pages. Demo deployment available on [Frontend Webpack Boilerplate](https://weareathlon.github.io/frontend-webpack-boilerplate/)
### Package Updates Full Change Set
* `@babel/core@7.9.0` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.9.0).
* `@babel/preset-env@7.9.0` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.9.0).
* `autoprefixer@9.7.5` change log can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/9.7.5).
* `babel-loader@8.1.0` change log can be found on the official [release notes](https://github.com/babel/babel-loader/releases/tag/v8.1.0).
* `webpack@4.42.1` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v4.42.1).
## [4.1.5](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.1.5)
### 15/03/2020
### Package Updates Full Change Set
* `@babel/core@7.8.7` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.8.7).
* `@babel/preset-env@7.8.7` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.8.7).
* `cross-env@7.0.2` change log can be found on the official [release notes](https://github.com/kentcdodds/cross-env/releases/tag/v7.0.2).
* `eslint-config-airbnb@18.1.0` change log can be found on the official [release notes](https://github.com/airbnb/javascript/releases/tag/eslint-config-airbnb-v18.1.0).
* `eslint-plugin-react@7.19.0` change log can be found on the official [release notes](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.19.0).
* `sass@1.26.3` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.26.3).
* `webpack@4.42.0` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v4.42.0).
## [4.1.4](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.1.4)
### 26/02/2020
### Package Updates Full Change Set
* `ajv@6.12.0` change log can be found on the official [release notes](https://github.com/epoberezkin/ajv/releases/tag/v6.12.0).
* `file-loader@5.1.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/file-loader/releases/tag/v5.1.0).
* `sass@1.26.1` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.26.1).
## [4.1.3](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.1.3)
### 19/02/2020
### Package Updates Full Change Set
* `eslint-plugin-import@2.20.1` change log can be found on the official [release notes](https://github.com/benmosher/eslint-plugin-import/releases/tag/v2.20.1).
* `eslint-plugin-react@7.18.3` change log can be found on the official [release notes](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.18.3).
* `@babel/core@7.8.4` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.8.4).
* `@babel/preset-env@7.8.4` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.8.4).
* `terser-webpack-plugin@2.3.5` change log can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v2.3.5).
* `webpack-cli@3.3.11` change log can be found on the official [release notes](https://github.com/webpack/webpack-cli/releases/tag/v3.3.11).
* `webpack@4.41.6` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v4.41.6).
## [4.1.2](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.1.2)
### 22/01/2020
### Updated
* `README.md`
* Text formatting
### Package Updates Full Change Set
* `cross-env@7.0.0` new features can be found on the official [release notes](https://github.com/kentcdodds/cross-env/releases/tag/v7.0.0).
## [4.1.1](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.1.1)
### 22/01/2020
### Updated
* `README.md`
* Badges for `npmjs.org` downloads, open issues, license
* Cover repository photo.
### Package Updates Full Change Set
* `ajv@6.11.0` new features can be found on the official [release notes](https://github.com/epoberezkin/ajv/releases/tag/v6.11.0).
* `autoprefixer@9.7.4` bugfixes can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/9.7.4).
* `@babel/core@7.8.3` new features can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.8.3).
* `@babel/preset-env@7.8.3` new features can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.8.3).
* `css-loader@3.4.2` bugfixes can be found on the official [release notes](https://github.com/webpack-contrib/css-loader/releases/tag/v3.4.2).
* `eslint-plugin-import@2.20.0` new features can be found on the official [release notes](https://github.com/benmosher/eslint-plugin-import/releases/tag/v2.20.0).
* `eslint-plugin-react@7.18.0` new features can be found on the official [release notes](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.18.0).
* `node-sass@4.13.1` bugfixes can be found on the official [release notes](https://github.com/sass/node-sass/releases/tag/v4.13.1).
* `sass@1.25.0` new features can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.25.0).
* `sass-loader@8.0.2` bugfixes can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.2).
* `style-loader@1.1.3` bugfixes can be found on the official [release notes](https://github.com/webpack-contrib/style-loader/releases/tag/v1.1.3).
* `terser-webpack-plugin@2.3.2` new features can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v2.3.2).
## [4.1.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.1.0)
### 03/01/2020
### Updates
* **Important** Updated `webpack` configuration to enable serving the webpack build files using the built-in serving functionality of the `browser-sync` package.
* Ability to configure the usage of a demo built-in server or using an existing server via the proxy feature of `browser sync`
* Definition of `serverConfiguration` object.
* Configuration of `watchOptions` to support.
* If watching does not work for you, try out this option. Watching does might work with *NFS* and machines in *VirtualBox*.
* New package npm command `npm run watch:externalServer` to monitor file changes when using an existing web application server, refer to the *README* for more details.
* New package npm command `npm run bundle:externalServer` to install and monitor file changes when using an existing web application server, refer to the *README* for more details.
* Package dependencies updates.
* _README_ file to note all configuration changes.
### Package Minor Updates
* `sass@1.24.1` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.24.1)
* `webpack@4.41.5` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v4.41.5)
## [4.0.1](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.0.1)
### 27/12/2019
### Updates
* Package dependencies
* _README_ file to note the minimal `node` version.
### Package Minor Updates
* `style-loader@1.1.2` change log can be found on the official [release notes](https://github.com/webpack-contrib/style-loader/releases/tag/v1.1.2)
## [4.0.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.0.0)
### 21/12/2019
### Breaking Changes
#### Updated minimum Node version
* Minimum required nodejs version is `10.13.0`
* Rebuild our `node-sass` by running
```shell script
$ npm rebuild node-sass
```
#### File Loader, URL Loader updates
* Rename the `esModules` option to `esModule`
* Switch to ES modules by default (the option `esModule` is `true` by default)
#### SASS Loader updates
* Move all sass (`includePaths`, `importer`, `functions`) options to the `sassOptions` option. The `functions` option can't be used as `Function`, you should use `sassOption` as `Function` to achieve this.
* The `data` option was renamed to the `prependData` option
* Default value of the `sourceMap` option depends on the `devtool` value (`eval`/`false` values don't enable source map generation)
#### Style Loader updates
* The `convertToAbsoluteUrls` option was removed, you don't need this anymore
* The `attrs` option was renamed to the `attributes` option
* The `transform` option was removed without replacement
* The `hmr` option was removed, `webpack` automatically inject HMR code when it is required (when the `HotModuleReplacementPlugin` plugin was used)
* The `sourceMap` option was removed. The loader automatically inject source maps if the previous loader emit them
* The `ref`/`unref` api methods were removed for `useable` loader, please use the `use`/`unuse` api methods
* The `style-loader/url` loader was removed in favor `injectType` option (look the documentation about the `injectType` option)
* The `style-loader/useable` loader was removed in favor `injectType` option (look the documentation about the `injectType` option)
* The `singleton` option was removed (look documentation about the `injectType` option)
* The `insertAt` option was removed in favor the `insert` option (look the documentation about the `insert` option and examples)
* The `insertInto` options was removed in favor the `insert` option (look the documentation about the `insert` option and examples)
### New dependencies
* [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) required by `eslint-config-airbnb@18.0.1`
* [`sass`](https://www.npmjs.com/package/sass) required by `sass-loader@8.0.0`
* [`fibers`](https://www.npmjs.com/package/fibers) required by `sass-loader@8.0.0`
### Packages major versions update
* `eslint` from `5.x` to `6.8.0` change log can be found on the official [release notes](https://github.com/eslint/eslint/releases/tag/v6.8.0)
* `eslint-config-airbnb` from `17.x` to `18` change log can be found on the official [release notes](https://github.com/airbnb/javascript/releases/tag/eslint-config-airbnb-v18.0.1)
* `file-loader` from `4.x` to `5.x` change log can be found on the official [release notes](https://github.com/webpack-contrib/file-loader/releases/tag/v5.0.2)
* `sass-loader` from `7.x` to `8.x` change log can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0)
* `style-loader` from `0.x` to `1.x` change log can be found on the official [release notes](https://github.com/webpack-contrib/style-loader/releases/tag/v1.1.1)
* `terser-webpack-plugin` from `1.x` to `2.x` change log can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v2.3.1)
* `url-loader` from `2.x` to `3.x` change log can be found on the official [release notes](https://github.com/webpack-contrib/url-loader/releases/tag/v3.0.0)
### Packages minor versions update
* `mini-css@0.9.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v0.9.0)
* `browserslist@4.8.2` change log can be found on the official [release notes](https://github.com/browserslist/browserslist/releases/tag/4.8.2)
* `caniuse-lite@1.0.30001016` change log can be found on the official [release notes](https://github.com/ben-eb/caniuse-lite/releases)
## [3.3.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v3.3.0)
### 20/12/2019
### Package Updates Full Change Set
* `autoprefixer@9.7.3` new features can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/9.7.3).
* `sass-loader@8.0.0` new features can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0).
* `copy-webpack-plugin@5.1.5` new features can be found on the official [release notes](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v5.1.5).
* `css-loader@3.4.0` new features can be found on the official [release notes](https://github.com/webpack-contrib/css-loader/releases/tag/v3.4.0).
* `file-loader@4.3.0` new features can be found on the official [release notes](https://github.com/webpack-contrib/file-loader/releases/tag/v4.3.0).
* `node-sass@4.13.0` new features can be found on the official [release notes](https://github.com/sass/node-sass/releases/tag/v4.13.0).
* `cross-env@5.2.1` new features can be found on the official [release notes](https://github.com/kentcdodds/cross-env/releases/tag/v6.0.3).
* `eslint-plugin-react@7.17.0` new features can be found on the official [release notes](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.17.0).
* `eslint-plugin-import@2.19.1` new features can be found on the official [release notes](https://github.com/benmosher/eslint-plugin-import/releases/tag/v2.19.1).
* `url-loader@2.3.0` new features can be found on the official [release notes](https://github.com/webpack-contrib/url-loader/releases/tag/v2.3.0).
* `terser-webpack-plugin@1.4.3` new features can be found on the official [release notes](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v1.4.3).
* `webpack@4.41.4` new features can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v4.41.4).
* `webpack-cli@3.3.10` new features can be found on the official [release notes](https://github.com/webpack/webpack-cli/releases/tag/v3.3.10).
* `@babel/preset-env@7.7.7` new features can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.7.7).
* `@babel/core@7.7.7` new features can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.7.7).
## [3.2.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v3.1.0)
### 26/07/2019
### Package Updates
* `@babel/core@7.5.5` new features can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.5.5).
* `@babel/preset-env@7.5.5` new features can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.5.5).
* `webpack@4.38.0` new features can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v4.38.0).
* `css-loader@3.1.0` new features can be found on the official [release notes](https://github.com/webpack-contrib/css-loader/releases/tag/v3.1.0).
* `eslint-plugin-import@2.18.2` new features can be found on the official [release notes](https://github.com/benmosher/eslint-plugin-import/releases/tag/v2.18.2).
* `eslint-plugin-react@7.14.3` new features can be found on the official [release notes](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.14.3).
* `file-loader@4.1.0` new features can be found on the official [release notes](https://github.com/webpack-contrib/file-loader/releases/tag/v4.1.0).
* `url-loader@2.1.0` new features can be found on the official [release notes](https://github.com/webpack-contrib/url-loader/releases/tag/v2.1.0).
### Minor Package Updates
* `autoprefixer@9.6.1`
* `ajv@6.10.2`
* `eslint-config-airbnb@17.1.1`
* `eslint-plugin-react@7.14.3`
* `eslint-plugin-jsx-a11y@6.2.3`
* `optimize-css-assets-webpack-plugin@5.0.3`
* `webpack-cli@3.3.6`
## [3.1.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v3.1.0)
### 19/06/2019
### Package Updates
* `css-loader` updated to `3.0.0` here are the [release notes](https://github.com/webpack-contrib/css-loader/releases/tag/v3.0.0).
* `url-loader` updated to `2.0.0` here are the [release notes](https://github.com/webpack-contrib/url-loader/releases/tag/v2.0.0).
### Minor Package Updates
* `browser-sync` to `2.26.7`
* `webpack` to `4.34.0`
* `webpack-cli` to `3.3.4`
## [3.0.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v3.0.0)
#### 15/05/2019
### Breaking Changes
* **Removed `node` 6 support**, `node` must be `>=8.9.0`
* `clean-webpack-plugin` to `v3.0.0` see changes here [Clean Wepback Plugin v3.0.0](https://github.com/johnagan/clean-webpack-plugin/releases/tag/v3.0.0)
* Updated configuration in [`webpack.config.js`](./webpack.config.js)
* `file-loader` to `4.0.0` see changes here [Webpack file loader v4.0.0](https://github.com/webpack-contrib/file-loader/releases/tag/v4.0.0)
### Minor Package Updates
* `autoprefixer` to `9.6.0`
* `@babel/core` to `7.4.5`
* `@babel/preset-env` to `7.4.5`
* `eslint-plugin-import` to `2.17.3`
* `mini-css-extract-plugin` to `0.7.0`
* `terser-webpack-plugin` to `1.3.0`
* `webpack` to `4.33.0`
### Security audit fixes
* `axios` (*dependency of browser-sync [dev]*) updated to `0.18.11` [more info](https://npmjs.com/advisories/880)
* `npm audit` output:
> === npm audit security report ===
>
> found 0 vulnerabilities
> in 17859 scanned packages
## [2.6.1](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.6.1)
#### 15/05/2019
### Updated
* Security audit fixes
* `fstream` updated to `1.0.12` [more info](https://npmjs.com/advisories/886)
* `tar` updated to `2.2.2` [more info](https://nvd.nist.gov/vuln/detail/CVE-2018-20834)
## [2.6.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.6.0)
#### 15/05/2019
### Updated
* `wepback` configuration - use `path.resolve` in all file system references.
* Package dependencies
* Downgraded `clean-webpack-plugin` from `2.0.1` to `1.0.1` (breaking changes, see the updated `webpack.config.js`) due to strange behaviour during `watch` mode.
* Package dependencies trees
* README - _added additional note for NFS and containerized development environments_
## [2.5.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.5.0)
#### 22/04/2019
### Updated
* Switched to using `npm ci` instead of `npm install` for initial install.
* Updated README
* More on the clean install npm command can be read here [`npm ci`](https://docs.npmjs.com/cli/ci.html)
* NPM audit review and dependency packages updates due to reverting them accidentally
* Updated `tar` to `4.4.2` dependency path `node-sass > node-gyp > tar` - [more info](https://npmjs.com/advisories/803)
* Updated `braces` to `2.3.2` dependency path `browser-sync > micromatch > braces` - [more info](https://npmjs.com/advisories/786)
## [2.4.3](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.4.3)
#### 22/04/2019
### Updated
* NPM audit review and dependency packages updates
* Updated `tar` to `4.4.2` dependency path `node-sass > node-gyp > tar` - [more info](https://npmjs.com/advisories/803)
* Updated `braces` to `2.3.2` dependency path `browser-sync > micromatch > braces` - [more info](https://npmjs.com/advisories/786)
## [2.4.2](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.4.2)
#### 17/04/2019
### Added
* Issue Template
* Pull Request Template
### Updated
* Package dependencies
* `clean-webpack-plugin` from `1.0.1` to `2.0.1` (breaking changes, see the updated `webpack.config.js`)
* `copy-webpack-plugin` from `4.6.0` to `5.0.2`
* `mini-css-extract-plugin` from `0.5.0` to `0.6.0`
* Package dependencies trees
* README
## [2.4.1](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.4.1)
#### 14/04/2019
### Updated
* NPM audit review and dependency packages updates
* Auto fixing with `npm audit fix`
* Manually updated
* updated `tar` to `4.4.2` dependency path `node-sass > node-gyp > tar` - [more info](https://npmjs.com/advisories/803)
* updated `braces` to `2.3.2` dependency path `browser-sync > micromatch > braces` - [more info](https://npmjs.com/advisories/786)
* _README_ file updated
* Added instructions hot to update/migrate to newer version of this setup.
## [2.4.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.4.0)
#### 08/01/2019
### Added
* [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) to copy images that are part of the content (_referenced by `<img>` tags_)
* [`terser-webpack-plugin`](https://github.com/webpack-contrib/terser-webpack-plugin) to optimize JavaScript files for production
* This plugin is dependency of `webpack` itself
* Support for favicon in the produced HTML
### Updated
* README
* Dependencies
### Removed
* `uglifyjs-webpack-plugin` - in favor of the webpack included `terser-webpack-plugin`
## [2.3.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.3.0)
#### 03/01/2019
### Added
* NPM package `bundle` script which runs `install` and `watch` tasks in a single call.
### Updated
* README file
* Packages
* `eslint-plugin-react@7.12.2`
* `webpack-cli@3.2.0`
## [2.2.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.2.0)
#### 02/01/2019
### Added
* _Minify_ and _Uglify_ js `webpack` plugin - [uglifyjs-webpack-plugin](https://www.npmjs.com/package/uglifyjs-webpack-plugin) due to not consistent behavuour of the built-in webpack
js minimization features
### Updated
* `autoprefixer` package
### Removed
* `uglify-es` package
## [2.1.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.1.0)
#### 31/12/2018
### Added
* [MIT](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/blob/master/LICENSE) License
### Updated
* [README](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/blob/master/README.md) - more detailed setup and usage instructions
* Webpack `4.28.3`
* NPM Audit fixed packages, after running `npm audit fix`
> fixed 35 of 35 vulnerabilities in 9452 scanned packages
## [2.0.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v2.0.0)
#### 14/12/2018
### Added
* Support for HTML template loading
* Default template included that illustrates custom font and image loaders
### Updated
* Support for `Webpack 4`
* Support for `Babel 7`
* Added `.babelrc` file for preset definitions
* Cleanup of dist directory upon build
### Removed
* `jQuery` - it can be added per project basis if needed;
## [1.2.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v1.2.0)
#### 14/12/2018
### Updated
* Package dependencies
* _README_ file with information how to run js/css code linters
* Code style changes
* Package dependencies divided to dev and non-dev packages
* Default package name
## [1.1.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v1.1.0)
#### 10/07/2017
### Added
* Support for jQuery
## [1.0.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v1.0.0)
#### 03/07/2017
* Initial Release

21
LICENSE

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Athlon DPS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

184
README.md

@ -0,0 +1,184 @@
# Webpack 5 Boilerplate
![Maintenance](https://img.shields.io/maintenance/yes/2020?logo=github)
![webpack-current](https://img.shields.io/badge/webpack-v5.9.0-green?logo=webpack)
![node-current (scoped)](https://img.shields.io/node/v/@weareathlon/frontend-webpack-boilerplate)
[![Build Status](https://api.travis-ci.org/weareathlon/frontend-webpack-boilerplate.svg?branch=master)](https://travis-ci.org/weareathlon/frontend-webpack-boilerplate)
[![GitHub Issues](https://img.shields.io/github/issues-raw/WeAreAthlon/frontend-webpack-boilerplate)](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/issues)
[![Known Vulnerabilities](https://snyk.io/test/github/WeAreAthlon/frontend-webpack-boilerplate/badge.svg?targetFile=package.json)](https://snyk.io/test/github/WeAreAthlon/frontend-webpack-boilerplate?targetFile=package.json)
[![devDependency Status](https://david-dm.org/WeAreAthlon/frontend-webpack-boilerplate/dev-status.svg)](https://david-dm.org/WeAreAthlon/frontend-webpack-boilerplate?type=dev)
[![npm](https://img.shields.io/npm/dm/@weareathlon/frontend-webpack-boilerplate)](https://www.npmjs.com/package/@weareathlon/frontend-webpack-boilerplate)
[![GitHub License](https://img.shields.io/github/license/WeAreAthlon/frontend-webpack-boilerplate)](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/blob/master/LICENSE)
![Front-end Webpack Boilerplate](https://repository-images.githubusercontent.com/96102257/4be7b600-61f1-11e9-9ebf-67b17d5ba125)
## Features
* **Simple setup** instructions
* Start development of a project right away with **simple**, **configured**, **linter enabled**, **browser synced** asset files.
* Configuration per **environment**
* `development` - [`sourcemaps`](https://webpack.js.org/configuration/devtool/), [`browser synced developmentment server`](https://webpack.js.org/configuration/dev-server/)
* `production` - [`minification`](https://webpack.js.org/plugins/terser-webpack-plugin/), [`sourcemaps`](https://webpack.js.org/configuration/devtool/)
* Configurable **browsers versions support**. It uses [`browserslist`](https://github.com/browserslist/browserslist#full-list) - just specify the browsers you want to support in the `package.json` file for `browserslist`:
```js
"browserslist": [
"last 2 versions",
"> 5%"
]
```
* The built CSS / JavaScript files will respect the **configured supported browsers** using the following tools:
* [`autoprefixer`](https://github.com/postcss/autoprefixer) - automatically adds vendor prefixes to CSS rules
* [`babel-preset-env`](https://babeljs.io/docs/en/babel-preset-env) - smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (*and optionally, browser polyfills*) are needed by your target environment(s).
* Demo project files to be used as a reference and **demo example** building of:
* *JavaScript*
* *SASS / PostCSS*
* *HTML* templates
* *Images* (*CSS backgrounds and image tags*)
* *Fonts*
* Support for **assets optimization** for production environment with ability to configure:
* **Code Minification** of *JavaScript* and *CSS* processed files.
* **Optimize Assets Loading** - inline and embed **images** / **fonts** files having file size below a *configurable* threshold value.
* **Images Optimisation** - optimize `jpeg`, `jpg`, `png`, `gif`, `svg` filesize and loading type via [`imagemin`](https://github.com/imagemin/imagemin). Plugin and Loader for webpack to optimize (*compress*) all images using `imagemin`. Do not worry about size of images, now they are always optimized/compressed.
* Support for **source code syntax style and formatting linters** that analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs:
* **SASS/PostCSS syntax cheker** - you can change or add additional rules in `.sasslintrc` file. Configuration options can be found on [`sass-lint`](https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml) documentation.
* **JavaScript syntax checker** - following the `airbnb` style, you can review and configure the rules in `.eslintrc` file. Configuration options can be found on [`eslint`](https://eslint.org/docs/user-guide/configuring) documentation.
* Latest [Webpack 5](https://github.com/webpack/webpack) - *JavaScript* module bundler.
* Latest [SASS/PostCSS](https://github.com/sass/sass) compiler based on Dart `sass`.
* Latest [Babel 7](https://github.com/babel/babel) (`@babel/core`) - JavaScript compiler - _Use next generation JavaScript, today._
* Integration with [Travis CI](https://travis-ci.org/)
* [Demo deployment available to GitHub pages](https://weareathlon.github.io/frontend-webpack-boilerplate/)
* Configured and ready to use **Webpack Dev Server** plugin for faster local development - [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/)
## Requirements
* `node` : `^10 || ^12 || >=14`
* `npm`
# Setup
## Installation
1. Choose and download the latest template release from [List of Releases](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases).
2. Extract the release archive to a new directory, rename it to your project name and browse the directory.
3. Install all dependencies using `npm` *clean install* command.
```sh
$ npm ci
```
> More on the clean install npm command can be read here [`npm ci`](https://docs.npmjs.com/cli/ci.html)
> You can still use `npm install` in cases the `npm ci` raises system error due to specific platform incompatibilities.
## Define Package Metadata
* Amend `package.json` file and optionally specify:
* `name` - Name of your project. A name can be optionally prefixed by a scope, e.g. `@myorg/mypackage`.
* `version` - Specify and maintain a version number indicator for your project code.
* `author` - Your organisation or just yourself. You can also specify [`contributors`](https://docs.npmjs.com/files/package.json#people-fields-author-contributors).
* `description` - Short description of your project.
* `keywords` - Put keywords in it. It’s an array of strings.
* `repository` - Specify the place where your code lives.
* `license` - Announce your code license, figure out the license from [Choose an Open Source License](https://choosealicense.com) .
* `browserslist` - Specify the supported browsers versions - you can refer to [full list](https://github.com/browserslist/browserslist#full-list) of availalbe options.
## Configuration
### Environment Configuration
* Edit the [`configuration/environment.js`](configuration/environment.js) if you want to specify:
* **`server`**: configure development server, specify `host`, `port`. Refer to the full development server configuration options for [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/).
* **`limits`**: configure file size thresholds for assets optimizations.
* Image/Font files size in bytes. Below this value the image file will be served as Data URL (_inline base64_).
* **`paths`**: `src` or `dist` directories names and file system location.
### Additional `webpack` configuration
You can additionally configure `webpack` for specific environment:
* `development` - [`configuration/webpack.dev.config.js`](configuration/webpack.dev.config.js)
* `production` - [`configuration/webpack.prod.config.js`](configuration/webpack.prod.config.js)
* Note that if you prefer to build and deploy [`sourcemap`](https://webpack.js.org/configuration/devtool/#production) files:
> You should configure your server to disallow access to the Source Map file for normal users!
## Development
### Assets Source
* **SASS/PostCSS** files are located under `src/scss/`
* **JavaScript** files with support of _ES6 / ECMAScript 2016(ES7)_ files are located under `src/js/`
* **Image** files are located under `src/images/`
* **Font** files are located under `src/fonts/`
* **HTML** files are located under `src/templates/`
* It will **automatically** build **all HTML files** placed under `src/templates/` directory, no need to manually configure each template anymore!
## Build Assets
### One time build assets for development
```sh
$ npm run build
```
### Build assets and enable source files watcher
```sh
$ npm run watch
```
This command is suitable if you develop with external web server.
**Note:** File watching does not work with *NFS* (*Windows*) and machines in *VirtualBox*.
Extend the configuration in such cases by:
```js
module.exports = {
//...
watchOptions: {
poll: 1000 // Check for changes every second
}
};
```
### Start a development server - reloading automatically after each file change.
```sh
$ npm run dev
```
## Production / Build Assets
* Optimize assets for production by:
```sh
$ npm run production
```
## Processed Built Assets
* _CSS_ files are located under `/dist/css/`
* _JavaScript_ files with support of _ES6 / ECMAScript 2016(ES7)_ files are located under `/dist/js/`
* _Images_ are located under `/dist/images/`
* Images part of the _design_ (_usually referenced in the CSS_) are located under `/dist/images/design/`
* Images part of the _content_ (_usually referenced via `<img>` tags_) are located under `/dist/images/content/`
* _Fonts_ are located under `/dist/fonts/`
* _HTML_ files are located under `/dist/`
## Run Code Style Linters
* **SASS**
```sh
$ npm run lint:sass
```
* **JS**
```sh
$ npm run lint:js
```
## Continuous Integration
This boilerplate template contains integration with [Travis CI](https://travis-ci.org/). The build system runs all linting scripts and deploys production optimized pages to _GitHub_ pages upon push to the `master` branch. However, note that this deployment flow only works for _Project Pages_, as User and Organization pages [only support the master branch flow](https://help.github.com/articles/user-organization-and-project-pages/).
For more information on how to set up alternative deployment processes, check out the [Travis CI documentation on deployment](https://docs.travis-ci.com/user/deployment). The service can deploy to dozens of cloud providers, including Heroku, AWS, and Firebase.

22
configuration/environment.js

@ -0,0 +1,22 @@
const path = require('path')
module.exports = {
paths: {
/* Path to source files directory */
source: path.resolve(__dirname, '../src/'),
/* Path to built files directory */
output: path.resolve(__dirname, '../dist/'),
},
server: {
host: 'localhost',
port: 7373,
},
limits: {
/* Image files size in bytes. Below this value the image file will be served as DataURL (inline base64). */
images: 8192,
/* Font files size in bytes. Below this value the font file will be served as DataURL (inline base64). */
fonts: 8192,
},
}

38
configuration/webpack.dev.config.js

@ -0,0 +1,38 @@
/* eslint-disable import/no-extraneous-dependencies */
const { merge } = require('webpack-merge');
const webpackConfiguration = require('../webpack.config');
const environment = require('./environment');
module.exports = merge(webpackConfiguration, {
mode: 'development',
/* Manage source maps generation process */
devtool: 'eval-source-map',
/* Development Server Configuration */
devServer: {
contentBase: environment.paths.output,
watchContentBase: true,
publicPath: '/',
open: true,
historyApiFallback: true,
compress: true,
overlay: true,
hot: false,
watchOptions: {
poll: 300,
},
...environment.server,
},
/* File watcher options */
watchOptions: {
aggregateTimeout: 300,
poll: 300,
ignored: /node_modules/,
},
/* Additional plugins configuration */
plugins: [],
});

33
configuration/webpack.prod.config.js

@ -0,0 +1,33 @@
/* eslint-disable import/no-extraneous-dependencies */
const { merge } = require('webpack-merge');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const webpackConfiguration = require('../webpack.config');
module.exports = merge(webpackConfiguration, {
mode: 'production',
/* Manage source maps generation process. Refer to https://webpack.js.org/configuration/devtool/#production */
devtool: false,
/* Optimization configuration */
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true,
}),
new CssMinimizerPlugin(),
],
},
/* Performance treshold configuration values */
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
/* Additional plugins configuration */
plugins: [],
});

13130
package-lock.json
File diff suppressed because it is too large
View File

64
package.json

@ -3,10 +3,22 @@
"version": "0.0.1",
"author": "Adam Piontek <adam@73k.us> (https://73k.us)",
"description": "Front page build project for 73k.us",
"main": "index.js",
"scripts": {
"build": "webpack"
"homepage": "https://73k.us/git/adam/73kus-front",
"browserslist": [
"last 2 versions",
"> 5%"
],
"bugs": {
"url": "https://73k.us/git/adam/73kus-front/issues",
"email": "adam@73k.us"
},
"contributors": [
{
"name": "Adam Piontek",
"email": "adam@73k.us",
"url": "https://73k.us"
}
],
"keywords": [
"homepage",
"landingpage",
@ -16,22 +28,60 @@
"portfolio"
],
"license": "MIT",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/eslint-parser": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@prettier/plugin-pug": "^1.13.0",
"ajv": "^6.12.6",
"autoprefixer": "^10.0.4",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.3.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^1.1.5",
"eslint": "^7.15.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-import": "^2.22.1",
"html-webpack-plugin": "^5.0.0-alpha.15",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.0",
"image-minimizer-webpack-plugin": "^1.0.0",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"mini-css-extract-plugin": "^1.3.2",
"postcss": "^8.1.14",
"postcss-loader": "^4.1.0",
"prettier": "^2.2.1",
"pug": "^3.0.0",
"pug-loader": "^2.4.0",
"sass": "^1.30.0",
"sass-lint": "^1.13.1",
"sass-loader": "^10.1.0",
"terser-webpack-plugin": "^5.0.3",
"url-loader": "^4.1.1",
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0"
}
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0"
},
"engines": {
"node": ">=14"
},
"private": false,
"repository": {
"type": "git",
"url": "git@73k.us:adam/73kus-front.git"
},
"scripts": {
"build": "webpack --config configuration/webpack.dev.config.js --mode=development",
"watch": "webpack --config configuration/webpack.dev.config.js --mode=development --watch",
"dev": "webpack serve --config configuration/webpack.dev.config.js --mode=development",
"production": "webpack --config configuration/webpack.prod.config.js --mode=production",
"lint:sass": "sass-lint 'src/scss/*' -v -q",
"lint:js": "eslint --ext .js src/js/"
},
"target": "web"
}

5
postcss.config.js

@ -0,0 +1,5 @@
module.exports = {
plugins: [
require('autoprefixer'),
],
};

0
src/fonts/.keep

BIN
src/fonts/DINPro-Regular.eot

8731
src/fonts/DINPro-Regular.svg
File diff suppressed because it is too large
View File

BIN
src/fonts/DINPro-Regular.ttf

BIN
src/fonts/DINPro-Regular.woff

23
src/images/content/logoa.svg

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>AFE35034-FA93-4657-AA70-0406EE26E78D</title>
<desc>Created with sketchtool.</desc>
<defs>
<polygon id="path-1" points="15.9999 32 0 32 0 0 15.9999 0 31.9998 0 31.9998 32 15.9999 32"></polygon>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="athlon-logo-/-mark">
<g id="logo.a">
<g id="Group-3">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M26.9338,0 L5.0658,0 C2.2678,0 -0.0002,2.202 -0.0002,4.918 L-0.0002,23.105 L-0.0002,27.083 L-0.0002,32 L5.0658,32 L12.9828,32 L26.9338,32 C29.7318,32 31.9998,29.798 31.9998,27.083 L31.9998,4.918 C31.9998,2.202 29.7318,0 26.9338,0" id="Fill-1" fill="#ED1F4E" mask="url(#mask-2)"></path>
</g>
<path d="M13.3328,19.5 L16.0918,11.559 L18.7598,19.5 L13.3328,19.5 Z M15.8588,5 C14.8658,5 14.0938,5.63 13.6148,6.88 C13.3768,7.503 6.3738,27 6.3738,27 L7.4358,27 L9.2328,27 C10.2258,27 10.9988,26.185 11.4768,24.936 L12.1368,22.953 L19.8938,22.953 L21.1818,27 L25.6268,27 L17.6558,5 L15.8588,5 Z" id="Fill-4" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>

BIN
src/images/design/heading.png

After

Width: 320  |  Height: 63  |  Size: 18 KiB

BIN
src/images/favicon.ico

7
src/index.js

@ -1,7 +0,0 @@
// Create heading node
const heading = document.createElement('h1')
heading.textContent = 'Interesting!'
// Append heading node to the DOM
const app = document.querySelector('#root')
app.append(heading)

6
src/js/app.js

@ -0,0 +1,6 @@
import '../scss/app.scss';
/* Your JS Code goes here */
/* Demo JS */
import './demo.js';

4
src/js/demo.js

@ -0,0 +1,4 @@
const demo = () => 'Webpack Boilerplate v5.0.1 - SASS/PostCSS, ES6/7, browser sync, source code listing and more.';
// eslint-disable-next-line no-console
console.log(demo());

26
src/scss/app.scss

@ -0,0 +1,26 @@
/* By Athlon Front-End Team */
/* Core variables */
@import 'base/vars';
/* CSS Reset */
@import 'base/reset';
/* CSS print */
@import 'base/print';
/* Fonts */
@import 'base/fonts';
/* Mixins, helpers and functions */
@import 'base/mixins';
/* Vendor */
/* Components */
/* Browser specific styles */
@import 'dirty/hacks';
/* Demo Page styles */
@import 'demo';

12
src/scss/base/_fonts.scss

@ -0,0 +1,12 @@
/**
* Fonts
*/
@font-face {
font-family: 'DINP-R';
src: url("../fonts/DINPro-Regular.eot?") format("eot"),
url("../fonts/DINPro-Regular.woff") format("woff"),
url("../fonts/DINPro-Regular.ttf") format("truetype"),
url("../fonts/DINPro-Regular.svg#DINPro-Regular") format("svg");
font-style: normal;
}

49
src/scss/base/_mixins.scss

@ -0,0 +1,49 @@
/**
* Helper mixins
*/
// Clearfix
// http://www.cssmojo.com/latest_new_clearfix_so_far/
// Other clearfix options: https://github.com/stubbornella/oocss/blob/master/oocss/src/components/utils/_clearfix-me.scss
@mixin clearfix {
&::after {
clear: both;
content: '';
display: table;
}
}
// Media queries
@mixin bp($point) {
@if $point == large {
@media (min-width: 1280px) { @content; }
} @else if $point == small {
@media (max-width: 1279px) { @content; }
}
}
// Text selection
@mixin text-selection($color-selection, $color-selection-bg) {
::-moz-selection { // sass-lint:disable-line no-vendor-prefixes
background: $color-selection-bg;
color: $color-selection;
text-shadow: none;
}
::selection {
background: $color-selection-bg;
color: $color-selection;
text-shadow: none;
}
}
//Placeholders
//Usage:
//@include placeholder;
@mixin placeholder {
// sass-lint:disable no-vendor-prefixes
::-webkit-input-placeholder {@content}
:-moz-placeholder {@content}
::-moz-placeholder {@content}
:-ms-input-placeholder {@content}
}

29
src/scss/base/_print.scss

@ -0,0 +1,29 @@
/**
* Print Stylesheet
*/
@media print {
@page { margin: 1cm; }
body {
background: $white;
color: $black;
}
a {
page-break-inside: avoid;
}
blockquote {
page-break-inside: avoid;
}
table,
pre {
page-break-inside: avoid;
}
ul, ol, dl {
page-break-before: avoid;
}
}

187
src/scss/base/_reset.scss

@ -0,0 +1,187 @@
// ### Reset ###
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,
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 {
border: none;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
// HTML5 display definitions
// Corrects block display not defined in IE6/7/8/9 & FF3
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary,
main {
display: block;
}
// Corrects inline-block display not defined in IE6/7/8/9 & FF3
audio,
canvas,
video {
display: inline-block;
}
// Addresses margins handled incorrectly in IE6/7
body {
margin: 0;
}
// Remove list item style
ul {
list-style-type: none;
}
// Remove the gray background color from active links in IE 10.
a {
background: transparent;
text-decoration: none;
}
// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
button,
input {
line-height: normal; // 1
}
// 1. Addresses appearance set to searchfield in Safari 5, Chrome
input[type='search'] {
-webkit-appearance: textfield; // 1
}
// Removes inner padding and search cancel button in S5, Chrome on OS X
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
}
// Removes inner padding and border in FF3+
// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
// 1. Removes default vertical scrollbar in IE6/7/8/9
// 2