Quantum

Quantum v1.0

Bootstrap 5 responsive admin template

documented by Sean Ngu

Updated on: 02/August/2024
By: Sean Ngu

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to send your question via ThemeForest. Thanks so much!

A) Installation - top

Download the .NET Core SDK from official website and install on your machine.

If you are using dotnet cli, run the following command:

cd /your-path-url/template_asp/Quantum/
dotnet run

// if you are using hot reload, use the following command
dotnet watch
OR

If you are using visual studio, just double click the Quantum.sln inside the template folder. You may download the latest version of Visual studio from here.

B) File Structure - top

File structure overview for Quantum - .NET Core 8.0 MVC

template_startup/
├── Quantum.sln        
└── Quantum/
    ├── Areas/                        // asp identity
    ├── bin/
    ├── Controllers/
    ├── Data/
    ├── Models/
    ├── obj/
    ├── Properties/
    ├── src/       
    ├── Views/                        // scss / img / js source file
    ├── wwwroot/                      // generated css / js / img file
    ├── app.db
    ├── appsettings.development.json
    ├── appsettings.json
    ├── webpack.app.js                // webpack app.min.css & app.min.js settings
    ├── webpack.config.js             // webpack config files
    ├── webpack.vendor.js             // webpack vendor.min.js settings
    ├── package.json
    ├── sidebar.json                  // sidebar menu structure
    ├── Program.cs
    └── Quantum.csproj

C) Layout Structure - top

Below is the general page structure for /Views/Shared/Layout.cshtml.

<!DOCTYPE html>
<html lang="en" @ViewData["HtmlAttribute"]>
<head>
  <meta charset="utf-8">
  <title>Quantum | @ViewData["Title"]</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="@ViewData["MetaDescription"]" />
  <meta name="author" content="@ViewData["MetaAuthor"]" />
  <meta name="keywords" content="@ViewData["MetaKeywords"]" />
  
  @RenderSection("MetaTag", required: false)

  <!-- ================== BEGIN core-css ================== -->
  <link href="~/css/vendor.min.css" rel="stylesheet" />
  <link href="~/css/app.min.css" rel="stylesheet" />
  <!-- ================== END core-css ================== -->

  @RenderSection("Styles", required: false)
</head>
<body class="@ViewData["BodyClass"]">
  <partial name="_Loader" />
    
  <!-- BEGIN #app -->
  <div id="app" class="app @ViewData["AppClass"]">
    @if (ViewData["AppHeaderNone"] == null) {
      <partial name="_Header" />
    }

    @if (ViewData["AppSidebarNone"] == null) {
      <partial name="_Sidebar" />
    }

    @if (ViewData["AppTopNav"] != null) {
      <partial name="_TopNav" />
    }

    @if (ViewData["AppContentNone"] == null) {
      <div id="content" class="app-content @ViewData["AppContentClass"]">
        @RenderBody()
      </div>
    } else {
      @RenderBody()
    }

    @RenderSection("OutterAppContainerContent", required: false)

    @if (ViewData["AppFooter"] != null) {
      <partial name="_Footer" />
    }
    
    <partial name="_ScrollTopBtn" />
    <partial name="_ThemePanel" />
    
  </div>
  <!-- END #app -->

  <!-- ================== BEGIN core-js ================== -->
  <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
  <script src="~/js/vendor.min.js"></script>
  <script src="~/js/app.min.js"></script>
  <!-- ================== END core-js ================== -->
  
  @RenderSection("Scripts", required: false)
</body>
</html>

Below is the list of supported variable / setting in shared page.

Variable Usage
ViewData["HtmlAttribute"] Set the attribute for html tag
ViewData["MetaDescription"] Set the variable for meta description
ViewData["MetaAuthor"] Set the variable for meta author
ViewData["MetaKeywords"] Set the variable for meta keywords
ViewData["Title"] Set the page title for individual page
ViewData["BodyClass"] Add css class to the body tag
ViewData["AppClass"] Add css class to the .app container
ViewData["AppContentClass"] Add css class to the .app-content container
ViewData["AppHeaderNone"] Set to true if you wish to remove header
ViewData["AppSidebarNone"] Set to true if you wish to remove sidebar
ViewData["AppWithoutContainer"] Set to true if you wish to render the page content without .app-content container
ViewData["AppFooter"] Set to true if you wish to add the footer to the page
ViewData["AppTopNav"] Set to true if you wish to add the top nav to the page

