Laravel - Appwork v1.1.0 Docs

Instructions can vary depending on whatever you use theme settings panel or not. Please select the appropriate version.

Without settings panel
With settings panel

`laravel-starter` directory structure

laravel-starter

app

bootstrap

config

database

public

resources

assets

Application javascripts

sass

Application stylesheets

vendor

Appwork's sources

fonts

Iconic fonts

fontawesome.css

ionicons.css

...

Javascripts

bootstrap.js

dropdown-hover.js

...

libs

Third-party libraries

animate-css

autosize

block-ui

...

sass

CSS sources

_appwork

Appwork includes

_custom-variables

Custom variables

_theme

Theme includes

_uikit

UIKit includes

pages

Page styles

rtl

Styles with RTL support enabled

appwork.scss

appwork-material.scss

...

lang

views

layouts

Layouts

includes

Layout partials

layout-footer.blade.php

layout-navbar.blade.php

layout-sidenav.blade.php

application.blade.php

Main layout

layout-1.blade.php

layout-1-flex.blade.php

...

routes

storage

test

package.json

webpack.mix.js

Laravel mix config

...

Third-party plugins

The starter project by default includes all third-party plugins (see webpack.mix.js file).
Optionally you can remove unwanted plugins to reduce output assets size and compile time:

Remove unwanted packages from the dependencies section in the package.json file.
Remove related directories within the resources/assets/vendor/libs directory.
Remove related @imports and @includes in the resources/assets/vendor/sass/_theme/_libs.scss file.

For example, if you want to exclude plyr plugin, you will need to:

Remove plyr dependency in the package.json file.
Remove the resources/assets/vendor/libs/plyr directory.
Remove @import "../../libs/plyr/mixins"; and @include plyr-theme($background, $color); lines in the resources/assets/vendor/sass/_theme/_libs.scss file.

Installation

Windows

Download and install Node.js 8.x from https://nodejs.org/en/.
Download and install Git from https://git-scm.com/downloads.
Download and install Yarn from https://yarnpkg.com/en/docs/install.
Logout from the system and login again.
Launch cmd.exe as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.
Download PHP from https://windows.php.net/download. Unpack the downloaded archive into C:\php. Add C:\php to your PATH, then logout from the system and login again.
Download and install Composer from https://getcomposer.org/doc/00-intro.md#installation-windows.
Logout from the system and login again.
Open cmd.exe and go to the laravel-starter directory.
Run command composer install.
Rename .env.example file to .env by running ren .env.example .env.
Run command php artisan key:generate.
Run command yarn install.
Run command npm run dev.
Now you can run the server: php artisan serve

Ubuntu

Upgrade system: sudo apt-get update && sudo apt-get upgrade.
Install curl: sudo apt-get install curl.
Install Node.js 8.x and build tools following instructions on https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions.
Install Git following instructions on https://git-scm.com/download/linux.
Install Yarn following instructions on https://yarnpkg.com/en/docs/install#debian-stable.
Open a terminal and install PHP: sudo add-apt-repository ppa:ondrej/php; sudo apt-get update; sudo apt-get install php7.2 php-pear php7.2-curl php7.2-dev php7.2-gd php7.2-mbstring php7.2-zip php7.2-mysql php7.2-xml.
Install Composer following instructions on https://getcomposer.org/download/.
Make composer available globally following instructions on https://getcomposer.org/doc/00-intro.md#globally.
Go to the laravel-starter directory.
Run command composer install.
Rename .env.example file to .env by running mv .env.example .env.
Run command php artisan key:generate.
Run command yarn install.
Run command npm run dev.
Now you can run the server: php artisan serve.

Mac OS X

