banner

Laravel Larateme Template

A full featured admin panel for your laravel applications.

Introduction
Installation
Overriding Laravel Authentication Views
Configuration
Blade Templates (Layout, Component and Partial Views)
[Optional] Overriding the default views
Bootstrap Components

1. Introduction

This package depend on other packages under the hood, these packages are:

2. Installation

You can install larateme using composer cli by running:

composer require developeroncall/larateme

Then run the following command to adding the template assets to your project.

php artisan larateme:install

4. Configuration

After install two configuration files will be published config/larateme.php and config/breadcrumbs.php.

<?php

// config/larateme.php

return [
    'appearance' => [
        'version' => '1.004',
        'dashboard' => 1,
        /*
         * Supported values skin1/skin2/skin3/skin4/skin5/skin6
         * To apply blue color - skin1
         * To apply orange color - skin2
         * To apply cyan color - skin3
         * To apply purple color - skin4
         * To apply black color - skin5
         * To apply gray color - skin6
         *
         */
        'skin' => 'skin1',

        'customizer' => false, // Work in Progress
        /*
         * The direction of the dashboard.
         */
        'dir' => 'ltr',
        /*
         * The header items that will be rendered.
         */
        'header' => [
            'right' => [
                'larateme::partials.header.block_search',
                'larateme::partials.header.languages',
                'larateme::partials.header.block_user_profile',

            ],
            'left' => [
                'larateme::partials.header.notifications',
                'larateme::partials.header.messages',
            ],
        ],
        /*
         * The sidebar items that will be rendered.
         */
        'sidebar' => [
            'items' => [
                'larateme::partials.sidebar.user-panel',
                'larateme::partials.sidebar.items',
            ],
        ],
        /*
         * Site Overall Layout
         * Supported values are
         * 'boxed','dark','horizontal','horizontal-fullwidth','iconbar',
         * 'light-sidebar','ltr','mini-sidebar','overlay','rtl',
         */
        'layout' => 'light-sidebar',

    ],
    'urls' => [
        /*
        |--------------------------------------------------------------------------
        | URLs
        |--------------------------------------------------------------------------
        |
        | Register here the dashboard main urls, base, logout, login, etc...
        | The options that can be nullable is register and password_request meaning that it can be disabled.
        |
        */
        'base' => '/',
        'logout' => 'logout',
        'login' => 'login',
        'register' => 'register',
        'password_request' => 'password/reset',
        'password_email' => 'password/email',
        'password_reset' => 'password/reset',
        'search' => '/search',
    ],

    'images' => [
        /*
        |--------------------------------------------------------------------------
        | IMAGEs
        |--------------------------------------------------------------------------
        |
        | Change the basic images within the template by setting their urls below
        |
        |
        */
        'logo-icon' => '/assets/images/logo-icon.png',
        'logo-light-icon' => '/assets/images/logo-light-icon.png',
        'logo' => '/assets/images/logo.png',
        'logo-dark' => '/assets/images/logo-dark.png',
        'logo-light' => '/assets/images/logo-lite.png',
        'logo-text' => '/assets/images/logo-text.png',
        'logo-light-text' => '/assets/images/logo-lite-text.png',
        'login-background' => '/assets/images/big/auth-bg.jpg',

    ],

    'sources' => [
        /*
        |--------------------------------------------------------------------------
        | Data Sources - WORK IN PROGRESS
        |--------------------------------------------------------------------------
        |
        | This is very much a work in progress and should not be used yet
        |
        */
        'message_list'  => [
            'klass' => 'MessageController',
            'method' => 'messageList',
        ],
        'user_list'  => [
            'klass' => 'User',
            'method' => 'userList',
        ],
    ]

You can take a look at Laravel Breadcrumbs Documentation for the configuration details about config/breadscrumbs.php file.

5. Blade Templates (Layout, Component and Partial Views)

This package include a layout and components that wraps the most of larateme elements.

1. Main Layout

This is the main Think of the main layout as a container for including your content within larateme header and sidebar. The following is an example of using the larateme::layout.main:

@extends('larateme::layout')

@section('content')
   {-- Content--} 
@endsection

Note: the content will be wrapped automatically within <div class="main-wrapper"></div>.

2. Page Component

The page component is a container for your content that contain <section class="content-header"></section> for holding title and breadcrumbs and <section class="content"></section> for holding the page content. Example:

@component('larateme::page', ['title' => 'Home', 'sub_title' => 'Main page...', 'breadcrumb' => 'BREADCRUMB_NAME'])
   The page content... 
@endcomponent

Notes:

The options sub_title and breadcrumb are optional.

The page component is responsible for displaying the flash messages.

The BREADCRUMB_NAME is the name of your defined breadcrumb in routes/breadcrumbs.php file.

Example with sending data to breadcrmbs:

@component('larateme::page', ['title' => 'Home', 'breadcrumb' => ['home', $user]])
 The page content...
@endcomponent

3. Card Component

The card component is a wrapper bootstrap card. Example code:

@component('larateme::card')
    You're logged in!
@endcomponent

A more advanced example:

@component('larateme::card', ['title' => 'Card component', 'card_text' => 'Hello World])
    @slot('tools')
        <button class="btn btn-warning">Button</button>
    @endslot
    <p>
        Box component contents...
    </p>
    @slot('footer')
        <p>Box footer</p>
    @endslot
@endcomponent

Note: the supported styles are default, primary, info, warning, success and danger.

4. Table Box Component

The table box component can be used to put a table directly within an larateme box component. Example usage:

@component('larateme::table-box', ['collection' => $users])
    <tr>
        <th>Name</th>
        <th>Email</th>
    </tr>
    @foreach ($users as $user)
        <tr>
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
        </tr>
    @endforeach
@endcomponent

Note:

The component will automatically render the pagination links.

You don't need to handle empty collection by yourself, the view will display a helpful message if the collection is empty.

5. Info Box

The info box component is a wrapper for bootstrap info box Example usage:

@include('larateme::info-box', [
    'icon_color' => 'blue',
    'icon' => 'thumbs-up',
    'text' => 'likes',
    'number' => '2000',
])

Or:

@include('larateme::info-box', [
    'style' => 'red',
    'icon' => 'heart',
    'text' => 'loves',
    'number' => '500000',
    'progress' => 70,
    'progress_description' => '70% of the people loved your project!',
])

6. [Optional] Overriding the default views

You are free to modify the package views, If you wish you can run the following command:

php artisan vendor:publish --tag=larateme-views

Now, you can edit the views in resources/views/vendor/larateme.

Note: If you publish the package views it will not automatically use any future updates and bug fixes.

I will be creating components for custom elements and will update this package as time permits

7. Bootstrap 4 Components - rendered within blade templates

I have added the Bootstap4 HTML Builder to make generating standard Bootstrap components simple.

This is a standard Jumbotron element

@component('bs::jumbotron')
    @slot('heading')
        Hello, world!
    @endslot
    @slot('subheading')
        This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
        content or information.
    @endslot

    <hr class="my-3">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>

    @slot('actions')
        {!! bs()->a('#', 'Learn more')->asButton('primary') !!}
    @endslot
@endcomponent

For details on using this package please visit documentation

developeroncall/larateme

A Bootstrap 4 Laravel Boilerplate on steroids