Folder Structure

The Maxitor - Admin & Dashboard Template. project is organized to streamline your workflow and make it easy to manage, customize, and extend. Below is a breakdown of the main directories and files included in your template. We have user friendly structure which can easy for the Developers to understand.

  • Admin (v1.0.0 )
    • dist (#The production-ready output of your project, compiled and minified for deployment.)
      • assets
        • css (#Compiled CSS files.)
          • app-rtl.min.css (# RTL related css are define in this file.)
          • app.min.css (#Main stylesheet for admin interface.)
          • bootstrap-rtl.min.css (#Bootstrap RTL stylesheet define in this file.)
          • bootstrap.min.css (#Bootstrap stylesheet for admin interface.)
          • icons.min.css (#Icon related css are define in this file.)
        • fonts (#Compiled fonts assets for production.)
        • images (#Compiled image assets for production.)
        • js (#Compiled JavaScript files.)
        • libs (#Compiled libraries used in the project.)
        • All JS Files (#Compiled JavaScript files.)
      • All HTML Pages Files (#Compiled HTML pages.)
    • src (#Source files used during development.)
      • assets (#Development assets:)
        • fonts (#fonts files used in development.)
        • images (#Image files used in development.)
        • js (#JavaScript files for development.)
          • apps
          • auth
          • chart
          • dashboards
          • form
          • icon
          • map
          • pages
          • table
          • ui
          • app.js
          • layout-setup.js
          • plugin.js
          • scroll-top.js
        • libs (#Library files used in development.)
        • scss (#SCSS files for styling:)
          • custom (#SCSS files for styling:)
            • apps
            • components
            • dashboard
            • fonts
            • pages
            • plugins
            • structure
          • _custom-variables-dark.scss (#SCSS file to manage dark mode variables.)
          • _custom-variables.scss (#SCSS file to add extra variables.)
          • _variables-dark.scss (#SCSS file to manage all common variables.)
          • _variables.scss (#SCSS file to manage all common variables.)
          • apps.scss (#Manage all SCSS in single file.)
          • bootstrap.scss (#SCSS file to import bootstrap.)
          • icons.scss (#SCSS file to import Icons.)
      • partials (#Reusable HTML partials:)
        • auth-background.html (#Structure for the auth background.)
        • auth-header.html (#Structure for the auth header.)
        • body.html (#Structure for the body element.)
        • footer.html (#Footer content.)
        • head-css.html (#CSS links for the head section.)
        • header.html (#Header content.)
        • horizontal.html (#Horizontal content.)
        • main.html (#main HTML content.)
        • page-title.html (#Breadcrumb content.)
        • scroll-to-top.html (#Scroll to top partial for the all pages.)
        • sidebar.html (#Sidebar menu list.)
        • switcher.html (#Layout for settings.)
        • title-meta.html (#Title and meta tags.)
        • vendor-scripts.html (#Script references for third-party libraries.)
      • All HTML Pages Files (#Complete HTML pages constructed from partials.)
    • package-copy.json (#Configuration for managing libraries)
    • package.json (#Node.js package manager file, listing dependencies and project scripts.)
    • preload.js
    • README.md (#Project documentation and instructions.)
    • webpack.config.js (#Configuration for Vite, the build tool used for bundling and optimizing assets.)
    • yarn.lock (#Lockfile that ensures consistent package versions.)