Folder Structure 📂

Understand folder structure of Materialize and everything contains with description.


Once you unzip the package from marketplace/store, you will find folder which contains precompiled and source code flavors.

  • scss/, libs/, fonts/ & js/ folders are the source (src) of this template.
  • assets/vendors OR dist/ contains generated files from SCSS, Libs, Fonts & JS.
  • assets/, html/ and html-starter/ folder contain static css, js, html and media files.
  • build/ is not include in package, You can be generate it using npm run build:prod command for production. Read more
📦
├── 📂 assets                                       > Contain template static & generated assets
│   ├── 📂 audio
│   ├── 📂 css                                      > Demo & Example related styles only
│   ├── 📂 img                                      > Images (jpeg/png)
│   ├── 📂 js                                       > JS files i.e demos, pages & apps
│   │   ├── 📄 main.js                                > Template Main JS file (Init)
│   │   ├── 📄 config.js                              > Template config file for easy customization
│   │   ├── 📄 front-main.js                          > Front pages Main JS file (Init)
│   │   ├── 📄 front-config.js                        > Front pages config file for easy customization
│   │   └── 📄 ...
│   ├── 📂 json                                     > Search, Apps, Table & Translation fake data
│   ├── 📂 svg                                      > SVGs
│   └── 📂 vendor                                   > Generated assets i.e css, js, fonts & libs
├── 📂 build                                      > Generated build for Production 🚀
├── 📂 dist                                       > Generated dist 📦
├── 📂 fonts                                      > Template Font-icons
├── 📂 html                                       > Template HTML
│   ├── 📂 vertical-menu-template                   > With Customizer
│   ├── 📂 vertical-menu-template-no-customizer     > Without Customizer
│   ├── 📂 front-pages                              > Front pages for ex: landingm payment, checkout, pricing etc...
│   └── ...
├── 📂 html-starter                               > Starter HTML files with least required libs
├── 📂 js                                         > Core JS(ES6) files
│   ├── 📄 menu.js                                  > Core Menu
│   ├── 📄 template-customizer.js                   > Customizer Plugin
│   └── 📄 ...
├── 📂 libs                                       > Third-party libs i.e datatable, full-calender etc...
├── 📂 scss                                       > Core SCSS
│   ├── 📂 _bootstrap-extended                      > Extended styles of bootstrap components
│   ├── 📂 _components                              > Contain custom components style
│   ├── 📂 _custom-variables                        > Custom variables files (bootstrap, custom compo., pages & libs) for customer to override
│   ├── 📂 _theme                                   > Custom themes mixin for bootstrap, libs & pages
│   ├── 📂 pages                                    > Pages, Apps & Front Pages styles
│   ├── 📂 rtl/                                     > RTL supported styles
│   ├── 📄 core.scss                                > Core (light) style file which includes bootstrap, bootstrap-extended, components & colors
│   ├── 📄 core-dark.scss                           > Core dark style file
│   ├── 📄 theme-default.scss                       > Default (light) theme style file
│   ├── 📄 theme-default-dark.scss                  > Default dark theme style file
│   └── 📄 ...
├── 📂 tasks                                      > Gulp tasks
├── 📄 .eslintignore                              > eslint ignore file
├── 📄 .eslintrc.json                             > eslint rc file
├── 📄 .npmrc                                     > To resolve peer dependency while using npm
├── 📄 .prettierignore                            > prettier ignore file
├── 📄 .prettierrc.json                           > prettier rc file
├── 📄 build-config.js                            > Template build config file
├── 📄 gulpfile.js                                > Gulpfile
├── 📄 index.html                                 > Index page to check all demos
├── 📄 package.json
└── 📄 webpack.config.js                          > Webpack file to transpile & bundle JS files.
© 2017- Pixinvent, Hand-crafted & Made with ❤️