Install Xcode from App Store. After installing, launch the Xcode, accept the license agreement and wait while components installed.
Install Homebrew following instructions on https://brew.sh.
Download and install Node.js 8.x from https://nodejs.org/en/.
Download and install Git from https://git-scm.com/downloads.
Install Yarn following instructions on https://yarnpkg.com/en/docs/install.
Open a terminal.
Check PHP version php -v. If PHP is not installed or PHP version is less than 7.1.3, run brew install php.
Install Composer following instructions on https://getcomposer.org/download/.
Make composer available globally following instructions on https://getcomposer.org/doc/00-intro.md#globally.
Run command composer install.
Rename .env.example file to .env by running mv .env.example .env.
Run command php artisan key:generate.
Run command yarn install.
Run command npm run dev.
Now you can run the server: php artisan serve.

Page structure

Instead of configuring the layout manually, you can use the Starter template generator. It will dramatically simplify the initial setup.

`Main layout`

resources/views/layouts/application.blade.php

<!DOCTYPE html>

<html lang="{{ app()->getLocale() }}" class="default-style">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <title>{{ isset($title) ? $title.' - ' : '' }}Laravel Starter</title>

    <!-- Main font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/fontawesome.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/ionicons.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/linearicons.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/open-iconic.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/pe-icon-7-stroke.css') }}">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/css/appwork.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/css/colors.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/css/uikit.css') }}">

    <!-- Layout helpers -->
    <script src="{{ mix('/vendor/js/layout-helpers.js') }}"></script>

    <!-- Libs -->

    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <link rel="stylesheet" href="{{ mix('/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}">

    @yield('styles')

    <!-- Application stylesheets -->
    <link rel="stylesheet" href="{{ mix('/css/application.css') }}">

</head>
<body>

    @yield('layout-content')

    <!-- Core scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="{{ mix('/vendor/libs/popper/popper.js') }}"></script>
    <script src="{{ mix('/vendor/js/bootstrap.js') }}"></script>
    <script src="{{ mix('/vendor/js/sidenav.js') }}"></script>

    <!-- Libs -->

    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <script src="{{ mix('/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>

    @yield('scripts')

    <!-- Application javascripts -->
    <script src="{{ mix('/js/application.js') }}"></script>

</body>
</html>

<!DOCTYPE html>

<html lang="{{ app()->getLocale() }}" class="default-style">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <title>{{ isset($title) ? $title.' - ' : '' }}Laravel &tarter7lt;/title>

    <!-- Main font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/fontawesome.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/ionicons.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/linearicons.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/open-iconic.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/pe-icon-7-stroke.css') }}">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap.css') }}" class="theme-settings-bootstrap-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/appwork.css') }}" class="theme-settings-appwork-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate.css') }}" class="theme-settings-theme-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/colors.css') }}" class="theme-settings-colors-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/uikit.css') }}">

    <!-- Layout helpers -->
    <script src="{{ mix('/vendor/js/layout-helpers.js') }}"></script>

    <!-- Theme settings -->
    <script src="{{ mix('/vendor/js/theme-settings.js') }}"></script>
    <script>
        // Use settings panel generator to configure the plugin
        window.themeSettings = new ThemeSettings({
            cssPath: '',
            themesPath: '',
            pathResolver: function(path) {
                var resolvedPaths = {
                    // Core stylesheets
                    //
                    @foreach (['bootstrap', 'appwork', 'colors'] as $name)
                    '{{ $name }}.css': '{{ mix("/vendor/css/{$name}.css") }}',
                    '{{ $name }}-material.css': '{{ mix("/vendor/css/{$name}-material.css") }}',
                    @endforeach

                    // UI Kit
                    'uikit.css': '{{ mix("/vendor/css/uikit.css") }}',

                    // Themes
                    //
                    @foreach (['air', 'corporate', 'cotton', 'gradient', 'paper', 'shadow', 'soft', 'sunrise', 'twitlight', 'vibrant'] as $name)
                    'theme-{{ $name }}.css': '{{ mix("/vendor/css/theme-{$name}.css") }}',
                    'theme-{{ $name }}-material.css': '{{ mix("/vendor/css/theme-{$name}-material.css") }}',
                    @endforeach
                }

                return resolvedPaths[path] || path;
            }
        });
    </script>

    <!-- Libs -->

    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <link rel="stylesheet" href="{{ mix('/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}">

    @yield('styles')

    <!-- Application stylesheets -->
    <link rel="stylesheet" href="{{ mix('/css/application.css') }}">

