Understand folder structure of Materio 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.