v1.3

Bootstrap 4 responsive admin template

documented by Sean Ngu

Created: 28/April/2020
By: Sean Ngu

If you have any questions that are beyond the scope of this help file, please feel free to inbox me your question or send me an email via support email. Thanks so much!

* Support email can be found via downloaded version of Studio

Follow the following step to install the laravel in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide

<!-- run the following command --> 
cd /your-path-url/template_laravel
composer install
npm install 
npm run dev
php artisan serve

<!-- browse the url --> 
http://127.0.0.1:8000/

Make sure PHP >= 7.0.0 & node.js has been installed on your localhost / server

File structure overview for Laravel Version

template_laravel/
├── artisan
├── composer.json
├── package.json
├── phpunit.xml
├── readme.md
├── server.php
├── webpack.mix.js
├── app/
├── bootstrap/
├── config/
├── database/
├── public/
├── resources/
│   ├── lang
│   ├── js
│   ├── scss
│   └── views
│       ├── index.blade.php
│       ├── errors
│       └── layouts
├── routes/
├── storage/
└── tests/

We split the header, sidebar, footer and etc into few other part and include it in the base file. Base file has been located in /resources/views/layouts/default.blade.php.

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}"{{ (!empty($htmlAttribute)) ? $htmlAttribute : '' }}>
<head>
  @include('layout.partial.head')
</head>
<body class="{{ (!empty($bodyClass)) ? $bodyClass : '' }}">
  <!-- BEGIN #app -->
  <div id="app" class="app {{ (!empty($appClass)) ? $appClass : '' }}">
    @include('layout.partial.header')

    @includeWhen(empty($sidebarHide), 'layout.partial.sidebar')

    @yield('content')

    @includeWhen(!empty($footer), 'layout.partial.footer')
  </div>
  <!-- END #app -->

  @include('layout.partial.scroll-top-btn')

  @include('layout.partial.scripts')
</body>
</html>

Below is the list of supported variable / setting in view file.

Variable Usage
@extends('layout.default', ['htmlAttribute' => '']) Set the attribute for html tag
@extends('layout.default', ['bodyClass' => '']) Set the css class for body tag
@extends('layout.default', ['appClass' => '']) Set the app class for div#app tag
@extends('layout.default', ['sidebarHide' => true]) Flag to include / exclude sidebar in your page
@extends('layout.default', ['footer' => true]) Flag to include / exclude footer in your page

Using laravel stacks to add css / js by page level.

// example for how to add page level css
@push('css')
  <link href="/assets/plugins/photoswipe/dist/photoswipe.css" rel="stylesheet" />
  ...
@endpush

// example for how to add page level js
@push('scripts')
  <script src="/assets/plugins/photoswipe/dist/photoswipe-ui-default.min.js"></script>
  ...
@endpush

All the css files used in Studio Larvel has been compiled into one single files app.min.css by laravel mix. You may change the color scheme from /resources/scss/_variables.scss.

List of plugins in app.min.css:

  1. FontAwesome
  2. jQuery UI
  3. Animate.css
  4. Pace Loader
  5. Bootstrap
  6. Studio Core CSS

This theme compiles 7 javascript library into one single file app.min.js by laravel mix.

List of plugins in app.min.js:

  1. Pace Loader
  2. jQuery
  3. jQuery UI
  4. Bootstrap
  5. Slimscroll
  6. JavaScript Cookie
  7. Studio Core Javascript

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>

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/