</head>
<body>

    @yield('layout-content')

    <!-- Core scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="{{ mix('/vendor/libs/popper/popper.js') }}"></script>
    <script src="{{ mix('/vendor/js/bootstrap.js') }}"></script>
    <script src="{{ mix('/vendor/js/sidenav.js') }}"></script>

    <!-- Libs -->

    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <script src="{{ mix('/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>

    @yield('scripts')

    <!-- Application javascripts -->
    <script src="{{ mix('/js/application.js') }}"></script>

</body>
</html>

Layouts

To display a page with the selected layout just use @extends directive in the view.

You can find navbar, sidenav and footer templates in the resources/views/layouts/includes directory.

resources/views/some_page.blade.php

@extends('layouts.layout-1')

@section('content')
    ...
@endsection

resources/views/some_page.blade.php

@extends('layouts.layout-1-flex')

@section('content')
    ...
@endsection

resources/views/some_page.blade.php

@extends('layouts.layout-2')

@section('content')
    ...
@endsection

resources/views/some_page.blade.php

@extends('layouts.layout-2-flex')

@section('content')
    ...
@endsection

resources/views/some_page.blade.php

@extends('layouts.layout-without-navbar')

@section('content')
    ...
@endsection

resources/views/some_page.blade.php

@extends('layouts.layout-without-navbar-flex')

@section('content')
    ...
@endsection

resources/views/some_page.blade.php

@extends('layouts.layout-without-sidenav')

@section('content')
    ...
@endsection

resources/views/some_page.blade.php

@extends('layouts.layout-horizontal-sidenav')

@section('content')
    ...
@endsection

resources/views/some_page.blade.php

@extends('layouts.layout-blank')

@section('content')
    ...
@endsection

Appwork's stylesheets

To use settings panel, you need to add Appwork's stylesheets to the Laravel Mix config (use the generator to see the example):

webpack.mix.js

...

// Core stylesheets
mix.sass('resources/assets/vendor/sass/bootstrap.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/bootstrap-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/appwork.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/appwork-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/colors.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/colors-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/uikit.scss', 'public/vendor/css', sassOptions);

// Themes
mix.sass('resources/assets/vendor/sass/theme-air.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/theme-air-material.scss', 'public/vendor/css', sassOptions)
   ...

...

Theming

To enable a theme you need to:

Add theme file to the Laravel Mix config.

webpack.mix.js

...

// Core stylesheets
mix...
   .sass('resources/assets/vendor/sass/theme-air.scss', 'public/vendor/css', sassOptions)
   ...

...

Include theme stylesheet.

resources/views/layouts/application.blade.php

<link rel="stylesheet" href="{{ mix('/vendor/css/theme-air.css') }}">

To enable a theme just include the required theme stylesheet.

resources/views/layouts/application.blade.php

<link rel="stylesheet" href="{{ mix('/vendor/css/theme-air.css') }}" class="theme-settings-theme-css">

Material styling

To enable material styling you need to:

Set material-style class on the <html> element instead of default-style.

resources/views/layouts/application.blade.php

<html class="material-style">

Add -material suffix to bootstrap.css, appwork.css, theme-*.css and colors.css paths in the webpack.mix.js.

webpack.mix.js

...

// Core stylesheets
mix.sass('resources/assets/vendor/sass/bootstrap-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/appwork-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/theme-corporate-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/colors-material.scss', 'public/vendor/css', sassOptions)
   ...

...

Add -material suffix to bootstrap.css, appwork.css, theme-*.css and colors.css stylesheets.

