Getting started!

MUSA Documentation

Introduction

MUSA is a fully responsive HTML admin template, which is built with Bootstrap 4 and JavaScript. MUSA admin contains many example pages with many ready to use elements which are easy to customize. You can choose from various existing layouts, as well you can customize the main colors of your template.

File structure

You can find the following directories and files.

  • root folder

    
        musa/
        ├── build/
        ├── node_modules/
        ├── src/
        ├── gulpfile.js
        ├── package.json
        └── README.md
      
  • build folder

    build folder includes all compiled and minified files. There are not global htmls, we have separate htmls for each page ( header, footer, sidebar are separated for each page).

    
    ├── build/
    │  ├── css/
    │    ├── chat.css
    │    ├── color-settings.css
    │    ├── coming-soon.css
    │    ├── dashboard.css
    │    ├── documentation.css
    │    ├── error.css
    │    ├── invoice.css
    │    ├── lockscreen.css
    │    ├── login-register.css
    │    ├── main.css
    │    ├── user-profile.css
    │    └── vendor.min.css
    │  ├── fonts/
    │  │   └── compiled font files
    │  ├── img/
    │  │   └── compiled image files
    │  ├── js/
    │      ├── charts.js
    │      ├── main.js
    │      ├── settings.min.js
    │      └── vendor.min.css
    │  ├── 403-error.html
    │  ├── 404-error.html
    │  ├── 500-error.html
    │  ├── basic-tables.html
    │  ├── chat.html
    │  ├── chat-box.html
    │  ├── chat-page.html
    │  ├── coming-soon.html
    │  ├── coming-soonV2.html
    │  ├── data-tables.html
    │  ├── documentation.html
    │  ├── email-template-alert.html
    │  ├── email-template-basic.html
    │  ├── email-template-billing.html
    │  ├── form-advanced.html
    │  ├── form-general.html
    │  ├── form-layouts.html
    │  ├── form-wizard.html
    │  ├── icons-fontawesome.html
    │  ├── icons-material.html
    │  ├── index.html
    │  ├── invoice.html
    │  ├── lockscreen.html
    │  ├── login.html
    │  ├── loginV2.html
    │  ├── recover-password.html
    │  ├── register.html
    │  ├── registerV2.html
    │  ├── ui-buttons.html
    │  ├── ui-cards.html
    │  ├── ui-carousel.html
    │  ├── ui-colors.html
    │  ├── ui-images.html
    │  ├── ui-modals.html
    │  ├── ui-notifications.html
    │  ├── ui-progress-bars.html
    │  ├── ui-sliders.html
    │  ├── ui-tabs-accordions.html
    │  ├── ui-typography.html
    │  └── user-profile.html
        

    build/css folder contains all compiled and minified css files, where:

    • vendor.min.css contains bootstrap.min.css, animate.min.css, font-awesome.min.css,
    • chat contains all stylesheets for chat pages chat-box.html, chat-page.html,
    • color-settings.css contains all stylesheets that are temporary, this file is loading before admin will customize site settings and will be removed from site after customizing, and will be replaced with another css, which is written in html/settings/theme-settings.html, which contains the same css only with the values chosen by admin.
    • coming-soon contains all stylesheets for coming soon pages coming-soon.html, coming-soonV2.html,
    • dashboard.css contains all stylesheets for the main page index.html,
    • documentation.css contains all stylesheets for the documentation page documentation.html,
    • error.css contains all stylesheets for the error pages 403-error.html, 404-error.html, 500-error.html,
    • invoice.css contains all stylesheets for the invoice page invoice.html,
    • lockscreen.css contains all stylesheets for the lockscreen page lockscreen.html,
    • login-register.css contains all stylesheets for login and register pages login.html, loginV2.html, register.html, registerV2.html,
    • user-profile.css contains all stylesheets for the user profile page user-profile.html

    build/js folder contains all compiled and minified js files, where:

    • vendor.min.js contains bootstrap.js, jquery.js, popper.js,
    • chart.js file includes all scripts about charts,
    • main.js file contains all global functions, events on site, for example open and close sidebar menu, form wizard, collapsible table, sliders etc.
  • node_modules folder

    This folder includes all required packages.

  • src folder

    
    ├── src/
    │  ├── fonts/
    │  └── All Font files
    │  ├── html/
    │     ├── partials
    │          ├── footer.html
    │          ├── header.html
    │          ├── sidebar.html
    │          ├── site-foot.html
    │          └── site-head.html
    │     ├── settings
    │          ├── color-settings.html
    │          ├── scss-colors-settings.html
    │          └── theme-settings.html
    │  ├── 403-error.html
    │  ├── 404-error.html
    │  ├── 500-error.html
    │  ├── basic-tables.html
    │  ├── chat-box.html
    │  ├── chat-page.html
    │  ├── coming-soon.html
    │  ├── coming-soonV2.html
    │  ├── data-tables.html
    │  ├── documentation.html
    │  ├── email-template-alert.html
    │  ├── email-template-basic.html
    │  ├── email-template-billing.html
    │  ├── form-advanced.html
    │  ├── form-general.html
    │  ├── form-layouts.html
    │  ├── form-wizard.html
    │  ├── icons-fontawesome.html
    │  ├── icons-material.html
    │  ├── index.html
    │  ├── invoice.html
    │  ├── lockscreen.html
    │  ├── login.html
    │  ├── loginV2.html
    │  ├── recover-password.html
    │  ├── register.html
    │  ├── registerV2.html
    │  ├── ui-buttons.html
    │  ├── ui-cards.html
    │  ├── ui-carousel.html
    │  ├── ui-colors.html
    │  ├── ui-images.html
    │  ├── ui-modals.html
    │  ├── ui-notifications.html
    │  ├── ui-progress-bars.html
    │  ├── ui-sliders.html
    │  ├── ui-tabs-accordions.html
    │  ├── ui-typography.html
    │  └── user-profile.html
    │  ├── img/
    │      └── All Image files
    │  ├── js/
    │      ├── theme-settings
    │          ├── jscolor.min.js
    │          └── settings.js
    │      ├── charts.js
    │      └── main.js
    │  └── sass/
    │      ├── pages
    │          ├── chat.scss
    │          ├── coming-soon.scss
    │          ├── dashboard.scss
    │          ├── documentation.scss
    │          ├── error.scss
    │          ├── invoice.scss
    │          ├── lockscreen.scss
    │          ├── login-register.scss
    │          └── user-profile.scss
    │      ├── partials
    │          ├── animation.scss
    │          ├── buttons.scss
    │          ├── cards.scss
    │          ├── color-settings.scss
    │          ├── colors.scss
    │          ├── dark-sidebar.scss
    │          ├── default-colors.scss
    │          ├── fixed-header.scss
    │          ├── fonts.scss
    │          ├── forms.scss
    │          ├── globals.scss
    │          ├── header-footer.scss
    │          ├── helper-classes.scss
    │          ├── icons.scss
    │          ├── images.scss
    │          ├── light-header.scss
    │          ├── mixins.scss
    │          ├── modals.scss
    │          ├── nav-md.scss
    │          ├── nav-sm.scss
    │          ├── notifications.scss
    │          ├── progress-bars.scss
    │          ├── right-sidebar.scss
    │          ├── rtl.scss
    │          ├── sidebar.scss
    │          ├── sliders.scss
    │          ├── tables.scss
    │          ├── tabs-accordions.scss
    │          ├── theme-colors.scss
    │          ├── theme-settings.scss
    │          ├── typography.scss
    │          └── variables.scss
    │      └── main.scss
    

    sass and js folders are the source code for our CSS and JavaScript. We will refer to these folders separately. fonts/ and img/ folders include accordingly all fonts and images we use in the project.

    html folder includes two folders: partials and settings.

  • html/partials folder includes five files: footer.html, header.html, sidebar.html, site-foot.html and site-head.html. The first three ones are global for all pages, and they are included in each page. When you make some changes in these files, it will affect on all pages. site-foot.html and site-head.html files are global for all pages except the pages, where different css files are loading.

  • html/settings folder includes three files: color-settings.html, scss-colors-settings.html and theme-settings.html. These files are related to theme settings and they are global for all pages.

    • color-settings.html There is written dynamic css of the template with dynamic values. When admin customizes colors of the template, these dynamic values will be replaced with values chosen by him.

    • scss-colors-settings.html There are dynamic variables of colors, which can be customized by the admin.

    • theme-settings.html It is the sidebar html of settings, admin can set settings from here.

  • The other html files are root htmls, where is written contents of the pages. There is imported global htmls from three folders described above. After compilation, these imported htmls will become as a whole html file.

Credits
  • Bootstrap 4.0.0

  • Jquery 3.2.1

  • popper.js 1.12.5

  • Fontawesome

  • Material design icons

  • animate.css

jQuery and Popper.js are only required for bootstrap components the use of JavaScript to function. In MUSA there are not Jquery scripts, all functionality is written with native JavaScript.