AdminLTE ready for Laravel 5.7

Intro

Everytime I start a project, I spend quite amount of time cutting and arranging AdminLTE template to fit into my views, and arrange the variables and other customization options. I decided to do an abstract of the view, include all dependencies (updating to online CDNs ongoing!).

Installation

Configurations

configuration files include:

• App Name

  Laravel installation creates .env file with a variable APP_NAME, This value would be used accross the view files as provided with a fallback of Company Name

• App Short Name

  Unlike the App Name, this variable is not set. You will have to update your .env file and add the variable name APP_SHORT_NAME. If you don't, the view files will show SHB whereever it is required to show a short version of the App Name

Usage

Each page you create would have the below options to include:

• @section('otherMETA') Any additional </meta> tags that you want to add to the standard ones.
• @section('otherCSS') Any additional </link> files (below existing ones) that you want to add to the standard ones.
• @section('otherJS') Any additional </script> (below existing ones) that you want to add to the standard ones.
• @section('contentTitle') This section would be utilized in 2 locations:
  • Page Title: { CONTENT TITLE | APP NAME } </title>
  • Page Header: Top of the content page </h1>

• @section('contentTitleDesc') This would follow the Page Header in </small>
• @section('contents') The actual contents of your page, checkout the ./samples/* for readymade pages
• @section('version') This would display the application current version at the bottom rightside of the page (footer section)

Optional Tags:

You can add settings options and relate them to the user; this would allow the user to preserve the customization of their UX.

Options:

• Skin skin

  Options:

  • Blue skin-blue (default)
  • Black skin-black
  • Purple skin-purple
  • Green skin-green
  • Red skin-red
  • Yellow skin-yellow
  • Light Blue skin-blue-light
  • Light Black skin-black-light
  • Light Purple skin-purple-light
  • Light Green skin-green-light
  • Light Red skin-red-light
  • Light Yellow skin-yellow-light

• Layout layout

  Options:

  • Original {EMPTY_STRING} (default)
  • Fixed fixed
  • Boxed layout-boxed
  • Fixed & Boxed fixed layout-boxed

• Navigation Sidebar (Leftside) sideBar

  Options:

  • Mini sidebar-mini (default)
  • Collapsed sidebar-collapse
  • Expand on Hover sidebar-expanded-on-hover

• Control Sidebar (Rightside)

  Options:

  • Hidden {EMPTY_STRING} (default)
  • Open control-sidebar-open
  • Dark Skin control-sidebar-dark

Dependencies

This package includes certain libraries with it. I am working on replacing these files with an online CDN (except the ones which are specific to this theme); in the meantime, here are the libraries:

| SN | Name | Type | Version | Location | CDN | Notes | | ----- | ----- | ----- | ----- | ----- | ----- | ----- | | 01 | Bootstrap | CSS | 3.3.7 | css/bootstrap.min.css | || | 02 | Font Awesome | __CSS__ | 4.7.0 | `css/font-awesome.min.css` | || | 03 | Ionicons | CSS | 2.0.0 | css/Ionicons/css/ionicons.min.css | || | 04 | AdminLTE Styles | __CSS__ | _N/A_ | `css/AdminLTE.min.css` | | Specific to this Theme | | 05 | AdminLTE Skins | CSS | N/A| css/skins/_all-skins.min.css | | _Specific to this Theme_ | | 06 | Morris Chart | __CSS__ | _N/A_ | `css/morris.css` | | | | 07 | jvectormap | CSS | 2.0.4 | css/jquery-jvectormap.css | | | | 08 | Bootstrap Date Picker | __CSS__ | 1.7.1 | `css/bootstrap-datepicker.min.css` | || | 09 | Bootstrap Date Range Picker | CSS | 2.1.27 | css/daterangepicker.css | || | 10 | Bootstrap WYSIHTML5 (Text Editor) | __CSS__| 0.4.15 | `css/bootstrap3-wysihtml5.min.css` | | | | 11 | Google Fonts | CSS | N/A | N/A | https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic | Customizable on https://fonts.google.com/ | | --- | --- | --- | --- | --- | --- | --- | | 12 | JQuery | JS | 3.3.1 | js/jquery.min.js | || | 13 | JQuery UI | __JS__ | 1.11.4 | `js/jquery-ui.min.js` | || | 14 | Bootstrap | JS | 3.3.7 | js/bootstrap.min.js | || | 15 | Raphael JS | __JS__ | 2.2.0 | `js/raphael.min.js` | | works with Morris JS | | 16 | Morris JS | JS | 0.5.0 | js/morris.min.js | || | 17 | JQuery Sparkline | __JS__ | 2.1.3 | `js/jquery.sparkline.min.js` | || | 18 | jvectormap | JS | 1.2.2 | js/jquery-jvectormap-1.2.2.min.js | || | 19 | jvectormap (World Mill) | __JS__ || `js/jquery-jvectormap-world-mill-en.js` | | Support Library containing areas of countries | | 20 | JQuery Knob Chart | JS | 1.2.12 | js/jquery.knob.min.js | || | 21 | Moment JS | __JS__ | | `js/moment.min.js` | | | | 22 | Bootstrap Date Range Picker | JS | | js/daterangepicker.js | || | 23 | Bootstrap Date Picker | __JS__ || `js/bootstrap-datepicker.min.js` ||| | 24 | Bootstrap WYSIHTML5 (Text Editor) | JS | | js/bootstrap3-wysihtml5.all.min.js | || | 25 | Slimscroll | __JS__ | | `js/jquery.slimscroll.min.js` | | | | 26 | FastClick | JS | | js/fastclick.js | | | | 27 | AdminLTE App | __JS__ | `js/adminlte.min.js` | | | | 28 | AdminLTE Dashboard demo | JS | | js/pages/dashboard.js | N/A | | | 29 | AdminLTE demo | JS | | js/demo.js | N/A | |

Available Libraries

The links to the CSS & JS files available to use within the framework. the basic ones are already included in the JS & CSS files; however, other links are to be added if they're required:

Note: Sample pages include their required libraries, checkout the files in /adminlte/samples/

JS

• <!-- jQuery 3 --> <script src="{{ asset('js/jquery.min.js') }}"></script> (included)

• <!-- jQuery UI 1.11.4 --> <script src="{{ asset('js/jquery-ui.min.js') }}"></script>

• <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> <script>$.widget.bridge('uibutton', $.ui.button);</script>

• <!-- Bootstrap 3.3.7 --> <script src="{{ asset('js/bootstrap.min.js') }}"></script> (included)

• <!-- Morris.js charts --> <script src="{{ asset('js/raphael.min.js') }}"></script> <script src="{{ asset('js/morris.min.js') }}"></script>

• <!-- Sparkline --> <script src="{{ asset('js/jquery.sparkline.min.js') }}"></script>

• <!-- jvectormap --> <script src="{{ asset('js/jquery-jvectormap-1.2.2.min.js') }}"></script> <script src="{{ asset('js/jquery-jvectormap-world-mill-en.js') }}"></script>

• <!-- jQuery Knob Chart --> <script src="{{ asset('js/jquery.knob.min.js') }}"></script>

• <!-- daterangepicker --> <script src="{{ asset('js/moment.min.js') }}"></script> <script src="{{ asset('js/daterangepicker.js') }}"></script>

• <!-- datepicker --> <script src="{{ asset('js/bootstrap-datepicker.min.js') }}"></script>

• <!-- Bootstrap WYSIHTML5 --> <script src="{{ asset('js/bootstrap3-wysihtml5.all.min.js') }}"></script>

• <!-- Slimscroll --> <script src="{{ asset('js/jquery.slimscroll.min.js') }}"></script> (included)

• <!-- FastClick --> <script src="{{ asset('js/fastclick.js') }}"></script> (included)

• <!-- AdminLTE App --> <script src="{{ asset('js/adminlte.min.js') }}"></script> (included)

• <!-- AdminLTE dashboard demo (This is only for demo purposes) --> <script src="{{ asset('js/pages/dashboard.js') }}"></script>

• <!-- AdminLTE for demo purposes --> <script src="{{ asset('js/demo.js') }}"></script> (included)

CSS

• <!-- Bootstrap 3.3.7 --> <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}"> (included)

• <!-- Font Awesome --> <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}"> (included)

• <!-- Ionicons --> <link rel="stylesheet" href="{{ asset('css/Ionicons/css/ionicons.min.css') }}"> (included)

• <!-- Theme style --> <link rel="stylesheet" href="{{ asset('css/AdminLTE.min.css') }}"> (included)

• <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <link rel="stylesheet" href="{{ asset('css/skins/_all-skins.min.css') }}"> (included)

• <!-- Morris chart --> <link rel="stylesheet" href="{{ asset('css/morris.css') }}">

• <!-- jvectormap --> <link rel="stylesheet" href="{{ asset('css/jquery-jvectormap.css') }}">

• <!-- Date Picker --> <link rel="stylesheet" href="{{ asset('css/bootstrap-datepicker.min.css') }}">

• <!-- Daterange picker --> <link rel="stylesheet" href="{{ asset('css/daterangepicker.css') }}">

• <!-- bootstrap wysihtml5 - text editor --> <link rel="stylesheet" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}">

• <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> (included)