resources/views/layouts/application.blade.php

<link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap-material.css') }}">
<link rel="stylesheet" href="{{ mix('/vendor/css/appwork-material.css') }}">
<link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate-material.css') }}">
<link rel="stylesheet" href="{{ mix('/vendor/css/colors-material.css') }}">

<link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap-material.css') }}" class="theme-settings-bootstrap-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/appwork-material.css') }}" class="theme-settings-appwork-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate-material.css') }}" class="theme-settings-theme-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/colors-material.css') }}" class="theme-settings-colors-css">

Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section and call attachMaterialRippleOnLoad() function.

resources/views/layouts/application.blade.php

<script src="{{ mix('/vendor/js/material-ripple.js') }}"></script>
<script>
  window.attachMaterialRippleOnLoad();
</script>

Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section.

resources/views/layouts/application.blade.php

<script src="{{ mix('/vendor/js/material-ripple.js') }}"></script>

To enable RTL direction support, open webpack.mix.js file and edit paths to load Appwork's stylesheets from the resources/assets/vendor/sass/rtl/ directory instead of resources/assets/vendor/sass/.

webpack.mix.js

...

// Core stylesheets
mix.sass('resources/assets/vendor/sass/rtl/bootstrap.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/appwork.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/theme-corporate.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/colors.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/uikit.scss', 'public/vendor/css', sassOptions);

...

...

// Core stylesheets
mix.sass('resources/assets/vendor/sass/rtl/bootstrap.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/bootstrap-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/appwork.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/appwork-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/colors.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/colors-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/uikit.scss', 'public/vendor/css', sassOptions);

// Themes
mix.sass('resources/assets/vendor/sass/rtl/theme-air.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/theme-air-material.scss', 'public/vendor/css', sassOptions)
   ...

...

To enable RTL direction, add dir="rtl" attribute to the <html> element.

resources/views/layouts/application.blade.php

<html dir="rtl">

Layout options

You can configure the initial layout by setting control classes to the <html> element.

After the initial layout setup the recommended way to control layout options is layout helpers, because the helpers do some extra work, such as: setting container paddings (when navbar is fixed), performing layout animations, setting correct sidenav state classes depending on screen size etc.

resources/views/layouts/application.blade.php

<html class="layout-fixed layout-collapsed">

Control class	Description
`.layout-reversed`	Reverse layout direction without markup change.
`.layout-expanded`	Expand layout sidenav on small screens (< 992px).
`.layout-collapsed`	Collapse layout sidenav on large screens (>= 992px).
`.layout-offcanvas`	Make layout sidenav offcanvas.
`.layout-fixed`	Set layout position to fixed.
`.layout-fixed-offcanvas`	Set layout position to fixed with offcanvas sidenav.
`.layout-navbar-fixed`	Set layout navbar position to fixed.
`.layout-footer-fixed`	Set layout footer position to fixed.

PACE.js progress

Optionally you can enable PACE.js progress bar:

Append pace.js script to the <head> section.

resources/views/layouts/application.blade.php

<script src="{{ mix('/vendor/js/pace.js') }}"></script>

Append .page-loader element to the <body>.

resources/views/layouts/application.blade.php

<div class="page-loader"><div class="bg-primary"></div></div>

Generator

Use starter template generator to simplify the initial setup. Just replace a content of appropriate files with the generated code within the laravel-starter directory.

Open in new tab

Available tasks

See Laravel Mix documentation.

Docs v1.1.0 / Laravel HTML5 Angular Vue.js Laravel + Vue.js Rails ASP.NET Core 2 ASP.NET MVC OTHER Settings panel Layout helpers

OTHER

Windows

Ubuntu

Mac OS X

Page structure

Docs v1.1.0 / Laravel HTML5 Angular Vue.js Laravel + Vue.js Rails ASP.NET Core 2 ASP.NET MVC

OTHER
Settings panel Layout helpers