├── .babelrc ├── .browserslistrc ├── .eslintrc ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .stylelintrc ├── .travis.yml ├── README.md ├── getMDBsrc.js ├── jest.config.js ├── package.json ├── postcss.config.js ├── src ├── img │ └── mdb-favicon.ico ├── index.html ├── js │ └── index.js ├── mdb │ └── index.html └── scss │ └── index.scss └── webpack ├── mdb ├── webpack.common.mdb.js ├── webpack.config.mdb.dev.js └── webpack.config.mdb.prod.js ├── webpack.common.js ├── webpack.config.dev.js └── webpack.config.prod.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "usage", 7 | "corejs": "3.0.0" 8 | } 9 | ] 10 | ], 11 | "plugins": [ 12 | "@babel/plugin-syntax-dynamic-import", 13 | "@babel/plugin-proposal-class-properties" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | >= 0.5% 2 | last 2 major versions 3 | not dead 4 | Chrome >= 60 5 | Firefox >= 60 6 | Firefox ESR 7 | iOS >= 12 8 | Safari >= 12 9 | not Explorer <= 11 -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true, 6 | "es6": true, 7 | "jquery": true, 8 | "jasmine": true, 9 | "amd": true 10 | }, 11 | "globals": { 12 | "mdb": true 13 | }, 14 | "ignorePatterns": ["src/js/bootstrap/", "src/js/bootstrap-mdb-prefix/", "dev/", "src/projects/mdb-com", "src/js/pro/timepicker", "src/files/", "mdb/"], 15 | "extends": ["airbnb-base", "plugin:prettier/recommended"], 16 | "parserOptions": { 17 | "ecmaVersion": 8, 18 | "sourceType": "module" 19 | }, 20 | "rules": { 21 | "no-await-in-loop": "error", 22 | "no-compare-neg-zero": "error", 23 | "no-extra-parens": "error", 24 | "no-prototype-builtins": "off", 25 | "no-template-curly-in-string": "error", 26 | "valid-jsdoc": "error", 27 | "accessor-pairs": "error", 28 | "array-callback-return": "error", 29 | "block-scoped-var": "error", 30 | "class-methods-use-this": "off", 31 | "complexity": "off", 32 | "consistent-return": "error", 33 | "curly": "error", 34 | "default-case": "error", 35 | "dot-location": ["error", "property"], 36 | "dot-notation": "error", 37 | "eqeqeq": "error", 38 | "guard-for-in": "error", 39 | "no-alert": "error", 40 | "no-caller": "error", 41 | "no-div-regex": "error", 42 | "no-else-return": "error", 43 | "no-empty-function": "error", 44 | "no-eq-null": "error", 45 | "no-eval": "error", 46 | "no-extend-native": "error", 47 | "no-extra-bind": "error", 48 | "no-extra-label": "error", 49 | "no-floating-decimal": "error", 50 | "no-implicit-coercion": "error", 51 | "no-implicit-globals": "error", 52 | "no-implied-eval": "error", 53 | "no-invalid-this": "off", 54 | "no-iterator": "error", 55 | "no-labels": "error", 56 | "no-lone-blocks": "error", 57 | "no-loop-func": "error", 58 | "no-multi-spaces": [ 59 | "error", 60 | { 61 | "exceptions": { 62 | "AssignmentExpression": true, 63 | "ArrowFunctionExpression": true, 64 | "CallExpression": true, 65 | "VariableDeclarator": true 66 | } 67 | } 68 | ], 69 | "no-multi-str": "error", 70 | "no-new": "error", 71 | "no-new-func": "error", 72 | "no-new-wrappers": "error", 73 | "no-octal-escape": "error", 74 | "no-param-reassign": "off", 75 | "no-proto": "error", 76 | "no-restricted-properties": "error", 77 | "no-return-assign": "off", 78 | "no-return-await": "error", 79 | "no-script-url": "error", 80 | "no-self-compare": "error", 81 | "no-sequences": "error", 82 | "no-throw-literal": "error", 83 | "no-unmodified-loop-condition": "error", 84 | "no-unused-expressions": "error", 85 | "no-useless-call": "error", 86 | "no-useless-concat": "error", 87 | "no-useless-escape": "error", 88 | "no-useless-return": "off", 89 | "no-void": "error", 90 | "no-warning-comments": "off", 91 | "no-with": "error", 92 | "prefer-promise-reject-errors": "error", 93 | "radix": "error", 94 | "require-await": "error", 95 | "vars-on-top": "error", 96 | "wrap-iife": "error", 97 | "yoda": "error", 98 | "strict": "error", 99 | "init-declarations": "off", 100 | "no-catch-shadow": "error", 101 | "no-label-var": "error", 102 | "no-restricted-globals": "error", 103 | "no-shadow": "off", 104 | "no-shadow-restricted-names": "error", 105 | "no-undef-init": "error", 106 | "no-undefined": "off", 107 | "no-use-before-define": "off", 108 | "callback-return": "off", 109 | "global-require": "error", 110 | "handle-callback-err": "error", 111 | "no-mixed-requires": "error", 112 | "no-new-require": "error", 113 | "no-path-concat": "error", 114 | "no-process-env": "error", 115 | "no-process-exit": "error", 116 | "no-restricted-modules": "error", 117 | "no-sync": "error", 118 | "array-bracket-spacing": "error", 119 | "block-spacing": "error", 120 | "brace-style": "error", 121 | "camelcase": "error", 122 | "capitalized-comments": "off", 123 | "comma-dangle": "off", 124 | "comma-spacing": "error", 125 | "comma-style": "error", 126 | "computed-property-spacing": "error", 127 | "consistent-this": "error", 128 | "eol-last": "error", 129 | "func-call-spacing": "error", 130 | "func-name-matching": "error", 131 | "func-names": "off", 132 | "func-style": [ 133 | "error", 134 | "declaration", 135 | { 136 | "allowArrowFunctions": true 137 | } 138 | ], 139 | "id-blacklist": "error", 140 | "id-length": "off", 141 | "id-match": "error", 142 | "jsx-quotes": "error", 143 | "key-spacing": "off", 144 | "keyword-spacing": "error", 145 | "line-comment-position": "off", 146 | "lines-around-comment": "off", 147 | "lines-around-directive": "error", 148 | "max-depth": ["error", 10], 149 | "max-len": "off", 150 | "max-lines": "off", 151 | "max-nested-callbacks": "error", 152 | "max-params": "off", 153 | "max-statements": "off", 154 | "max-statements-per-line": "error", 155 | "multiline-ternary": "off", 156 | "new-cap": [ 157 | "error", 158 | { 159 | "capIsNewExceptionPattern": "$.*" 160 | } 161 | ], 162 | "new-parens": "error", 163 | "newline-after-var": "off", 164 | "newline-before-return": "off", 165 | "newline-per-chained-call": [ 166 | "error", 167 | { 168 | "ignoreChainWithDepth": 5 169 | } 170 | ], 171 | "no-array-constructor": "error", 172 | "no-bitwise": "error", 173 | "no-continue": "off", 174 | "no-inline-comments": "off", 175 | "no-lonely-if": "error", 176 | "no-mixed-operators": "off", 177 | "no-multi-assign": "error", 178 | "no-multiple-empty-lines": "error", 179 | "no-negated-condition": "off", 180 | "no-nested-ternary": "error", 181 | "no-new-object": "error", 182 | "no-plusplus": "off", 183 | "no-restricted-syntax": "error", 184 | "no-tabs": "error", 185 | "no-ternary": "off", 186 | "no-trailing-spaces": "error", 187 | "no-underscore-dangle": "off", 188 | "no-unneeded-ternary": "error", 189 | "no-whitespace-before-property": "error", 190 | "nonblock-statement-body-position": "error", 191 | "object-curly-newline": [ 192 | "error", 193 | { 194 | "consistent": true, 195 | "multiline": true 196 | } 197 | ], 198 | "object-curly-spacing": ["error", "always"], 199 | "object-property-newline": "error", 200 | "one-var": ["error", "never"], 201 | "one-var-declaration-per-line": "error", 202 | "operator-assignment": "error", 203 | "operator-linebreak": "off", 204 | "padded-blocks": "off", 205 | "quote-props": ["error", "as-needed"], 206 | "quotes": ["error", "single"], 207 | "require-jsdoc": "off", 208 | "semi": ["off"], 209 | "semi-spacing": "error", 210 | "sort-keys": "off", 211 | "sort-vars": "error", 212 | "space-before-blocks": "error", 213 | "space-before-function-paren": [ 214 | "error", 215 | { 216 | "anonymous": "always", 217 | "named": "never" 218 | } 219 | ], 220 | "space-in-parens": "error", 221 | "space-infix-ops": "error", 222 | "space-unary-ops": "error", 223 | "spaced-comment": "error", 224 | "template-tag-spacing": "error", 225 | "unicode-bom": "error", 226 | "wrap-regex": "off", 227 | "arrow-body-style": "off", 228 | "arrow-spacing": "error", 229 | "generator-star-spacing": "error", 230 | "no-confusing-arrow": "error", 231 | "no-duplicate-imports": "error", 232 | "no-restricted-imports": "error", 233 | "no-useless-computed-key": "error", 234 | "no-useless-constructor": "error", 235 | "no-useless-rename": "error", 236 | "no-var": "error", 237 | "object-shorthand": "error", 238 | "prefer-arrow-callback": "error", 239 | "prefer-const": "error", 240 | "prefer-destructuring": "off", 241 | "prefer-numeric-literals": "error", 242 | "prefer-rest-params": "error", 243 | "prefer-spread": "error", 244 | "prefer-template": "error", 245 | "rest-spread-spacing": "error", 246 | // "sort-imports": "error", 247 | "symbol-description": "error", 248 | "template-curly-spacing": "error", 249 | "yield-star-spacing": "error" 250 | } 251 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | /mdb 4 | 5 | # production 6 | /dist 7 | 8 | # misc 9 | .DS_Store 10 | 11 | npm-debug.log 12 | yarn-error.log 13 | yarn.lock 14 | .yarnclean 15 | .vscode 16 | package-lock.json 17 | 18 | /test/coverage/* -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | mdb/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": true, 3 | "semi": true, 4 | "singleQuote": true, 5 | "trailingComma": "es5", 6 | "printWidth": 100, 7 | "endOfLine": "auto" 8 | } -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-prettier/recommended", 4 | "stylelint-config-standard", 5 | "stylelint-config-recommended-scss" 6 | ], 7 | "plugins": [ 8 | "stylelint-order" 9 | ], 10 | "rules": { 11 | "at-rule-empty-line-before": null, 12 | "at-rule-name-space-after": "always", 13 | "at-rule-semicolon-space-before": "never", 14 | "block-closing-brace-empty-line-before": null, 15 | "block-closing-brace-newline-after": null, 16 | "block-opening-brace-space-before": null, 17 | "color-named": "never", 18 | "declaration-block-semicolon-newline-after": "always-multi-line", 19 | "declaration-block-semicolon-newline-before": "never-multi-line", 20 | "declaration-block-semicolon-space-after": "always-single-line", 21 | "declaration-empty-line-before": null, 22 | "font-family-name-quotes": "always-where-recommended", 23 | "font-weight-notation": [ 24 | "numeric", 25 | { 26 | "ignore": [ 27 | "relative" 28 | ] 29 | } 30 | ], 31 | "function-url-no-scheme-relative": true, 32 | "function-url-quotes": "always", 33 | "length-zero-no-unit": true, 34 | "max-empty-lines": 2, 35 | "max-line-length": null, 36 | "media-feature-name-no-vendor-prefix": true, 37 | "media-feature-parentheses-space-inside": "never", 38 | "media-feature-range-operator-space-after": "always", 39 | "media-feature-range-operator-space-before": "never", 40 | "no-descending-specificity": null, 41 | "no-duplicate-selectors": true, 42 | "number-leading-zero": "never", 43 | "media-feature-name-no-unknown": [ 44 | true, 45 | { 46 | "ignoreMediaFeatureNames": [ 47 | "prefers-reduced-motion" 48 | ] 49 | } 50 | ], 51 | "order/properties-order": [ 52 | "position", 53 | "top", 54 | "right", 55 | "bottom", 56 | "left", 57 | "z-index", 58 | "box-sizing", 59 | "display", 60 | "flex", 61 | "flex-align", 62 | "flex-basis", 63 | "flex-direction", 64 | "flex-wrap", 65 | "flex-flow", 66 | "flex-shrink", 67 | "flex-grow", 68 | "flex-order", 69 | "flex-pack", 70 | "align-content", 71 | "align-items", 72 | "align-self", 73 | "justify-content", 74 | "order", 75 | "float", 76 | "width", 77 | "min-width", 78 | "max-width", 79 | "height", 80 | "min-height", 81 | "max-height", 82 | "padding", 83 | "padding-top", 84 | "padding-right", 85 | "padding-bottom", 86 | "padding-left", 87 | "margin", 88 | "margin-top", 89 | "margin-right", 90 | "margin-bottom", 91 | "margin-left", 92 | "overflow", 93 | "overflow-x", 94 | "overflow-y", 95 | "-webkit-overflow-scrolling", 96 | "-ms-overflow-x", 97 | "-ms-overflow-y", 98 | "-ms-overflow-style", 99 | "columns", 100 | "column-count", 101 | "column-fill", 102 | "column-gap", 103 | "column-rule", 104 | "column-rule-width", 105 | "column-rule-style", 106 | "column-rule-color", 107 | "column-span", 108 | "column-width", 109 | "orphans", 110 | "widows", 111 | "clip", 112 | "clear", 113 | "font", 114 | "font-family", 115 | "font-size", 116 | "font-style", 117 | "font-weight", 118 | "font-variant", 119 | "font-size-adjust", 120 | "font-stretch", 121 | "font-effect", 122 | "font-emphasize", 123 | "font-emphasize-position", 124 | "font-emphasize-style", 125 | "font-smooth", 126 | "src", 127 | "hyphens", 128 | "line-height", 129 | "color", 130 | "text-align", 131 | "text-align-last", 132 | "text-emphasis", 133 | "text-emphasis-color", 134 | "text-emphasis-style", 135 | "text-emphasis-position", 136 | "text-decoration", 137 | "text-indent", 138 | "text-justify", 139 | "text-outline", 140 | "-ms-text-overflow", 141 | "text-overflow", 142 | "text-overflow-ellipsis", 143 | "text-overflow-mode", 144 | "text-shadow", 145 | "text-transform", 146 | "text-wrap", 147 | "-webkit-text-size-adjust", 148 | "-ms-text-size-adjust", 149 | "letter-spacing", 150 | "-ms-word-break", 151 | "word-break", 152 | "word-spacing", 153 | "-ms-word-wrap", 154 | "word-wrap", 155 | "overflow-wrap", 156 | "tab-size", 157 | "white-space", 158 | "vertical-align", 159 | "direction", 160 | "unicode-bidi", 161 | "list-style", 162 | "list-style-position", 163 | "list-style-type", 164 | "list-style-image", 165 | "pointer-events", 166 | "-ms-touch-action", 167 | "touch-action", 168 | "cursor", 169 | "visibility", 170 | "zoom", 171 | "table-layout", 172 | "empty-cells", 173 | "caption-side", 174 | "border-spacing", 175 | "border-collapse", 176 | "content", 177 | "quotes", 178 | "counter-reset", 179 | "counter-increment", 180 | "resize", 181 | "user-select", 182 | "nav-index", 183 | "nav-up", 184 | "nav-right", 185 | "nav-down", 186 | "nav-left", 187 | "background", 188 | "background-color", 189 | "background-image", 190 | "filter", 191 | "background-repeat", 192 | "background-attachment", 193 | "background-position", 194 | "background-position-x", 195 | "background-position-y", 196 | "background-clip", 197 | "background-origin", 198 | "background-size", 199 | "border", 200 | "border-color", 201 | "border-style", 202 | "border-width", 203 | "border-top", 204 | "border-top-color", 205 | "border-top-style", 206 | "border-top-width", 207 | "border-right", 208 | "border-right-color", 209 | "border-right-style", 210 | "border-right-width", 211 | "border-bottom", 212 | "border-bottom-color", 213 | "border-bottom-style", 214 | "border-bottom-width", 215 | "border-left", 216 | "border-left-color", 217 | "border-left-style", 218 | "border-left-width", 219 | "border-radius", 220 | "border-top-left-radius", 221 | "border-top-right-radius", 222 | "border-bottom-right-radius", 223 | "border-bottom-left-radius", 224 | "border-image", 225 | "border-image-source", 226 | "border-image-slice", 227 | "border-image-width", 228 | "border-image-outset", 229 | "border-image-repeat", 230 | "outline", 231 | "outline-width", 232 | "outline-style", 233 | "outline-color", 234 | "outline-offset", 235 | "box-shadow", 236 | "opacity", 237 | "-ms-interpolation-mode", 238 | "page-break-after", 239 | "page-break-before", 240 | "page-break-inside", 241 | "transition", 242 | "transition-delay", 243 | "transition-timing-function", 244 | "transition-duration", 245 | "transition-property", 246 | "transform", 247 | "transform-origin", 248 | "perspective", 249 | "appearance", 250 | "animation", 251 | "animation-name", 252 | "animation-duration", 253 | "animation-play-state", 254 | "animation-timing-function", 255 | "animation-delay", 256 | "animation-iteration-count", 257 | "animation-direction", 258 | "animation-fill-mode", 259 | "fill", 260 | "stroke" 261 | ], 262 | "rule-empty-line-before": null, 263 | "selector-attribute-quotes": "always", 264 | "selector-list-comma-newline-after": null, 265 | "selector-list-comma-newline-before": null, 266 | "selector-list-comma-space-after": "always-single-line", 267 | "selector-list-comma-space-before": "never-single-line", 268 | "selector-max-attribute": 2, 269 | "selector-max-class": 8, 270 | "selector-max-combinators": 8, 271 | "selector-max-compound-selectors": 8, 272 | "selector-max-empty-lines": 1, 273 | "selector-max-id": 1, 274 | "selector-max-specificity": null, 275 | "selector-max-type": 4, 276 | "selector-max-universal": 1, 277 | "selector-no-qualifying-type": [ 278 | true, 279 | { 280 | "ignore": [ 281 | "attribute", 282 | "class" 283 | ] 284 | } 285 | ], 286 | "selector-pseudo-element-colon-notation": null, 287 | "string-quotes": "double", 288 | "value-keyword-case": "lower", 289 | "value-list-comma-newline-after": "never-multi-line", 290 | "value-list-comma-newline-before": "never-multi-line", 291 | "value-list-comma-space-after": "always", 292 | "value-no-vendor-prefix": true 293 | } 294 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "lts/*" 4 | - "node" 5 | script: npm run build 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png) 2 | 3 | # MDB 5 Webpack Starter 4 | 5 | ### Webpack boilerplate for Bootstrap 5 & Material Design 2.0 UI Kit 6 | 7 | **[>> Support MDB 5 with a STAR](https://github.com/mdbootstrap/mdb-ui-kit/)** 8 | 9 | **[>> MDB 5 Demo](https://mdbootstrap.com/docs/standard/#demo)** 10 | 11 | Downloads 12 | License 13 | 14 | YouTube Video Views 15 | 16 | ___ 17 | 18 | > :warning: The use of this Starter is at your own risk and assumes basic knowledge of Webpack, JavaScript and CSS preprocessors. We recommend creating custom versions of MDB UI KIT and themes only for advanced developers. 19 | 20 | ___ 21 | 22 | ### Installation 23 | ``` 24 | npm install 25 | ``` 26 | 27 | > **Pro Essential installation** 28 | > ``` 29 | > npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential 30 | > ``` 31 | 32 | > **Pro Advanced installation** 33 | > ``` 34 | > npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced 35 | > ``` 36 | 37 | ### Dev Server 38 | ``` 39 | npm start 40 | ``` 41 | 42 | ### Build 43 | ``` 44 | npm run build 45 | ``` 46 | 47 | ### Features: 48 | 49 | * Bundling via [webpack](https://github.com/webpack/webpack) 50 | * ES6+ Support via [babel](https://babeljs.io/) 51 | * SASS Support via [sass-loader](https://github.com/jtangelder/sass-loader) 52 | * Linting via [eslint-loader](https://github.com/MoOx/eslint-loader) 53 | * Unit Testing via [jest](https://github.com/facebook/jest) 54 | * Code Formatting via [prettier](https://github.com/prettier/prettier) 55 | 56 | ### Files structure: 57 | 58 | ``` 59 | . 60 | ├── src 61 | │ ├── img/ 62 | │ ├── js/ 63 | │ ├── scss/ 64 | │ ├── mdb/ 65 | │ └── index.html 66 | ├── webpack 67 | │ ├── webpack.common.js 68 | │ ├── webpack.config.dev.js 69 | │ ├── webpack.config.prod.js 70 | │ └── mdb/ 71 | │ ├── webpack.common.mdb.js 72 | │ ├── webpack.config.mdb.dev.js 73 | │ └── webpack.config.mdb.prod.js 74 | └── dist/ 75 | ``` 76 |

77 | 78 | ___ 79 | 80 | # MDB UI KIT 81 | 82 | ### Importing JS modules 83 | You can import the entire library or just individual modules: 84 | ``` 85 | import * as mdb from 'mdb-ui-kit'; // lib 86 | import { Input } from 'mdb-ui-kit'; // module 87 | import { Input as CustomInput } from 'mdb-ui-kit'; // module with custom name 88 | ``` 89 | 90 | ### Importing CSS file 91 | To import MDB stylesheet please use the following syntax: 92 | ``` 93 | @import '~mdb-ui-kit/css/mdb.min.css'; 94 | ``` 95 |

96 | 97 | ___ 98 | 99 | # CUSTOM VERSION OF MDB UI KIT 100 | It is possible to prepare a custom version of MDB UI KIT. It can be useful when the project uses only several modules of our library and you want to reduce the size of the compiled files. To achieve this, follow the steps: 101 | 102 | ``` 103 | npm install 104 | ``` 105 | 106 | > **Pro Essential installation** 107 | > ``` 108 | > npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential 109 | > ``` 110 | 111 | > **Pro Advanced installation** 112 | > ``` 113 | > npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced 114 | > ``` 115 | 116 | ``` 117 | npm run getMDBsrc 118 | ``` 119 | 120 | ### Importing JS components 121 | Copy the content from mdb/js/mdb.free.js or mdb/js/mdb.pro.js to src/js/index.js file. Pick only the components you need and update path to the mdb dir. Here's an example: 122 | 123 | ``` 124 | import Carousel from '../../mdb/js/free/carousel'; 125 | 126 | export { Carousel }; 127 | ``` 128 | 129 | > **Pro Advanced paths** 130 | > 131 | > For the Pro Advanced package the __/mdb__ folder will contain two subfolders: __/mdb__ and __/plugins__, so for our needs the paths to the scss and js files will have to contain duplicated __mdb/__ text. Here's an example for a carousel component: 132 | > ``` 133 | > import Carousel from '../../mdb/mdb/js/free/carousel'; 134 | > ``` 135 | 136 | Some components may require additional dependencies to be installed. Webpack should report this after starting a devServer. 137 | 138 | ### Importing SCSS files 139 | Same as with js files, copy the content from mdb/scss/mdb.free.scss or mdb/scss/mdb.pro.scss to src/scss/index.scss. Remove the lines with the import of modules that you will not use and update the paths to point the mdb dir. 140 | 141 | Keep in mind that many scss files are related to each other. For example, a modal will need files for buttons, ripple, modal, close and transtions to work properly. We recommend that you only delete the files described by comments __BOOTSTRAP COMPONENTS__ and __MDB COMPONENTS__. 142 | 143 | Example path for carousel file: 144 | ``` 145 | @import '../../mdb/scss/free/carousel'; 146 | ``` 147 | 148 | > **Pro Advanced path** 149 | > ``` 150 | > @import '../../mdb/mdb/scss/free/carousel'; 151 | > ``` 152 | 153 | ### Configuration 154 | Webpack config for MDB development is located in /webpack/mdb/ directory and index.html file is placed in /src/mdb/ directory. 155 | 156 | ### Dev Server 157 | ``` 158 | npm run startMDB 159 | ``` 160 | 161 | ### Build 162 | ``` 163 | npm run buildMDB 164 | ``` 165 |

166 | 167 | ___ 168 | 169 | # CUSTOM THEME 170 | Webpack Starter allows pro users to prepare a personalized theme for all UI KIT components. 171 | 172 | ### Installation 173 | ``` 174 | npm install 175 | ``` 176 | 177 | > **Pro Essential installation** 178 | > ``` 179 | > npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential 180 | > ``` 181 | 182 | > **Pro Advanced installation** 183 | > ``` 184 | > npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced 185 | > ``` 186 | 187 | ### SCSS config 188 | Creating a new theme requires that you define primary and secondary colors for your application. We prepared functions and mixins that will help you to create a ready to use theme using these colors. Here's an example code: 189 | 190 | ``` 191 | @import '~mdb-ui-kit/src/scss/mdb.pro.scss'; 192 | 193 | $my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme 194 | $my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme 195 | 196 | $my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors 197 | 198 | // include theme styles 199 | @include mdb-theme($my-theme); 200 | ``` -------------------------------------------------------------------------------- /getMDBsrc.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs-extra'); 2 | 3 | try { 4 | fs.copySync('node_modules/mdb-ui-kit/src', 'mdb') 5 | console.log('MDB UI KIT source code successfully copied!'); 6 | } catch (err) { 7 | console.log('Failed to copy MDB UI KIT source code!'); 8 | } -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | verbose: true, 3 | collectCoverage: true, 4 | coveragePathIgnorePatterns: [ 5 | '/node_modules/', 6 | '/dist', 7 | '/test', 8 | ], 9 | coverageDirectory: 'test/coverage', 10 | }; 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mdb-webpack-starter", 3 | "version": "3.0.0", 4 | "scripts": { 5 | "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack/webpack.config.dev.js --open", 6 | "startMDB": "cross-env NODE_ENV=development webpack-dev-server --config webpack/mdb/webpack.config.mdb.dev.js --open", 7 | "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js --colors", 8 | "buildMDB": "cross-env NODE_ENV=production webpack --config webpack/mdb/webpack.config.mdb.prod.js --colors", 9 | "getMDBsrc": "node getMDBsrc", 10 | "test": "jest", 11 | "lint": "lint-staged && pretty-quick --staged" 12 | }, 13 | "husky": { 14 | "hooks": { 15 | "pre-commit": "lint-staged && pretty-quick --staged" 16 | } 17 | }, 18 | "lint-staged": { 19 | "src/**/*.js": [ 20 | "eslint --fix" 21 | ], 22 | "src/**/*.css": [ 23 | "stylelint --fix" 24 | ] 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/mdbootstrap/mdb-webpack-starter" 29 | }, 30 | "keywords": [ 31 | "material design", 32 | "bootstrap", 33 | "webpack" 34 | ], 35 | "author": "M.Smolenski ", 36 | "license": "MIT", 37 | "devDependencies": { 38 | "@babel/core": "^7.9.0", 39 | "@babel/plugin-proposal-class-properties": "^7.8.3", 40 | "@babel/plugin-syntax-dynamic-import": "^7.8.3", 41 | "@babel/polyfill": "^7.8.7", 42 | "@babel/preset-env": "^7.9.5", 43 | "autoprefixer": "^9.7.6", 44 | "babel-eslint": "^10.1.0", 45 | "babel-loader": "^8.1.0", 46 | "clean-webpack-plugin": "^3.0.0", 47 | "copy-webpack-plugin": "^5.1.1", 48 | "core-js": "^3.8.3", 49 | "cross-env": "^7.0.2", 50 | "css-loader": "^3.5.2", 51 | "eslint": "^6.8.0", 52 | "eslint-config-airbnb-base": "^14.1.0", 53 | "eslint-config-prettier": "^6.11.0", 54 | "eslint-loader": "^3.0.3", 55 | "eslint-plugin-import": "^2.20.2", 56 | "eslint-plugin-prettier": "^3.1.3", 57 | "file-loader": "^5.1.0", 58 | "fs-extra": "^9.0.1", 59 | "html-webpack-plugin": "^4.3.0", 60 | "husky": "^4.2.5", 61 | "jest": "^26.0.1", 62 | "lint-staged": "^10.2.4", 63 | "mini-css-extract-plugin": "^0.9.0", 64 | "optimize-css-assets-webpack-plugin": "^5.0.3", 65 | "postcss-loader": "^3.0.0", 66 | "prettier": "^2.0.5", 67 | "pretty-quick": "^2.0.1", 68 | "sass": "^1.30.0", 69 | "sass-loader": "^8.0.2", 70 | "style-loader": "^1.2.1", 71 | "stylelint": "^13.5.0", 72 | "stylelint-config-prettier": "^8.0.1", 73 | "stylelint-config-recommended": "^3.0.0", 74 | "stylelint-config-recommended-scss": "^4.2.0", 75 | "stylelint-config-standard": "^20.0.0", 76 | "stylelint-order": "^4.1.0", 77 | "stylelint-prettier": "^1.1.2", 78 | "stylelint-scss": "^3.17.2", 79 | "uglifyjs-webpack-plugin": "^2.2.0", 80 | "webpack": "^4.43.0", 81 | "webpack-cli": "^3.3.12", 82 | "webpack-dev-server": "^3.11.0", 83 | "webpack-fix-style-only-entries": "^0.5.1", 84 | "webpack-merge": "^4.2.2" 85 | }, 86 | "dependencies": { 87 | "@popperjs/core": "^2.6.0", 88 | "chart.js": "^3.7.1", 89 | "chartjs-plugin-datalabels": "^2.0.0", 90 | "deepmerge": "^4.2.2", 91 | "detect-autofill": "^1.1.3", 92 | "mdb-ui-kit": "^4.0.0", 93 | "perfect-scrollbar": "^1.5.0", 94 | "popper.js": "^1.16.1" 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = () => ({ 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | }) -------------------------------------------------------------------------------- /src/img/mdb-favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdbootstrap/mdb-webpack-starter/d628930b310aa96a244b2cb5ec31311942cb2659/src/img/mdb-favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MDB Webpack Starter 8 | 9 | 10 | 11 | 15 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 | 35 |
Thank you for using our product. We're glad you're with us.
36 |

MDB Team

37 |
38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import * as mdb from 'mdb-ui-kit'; 2 | 3 | export default { 4 | mdb, 5 | }; 6 | -------------------------------------------------------------------------------- /src/mdb/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MDB Webpack Starter 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | 27 |
Thank you for using our product. We're glad you're with us.
28 |

MDB Team

29 |
30 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import '~mdb-ui-kit/css/mdb.min.css'; 2 | -------------------------------------------------------------------------------- /webpack/mdb/webpack.common.mdb.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 3 | const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries'); 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5 | 6 | module.exports = { 7 | entry: { 8 | 'js/mdb': Path.resolve(__dirname, '../../src/js/index.js'), 9 | 'css/mdb': Path.resolve(__dirname, '../../src/scss/index.scss'), 10 | }, 11 | output: { 12 | library: 'mdb', 13 | libraryTarget: 'umd', 14 | globalObject: 'this', 15 | umdNamedDefine: true, 16 | path: Path.join(__dirname, '../../dist'), 17 | filename: '[name].min.js', 18 | }, 19 | plugins: [ 20 | new CopyWebpackPlugin([ 21 | { from: Path.resolve(__dirname, '../../src/mdb/index.html') }, 22 | { from: Path.resolve(__dirname, '../../src/img'), to: 'img' }, 23 | ]), 24 | new FixStyleOnlyEntriesPlugin(), 25 | new MiniCssExtractPlugin({ 26 | filename: '[name].min.css', 27 | }), 28 | ], 29 | resolve: { 30 | alias: { 31 | '~': Path.resolve(__dirname, '../../src'), 32 | 'mdb': Path.join(__dirname, '../../node_modules/mdb-ui-kit'), 33 | }, 34 | }, 35 | module: { 36 | rules: [ 37 | { 38 | test: /\.mjs$/, 39 | include: /node_modules/, 40 | type: 'javascript/auto', 41 | }, 42 | { 43 | test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, 44 | use: { 45 | loader: 'file-loader', 46 | options: { 47 | name: '[path][name].[ext]', 48 | }, 49 | }, 50 | }, 51 | { 52 | test: /\.s?css/i, 53 | use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'], 54 | }, 55 | ], 56 | }, 57 | }; 58 | -------------------------------------------------------------------------------- /webpack/mdb/webpack.config.mdb.dev.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const Webpack = require('webpack'); 3 | const merge = require('webpack-merge'); 4 | const common = require('./webpack.common.mdb.js'); 5 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 6 | 7 | module.exports = merge(common, { 8 | mode: 'development', 9 | devtool: 'cheap-eval-source-map', 10 | devServer: { 11 | inline: true, 12 | }, 13 | plugins: [ 14 | new Webpack.DefinePlugin({ 15 | 'process.env.NODE_ENV': JSON.stringify('development'), 16 | }), 17 | new HtmlWebpackPlugin({ 18 | filename: 'index.html', 19 | template: Path.resolve(__dirname, '../../src/mdb/index.html'), 20 | inject: false, 21 | }), 22 | ], 23 | module: { 24 | rules: [ 25 | { 26 | test: /\.js$/, 27 | include: [ 28 | Path.resolve(__dirname, '../../src'), 29 | Path.resolve(__dirname, '../../mdb') 30 | ], 31 | enforce: 'pre', 32 | loader: 'eslint-loader', 33 | options: { 34 | emitWarning: true, 35 | }, 36 | }, 37 | { 38 | test: /\.js$/, 39 | include: [ 40 | Path.resolve(__dirname, '../../src'), 41 | Path.resolve(__dirname, '../../mdb') 42 | ], 43 | loader: 'babel-loader', 44 | }, 45 | ], 46 | }, 47 | }); 48 | -------------------------------------------------------------------------------- /webpack/mdb/webpack.config.mdb.prod.js: -------------------------------------------------------------------------------- 1 | const Webpack = require('webpack'); 2 | const merge = require('webpack-merge'); 3 | const common = require('./webpack.common.mdb.js'); 4 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 5 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 6 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 7 | 8 | module.exports = merge(common, { 9 | mode: 'production', 10 | devtool: 'source-map', 11 | stats: 'errors-only', 12 | bail: true, 13 | optimization: { 14 | minimizer: [ 15 | new UglifyJsPlugin({ 16 | cache: true, 17 | parallel: true, 18 | sourceMap: true, 19 | }), 20 | new OptimizeCSSAssetsPlugin({ 21 | cssProcessorOptions: { 22 | map: { 23 | inline: false, 24 | }, 25 | }, 26 | }), 27 | ], 28 | }, 29 | plugins: [ 30 | new CleanWebpackPlugin(), 31 | new Webpack.DefinePlugin({ 32 | 'process.env.NODE_ENV': JSON.stringify('production'), 33 | }), 34 | new Webpack.optimize.ModuleConcatenationPlugin(), 35 | ], 36 | module: { 37 | rules: [ 38 | { 39 | test: /\.js$/, 40 | exclude: /node_modules/, 41 | use: 'babel-loader', 42 | }, 43 | ], 44 | }, 45 | }); 46 | -------------------------------------------------------------------------------- /webpack/webpack.common.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const Webpack = require('webpack'); 3 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 4 | const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries'); 5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 6 | 7 | module.exports = { 8 | entry: { 9 | 'js/index': Path.resolve(__dirname, '../src/js/index.js'), 10 | 'css/index': Path.resolve(__dirname, '../src/scss/index.scss'), 11 | }, 12 | output: { 13 | path: Path.join(__dirname, '../dist'), 14 | filename: '[name].min.js', 15 | }, 16 | plugins: [ 17 | new Webpack.ProvidePlugin({ 18 | 'mdb': 'mdb', 19 | }), 20 | new CopyWebpackPlugin([ 21 | { from: Path.resolve(__dirname, '../src/index.html') }, 22 | { from: Path.resolve(__dirname, '../src/img'), to: 'img' }, 23 | ]), 24 | new FixStyleOnlyEntriesPlugin(), 25 | new MiniCssExtractPlugin({ 26 | filename: '[name].min.css', 27 | }), 28 | ], 29 | resolve: { 30 | alias: { 31 | '~': Path.resolve(__dirname, '../src'), 32 | 'mdb': Path.join(__dirname, '../node_modules/mdb-ui-kit'), 33 | }, 34 | }, 35 | module: { 36 | rules: [ 37 | { 38 | test: /\.mjs$/, 39 | include: /node_modules/, 40 | type: 'javascript/auto', 41 | }, 42 | { 43 | test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, 44 | use: { 45 | loader: 'file-loader', 46 | options: { 47 | name: '[path][name].[ext]', 48 | }, 49 | }, 50 | }, 51 | { 52 | test: /\.s?css/i, 53 | use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'], 54 | }, 55 | ], 56 | }, 57 | }; 58 | -------------------------------------------------------------------------------- /webpack/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const Webpack = require('webpack'); 3 | const merge = require('webpack-merge'); 4 | const common = require('./webpack.common.js'); 5 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 6 | 7 | module.exports = merge(common, { 8 | mode: 'development', 9 | devtool: 'cheap-eval-source-map', 10 | devServer: { 11 | inline: true, 12 | }, 13 | plugins: [ 14 | new Webpack.DefinePlugin({ 15 | 'process.env.NODE_ENV': JSON.stringify('development'), 16 | }), 17 | new HtmlWebpackPlugin({ 18 | filename: 'index.html', 19 | template: Path.resolve(__dirname, '../src/index.html'), 20 | inject: false, 21 | }), 22 | ], 23 | module: { 24 | rules: [ 25 | { 26 | test: /\.js$/, 27 | include: Path.resolve(__dirname, '../src'), 28 | enforce: 'pre', 29 | loader: 'eslint-loader', 30 | options: { 31 | emitWarning: true, 32 | }, 33 | }, 34 | { 35 | test: /\.js$/, 36 | include: Path.resolve(__dirname, '../src'), 37 | loader: 'babel-loader', 38 | }, 39 | ], 40 | }, 41 | }); 42 | -------------------------------------------------------------------------------- /webpack/webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const Webpack = require('webpack'); 2 | const merge = require('webpack-merge'); 3 | const common = require('./webpack.common.js'); 4 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 5 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 6 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 7 | 8 | module.exports = merge(common, { 9 | mode: 'production', 10 | devtool: 'source-map', 11 | stats: 'errors-only', 12 | bail: true, 13 | optimization: { 14 | minimizer: [ 15 | new UglifyJsPlugin({ 16 | cache: true, 17 | parallel: true, 18 | sourceMap: true, 19 | }), 20 | new OptimizeCSSAssetsPlugin({ 21 | cssProcessorOptions: { 22 | map: { 23 | inline: false, 24 | }, 25 | }, 26 | }), 27 | ], 28 | }, 29 | plugins: [ 30 | new CleanWebpackPlugin(), 31 | new Webpack.DefinePlugin({ 32 | 'process.env.NODE_ENV': JSON.stringify('production'), 33 | }), 34 | new Webpack.optimize.ModuleConcatenationPlugin(), 35 | ], 36 | module: { 37 | rules: [ 38 | { 39 | test: /\.js$/, 40 | exclude: /node_modules/, 41 | use: 'babel-loader', 42 | }, 43 | ], 44 | }, 45 | }); 46 | --------------------------------------------------------------------------------