v1.3

Bootstrap 4 responsive admin template

documented by Sean Ngu

Created: 28/April/2020
By: Sean Ngu
Email: nguoksiong@live.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so much!

A) Installation - top

When you only need to include Studio compiled CSS or JS, below is the required core css and javascript. 

<link href="assets/css/app.min.css" rel="stylesheet" />
<script src="assets/js/app.min.js"></script>
OR

If you wish to configure the scss files settings, follow the following step to install gulp in your operating system.
You may refer to their official documentation for how to setup the development environment.
Setup Guide 

cd /your-path-url/studio_v1.0/admin/template/
npm install 
gulp

Make sure that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

B) File Structure - top

File structure overview for Studio

template/
├── dist/             // generated html / css / js files
├── gulpfile.js       // gulp settings
├── package.json      // npm package installed
└── src/
    ├── html/         // html source files
    ├── img/          // image source files
    ├── js/           // javascript source files
    └── scss/         // studio scss files

C) HTML Structure - top

Below is the general page structure and the required core css / js files for Studio Admin Template. The css / js files can be found via /dist/assets/ folder.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Studio</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 
        name="viewport" />
 
  <!-- core-css -->
  <link href="assets/css/app.min.css" rel="stylesheet" />
</head>
<body>
  <div id="app" class="app">
    <!-- app-header -->
    <header id="header" class="app-header">... </header>
    
    <!-- app-sidebar -->
    <sidebar id="sidebar" class="app-sidebar">... </sidebar>
    
    <!-- app-content -->
    <div id="content" class="app-content">...</div>
    
    <!-- btn-scroll-top -->
    <a href="#" data-click="scroll-top" class="btn-scroll-top fade"><i class="fa fa-arrow-up"></i></a>
  </div>
  
  <!-- BEGIN core-js -->
  <script src="assets/js/app.min.js"></script>
</body>
</html>

D) CSS - top

All the css files used in Studio has been compiled into one single files app.min.css by using gulp. If you are not using gulp, copy over the folder /dist/assets/css and /dist/assets/webfonts into your application assets folder.

  1. FontAwesome
  2. jQuery UI
  3. Animate.css
  4. Pace Loader
  5. Bootstrap
  6. Studio Core CSS
<!-- core-css -->
<link href="assets/css/app.min.css" rel="stylesheet" />

<!-- core-css required folder -->
/dist/assets/css
/dist/assets/webfonts

E) Javascript - top

This theme compiles 7 javascript library into one single file app.min.js by using gulp. If you are not using gulp, copy over the folder /dist/assets/js into your application assets folder.

  1. Pace Loader
  2. jQuery
  3. jQuery UI
  4. Bootstrap
  5. Slimscroll
  6. JavaScript Cookie
  7. Studio Core Javascript
<!-- core-js -->
<script src="assets/js/app.min.js"></script>

<!-- core-js required folder -->
/dist/assets/js

F) Page Options - top

Sidebar minified:

<div id="app" class="app app-sidebar-minified">
  ...
</div>

Full height:

<div id="app" class="app app-content-full-height">
  ...
  <div id="content" class="app-content" data-scrollbar="true" data-height="100%" 
       data-skip-mobile="true">
     ...
  </div>
</div>

Full width:

<div id="app" class="app app-content-full-width">
  ...
</div>

Fixed footer:

<div id="app" class="app app-footer-fixed">
  ...
  <div id="footer" class="app-footer">
    © 2020 seanTheme All Right Reserved
  </div>
</div>

Boxed Layout

<body class="app-with-bg">
  <div id="app" class="app app-boxed-layout">
    ...
  </div>
</body>

G) References - top

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

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 Colorpicker: https://github.com/farbelous/bootstrap-colorpicker/
  6. Bootstrap Datepicker: https://uxsolutions.github.io/bootstrap-datepicker/
  7. Bootstrap Daterangepicker: http://www.daterangepicker.com/
  8. Bootstrap Select: https://developer.snapappointments.com/bootstrap-select/examples/
  9. Bootstrap Slider: https://www.eyecon.ro/bootstrap-slider/
  10. Bootstrap Tagsinput: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
  11. Bootstrap Timepicker: http://jdewit.github.io/bootstrap-timepicker/
  12. Bootstrap Table: https://bootstrap-table.com/
  13. Bootstrap 3 Typeahead: https://github.com/bassjobsen/Bootstrap-3-Typeahead/
  14. Bootstrap 4 custom file input: https://github.com/Johann-S/bs-custom-file-input
  15. Chart.js: https://chartjs.org
  16. DataTables: https://datatables.net/
  17. FontAwesome: https://fontawesome.com/
  18. Fullcalendar: https://fullcalendar.io/
  19. jQuery: https://jquery.com/
  20. jQuery Slimscroll: http://rocha.la/jQuery-slimScroll
  21. jQuery UI: https://jqueryui.com/
  22. jquery.maskedinput: https://github.com/excellalabs/jquery.maskedinput
  23. Javascript Cookie: https://github.com/js-cookie/js-cookie
  24. jVectormap: http://jvectormap.com/
  25. kbw-countdown: https://github.com/kbwood/countdown
  26. moment: http://momentjs.com/
  27. Pace: https://github.com/HubSpot/pace
  28. PhotoSwipe: https://photoswipe.com/
  29. Popper.js: https://popper.js.org/
  30. jQuery Password Strength: https://github.com/ablanco/jquery.pwstrength.bootstrap
  31. 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/