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

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

laravel-starter directory structure

laravel-starter
app
bootstrap
config
database
public
resources
assets
js
Application javascripts
sass
Application stylesheets
vendor
Appwork's sources
fonts
Iconic fonts
fontawesome.css
ionicons.css
...
js
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:

  1. Remove unwanted packages from the dependencies section in the package.json file.
  2. Remove related directories within the resources/assets/vendor/libs directory.
  3. 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:

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

Installation

Windows
  1. Download and install Node.js 8.x from https://nodejs.org/en/.
  2. Download and install Git from https://git-scm.com/downloads.
  3. Download and install Yarn from https://yarnpkg.com/en/docs/install.
  4. Logout from the system and login again.
  5. Launch cmd.exe as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.
  6. 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.
  7. Download and install Composer from https://getcomposer.org/doc/00-intro.md#installation-windows.
  8. Logout from the system and login again.
  9. Open cmd.exe and go to the laravel-starter directory.
  10. Run command composer install.
  11. Rename .env.example file to .env by running ren .env.example .env.
  12. Run command php artisan key:generate.
  13. Run command yarn install.
  14. Run command npm run dev.
  15. Now you can run the server: php artisan serve
Ubuntu
  1. Upgrade system: sudo apt-get update && sudo apt-get upgrade.
  2. Install curl: sudo apt-get install curl.
  3. Install Node.js 8.x and build tools following instructions on https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions.
  4. Install Git following instructions on https://git-scm.com/download/linux.
  5. Install Yarn following instructions on https://yarnpkg.com/en/docs/install#debian-stable.
  6. 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.
  7. Install Composer following instructions on https://getcomposer.org/download/.
  8. Make composer available globally following instructions on https://getcomposer.org/doc/00-intro.md#globally.
  9. Go to the laravel-starter directory.
  10. Run command composer install.
  11. Rename .env.example file to .env by running mv .env.example .env.
  12. Run command php artisan key:generate.
  13. Run command yarn install.
  14. Run command npm run dev.
  15. Now you can run the server: php artisan serve.
Mac OS X
  1. Install Xcode from App Store. After installing, launch the Xcode, accept the license agreement and wait while components installed.
  2. Install Homebrew following instructions on https://brew.sh.
  3. Download and install Node.js 8.x from https://nodejs.org/en/.
  4. Download and install Git from https://git-scm.com/downloads.
  5. Install Yarn following instructions on https://yarnpkg.com/en/docs/install.
  6. Open a terminal.
  7. Check PHP version php -v. If PHP is not installed or PHP version is less than 7.1.3, run brew install php.
  8. Install Composer following instructions on https://getcomposer.org/download/.
  9. Make composer available globally following instructions on https://getcomposer.org/doc/00-intro.md#globally.
  10. Run command composer install.
  11. Rename .env.example file to .env by running mv .env.example .env.
  12. Run command php artisan key:generate.
  13. Run command yarn install.
  14. Run command npm run dev.
  15. 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:

  1. 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)
       ...
    
    ...
  2. 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:

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

    resources/views/layouts/application.blade.php
    <html class="material-style">
  2. 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)
       ...
    
    ...
  3. 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">
  4. 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>
  5. 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>

RTL support

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:

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

    resources/views/layouts/application.blade.php
    <script src="{{ mix('/vendor/js/pace.js') }}"></script>
  2. 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.

Available tasks