Below is the list of supported section in shared page.

Section Usage
@section MetaTag {
-- tag html --
}		 A way to add extra meta tag in individual page
@section Styles {
-- css files / url --
}		 A way to add extra css files in individual page
@section Scripts {
-- js files / url --
}		 A way to add extra js files in individual page
@section OutterAppContainerContent {
-- outter content here --
}		 A way to put the content outside .app container

D) CSS - top

All the css files used in Quantum has been compiled into one single files vendor.min.css and Quantum core css is compiled into app.min.css by using gulp. Below is the list of library included in app.min.css. You may change the setting in gulpfile.js if you wish to add / remove library from app.min.css.

  1. FontAwesome
  2. jQuery UI
  3. Perfect Scrollbar
  4. Bootstrap Icons
<!-- core-css -->
<link href="~/css/vendor.min.css" rel="stylesheet" />
<link href="~/css/app.min.css" rel="stylesheet" />

<!-- OR without vendor.min.css -->
<link href="~/lib/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link href="~/lib/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
<link href="~/lib/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" />
<link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
<link href="assets/css/app.min.css" rel="stylesheet" />

<!-- core-css required folder -->
/wwwroot/css
/wwwroot/webfonts

E) Javascript - top

This theme compiles 6 javascript library into one single file app.min.js and Quantum core js is compiled into app.min.js by using gulp. Below is the list of library included in app.min.js. You may change the setting in gulpfile.js if you wish to add / remove library from app.min.js.

  1. jQuery
  2. jQuery UI
  3. Bootstrap
  4. Perfect Scrollbar
  5. JavaScript Cookie

F) Page Options - top

Sidebar collapsed:

@{
  ViewData["AppClass"] = "app-sidebar-collapsed";
}

Full height:

@{
  ViewData["AppClass"] = "app-content-full-height";
}

Full width:

@{
  ViewData["AppClass"] = "app-content-full-width";
  ViewData["AppWithoutSidebar"] = true;
}

Fixed footer:

@{
  ViewData["AppClass"] = "app-footer-fixed";
  ViewData["AppWithFooter"] = true;
}

Boxed Layout

@{
  ViewData["BodyClass"] = "app-with-bg";
  ViewData["AppClass"] = "app-boxed-layout";
}

Top Nav (without sidebar)

@{
  ViewData["AppClass"] = "app-with-top-nav app-without-sidebar";
  ViewData["AppTopNav"] = true;
  ViewData["AppSidebarNone"] = true;
}

Top Nav (without header)

@{
  ViewData["AppClass"] = "app-with-top-nav app-without-header";
  ViewData["AppTopNav"] = true;
  ViewData["AppHeaderNone"] = true;
}

Mixed Nav

@{
  ViewData["AppClass"] = "app-with-top-nav";
  ViewData["AppTopNav"] = true;
}

Mixed Nav Boxed Layout

@{
  ViewData["AppClass"] = "app-with-top-nav app-boxed-layout";
  ViewData["AppTopNav"] = true;
}

G) Theme Color - top

Add the theme to the <body> tag in /Views/Shared/_Layout.cshtml in order to change the theme color.

Available Theme Options

<body class="theme-red">...</body>
<body class="theme-pink">...</body>
<body class="theme-orange">...</body>
<body class="theme-yellow">...</body>
<body class="theme-lime">...</body>
<body class="theme-green">...</body>
<body class="theme-teal">...</body>
<body class="theme-cyan">...</body>
<body class="theme-blue">...</body>
<body class="theme-purple">...</body>
<body class="theme-indigo">...</body>
<body class="theme-black">...</body>
<body class="theme-gray-100">...</body>
<body class="theme-gray-200">...</body>
<body class="theme-gray-300">...</body>
<body class="theme-gray-400">...</body>
<body class="theme-gray-500">...</body>
<body class="theme-gray-600">...</body>
<body class="theme-gray-700">...</body>
<body class="theme-gray-800">...</body>
<body class="theme-gray-900">...</body>

