Getting Started

Laraspace is an Admin starter template for Laravel 5.7 PHP Framework which includes all the necessary boilerplate for your next web application.

Installation:
  1. Unzip the downloaded folder.
  2. Install NPM globally if you haven't installed that already , for more information please refer this link
  3. After installing NPM globally , run npm install inside your webroot , it will download all the required dependencies.
  4. You are ready to launch!

Vuejs Workflow

Laraspace supports VueJS but if you don't wish to include VueJS in your project then its perfectly fine because its optional. If you haven't heard about VueJS then you learn more about it here

We have used Webpack to bundle up the VueJs files using Laravel Mix. You can check out webpack.mix.js for underlying code.

All Laraspace VueJS files are located in assets/vue folder.

Directory & File Structure for VueJS
  • components : Vue Components
  • pages : This directory contains all the files which are supposed to be bundled up for specific pages which require VueJS
Compiling Assets

Laraspace uses Laravel mix for compiling all the plugins & dashboard's assets. Below is a list of commands you can use :

npm run dev :
Compile assets without watch
npm run watch :
Compile assets and watch the files for changes
npm run production :
Compile assets for production with code minification & set the NODE_ENV to production

You can read more about Laravel Mix here.

Sass Workflow

All Laraspace Sass files are located in sass folder.
Tip: You can remove the components which you're not gonna use inside your project to reduce the filesize.

Directory & File Structure for SASS
  • layouts : styles for Laraspace layout
  • pages : specific page styles
  • components : styles for components like buttons , cards & tabs
  • partials : styles for layout partials , i.e header , footer & sidebar
  • laraspace.scss : main entry point of all sass files.
  • variables.scss : main config file
  • base.scss : base styles for Laraspace
  • demo.scss : styles for demo , you can remove the reference to this file.

Plugins Custom JS/CSS Files

All the plugins are stored in assets/plugins. You can include any required plugin in your frontend or admin as they are stored on a location which can be accessed easily by both.

To add a plugin into backend you can do the following:

  1. Create a directory in assets/plugins with your plugin name
  2. Add the js files into webpack.mix.js
  3. Add the .scss file to sass/laraspace.scss.
    Note : CSS files cannot be imported in sass files. Thus If the plugin does not contain a sass file then you can just paste the styles into your custom .scss file.
  4. run npm run webpack command to merge the added JS files and compile the SASS files.

Skins

Laraspace now ships with 6 different Skins :

To change the skin of your application just add the class "skin-{skin-name}" to the <body> tag inside html file.

For example : <body class="skin-tyrell">