/laraadminlte

Primary LanguageHTMLMIT LicenseMIT

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)