laravel-starter
directory structure
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:
dependencies
section in the package.json
file.resources/assets/vendor/libs
directory.@import
s and @include
s in the resources/assets/vendor/sass/_theme/_libs.scss
file.For example, if you want to exclude plyr
plugin, you will need to:
plyr
dependency in the package.json
file.resources/assets/vendor/libs/plyr
directory.@import "../../libs/plyr/mixins";
and @include plyr-theme($background, $color);
lines in the resources/assets/vendor/sass/_theme/_libs.scss
file.
cmd.exe
as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools
.C:\php
. Add C:\php
to your PATH
, then logout from the system and login again.cmd.exe
and go to the laravel-starter
directory.composer install
..env.example
file to .env
by running ren .env.example .env
.php artisan key:generate
.yarn install
.npm run dev
.php artisan serve
sudo apt-get update && sudo apt-get upgrade
.sudo apt-get install curl
.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
.laravel-starter
directory.composer install
..env.example
file to .env
by running mv .env.example .env
.php artisan key:generate
.yarn install
.npm run dev
.php artisan serve
.php -v
. If PHP is not installed or PHP version is less than 7.1.3, run brew install php
.composer install
..env.example
file to .env
by running mv .env.example .env
.php artisan key:generate
.yarn install
.npm run dev
.php artisan serve
.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>
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-blank')
@section('content')
...
@endsection
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)
...
...
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">
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">
You can configure the initial layout by setting control classes to the <html>
element.
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. |
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>
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.