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:

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)