OR set the primary theme color from scss /src/scss/_variables.scss

<!-- LINE 79-->
$theme:        $red !default;
$theme:        $pink !default;
$theme:        $orange !default;
$theme:        $yellow !default;
$theme:        $lime !default;
$theme:        $green !default;
$theme:        $teal !default;
$theme:        $cyan !default;
$theme:        $blue !default;
$theme:        $purple !default;
$theme:        $indigo !default;
$theme:        $gray-200 !default;

H) RTL Mode - top

To enable RTL mode, follow these steps:

  1. Navigate to the /src/_variables.scss file in your code editor.
  2. Find the $enable-rtl variable and change its value to true: 
    $enable-rtl: true;
    This will enable RTL mode for your application.
  3. Save the changes to the file.
  4. Open your terminal or command prompt and navigate to the root directory of your project.
  5. Run the following command to regenerate the app.min.css file: 
    npm run start
    This will regenerate the app.min.css file with the changes you made to the $enable-rtl variable.

I) SCSS Configuration - top

Global Variables

The /src/_variables.scss file contains the variables that control the styles of your application.

To edit these variables, navigate to the /src/_variables.scss file in your code editor and modify the values of the variables to suit your needs. 

<!-- global variable -->
/src/_variables.scss

J) Webpack Compilation - top

If you wish to enable the webpack compilation during debug / release process, kindly add the following code in Quantum.csproj.

Do not forget to run the npm install command by using command prompt / terminal to generate the node_module folder. 
// add the following code

<Target Name="MyPreCompileTarget" BeforeTargets="Build">
  <Exec Command="npm run start" />
</Target>

You may run the following command to generate the plugins files in /lib folder 

cd /your-path-url/template_asp/Quantum/
npm install
npm run start

K) References - top

I've used the following images, icons or other files as listed.

Platform

  1. .NET: https://dotnet.microsoft.com/

jQuery Plugins

  1. animate.css: https://daneden.github.io/animate.css/
  2. ApexCharts: https://apexcharts.com/
  3. jQuery File Upload: https://blueimp.github.io/jQuery-File-Upload/
  4. Bootstrap: http://getbootstrap.com/
  5. Bootstrap Icons: https://icons.getbootstrap.com/
  6. Bootstrap Datepicker: https://uxsolutions.github.io/bootstrap-datepicker/
  7. Bootstrap Daterangepicker: http://www.daterangepicker.com/
  8. Bootstrap Slider: https://www.eyecon.ro/bootstrap-slider/
  9. Bootstrap Timepicker: http://jdewit.github.io/bootstrap-timepicker/
  10. Bootstrap Table: https://bootstrap-table.com/
  11. Chart.js: https://chartjs.org
  12. DataTables: https://datatables.net/
  13. FontAwesome: https://fontawesome.com/
  14. Fullcalendar: https://fullcalendar.io/
  15. Iconify: https://icon-sets.iconify.design/
  16. jQuery: https://jquery.com/
  17. jQuery UI: https://jqueryui.com/
  18. jQuery Typeahead: http://www.runningcoder.org/jquerytypeahead/
  19. jquery.maskedinput: https://github.com/excellalabs/jquery.maskedinput
  20. Javascript Cookie: https://github.com/js-cookie/js-cookie
  21. jszip: https://github.com/Stuk/jszip
  22. jVectormap: http://jvectormap.com/
  23. Lity: https://sorgalla.com/lity/
  24. Tag-It: http://aehlke.github.io/tag-it/
  25. Selectpicker: https://picker.uhlir.dev/
  26. Spectrum: https://seballot.github.io/spectrum/
  27. kbw-countdown: https://github.com/kbwood/countdown
  28. moment: http://momentjs.com/
  29. Pace: https://github.com/HubSpot/pace
  30. pdfmake: https://github.com/bpampuch/pdfmake
  31. Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
  32. PhotoSwipe: https://photoswipe.com/
  33. PicMo: https://picmojs.com/
  34. Popper.js: https://popper.js.org/
  35. Summernote: https://github.com/summernote/summernote

Photos

  1. Unsplash: https://unsplash.com/
  2. Freepik: https://www.freepik.com/

Icons

  1. Flaticon: https://www.flaticon.com/