Laravel Version
Shreyu - Laravel version is based on Laravel v6. It uses the laravel mix for asset management and compilation. All the elements, widgets, pages, etc are covered with inbuilt working authentication, registration, etc.
What's included
Extract the zip file you received after purchase and you would find the exact below files and folders:
-
shreyu/laravel ---
├──
app- ├──
Console - ├──
Exception - ├──
Http - ├──
Providers
- ├──
- ├──
bootstrap - ├──
config - ├──
database -
├──
public-
├──
assets- compiled assets files- ├──
css - ├──
fonts - ├──
images - ├──
js - ├──
libs
- ├──
- ├──
index.html
-
├──
-
├──
resources - source assets files- ├──
scss - ├──
fonts - ├──
images - ├──
js - ├──
views - all the pages
- ├──
- ├──
routes - ├──
storage - ├──
package.json - ├──
webpack.mix.js - ├──
composer.json
-
├──
Pre-requisites
We are using Laravel v6. Please follow below steps to install and setup all pre-requisites:
-
Laravel
The Laravel framework has a few system requirements. All of these requirements are satisfied by the Laravel Homestead virtual machine. However, if you are not using Homestead, you will need to make sure your server meets the following requirements:
- PHP >= 7.2.0
- BCMath PHP Extension
- Ctype PHP Extension
- JSON PHP Extension
- Mbstring PHP Extension
- OpenSSL PHP Extension
- PDO PHP Extension
- Tokenizer PHP Extension
- XML PHP Extension
- Composor
Make sure to have the Composor installed & running in your computer. If you already have installed Composor on your computer, you can skip this step.
- Nodejs
Make sure to have the Node.js installed & running in your computer. If you already have installed nodejs on your computer, you can skip this step.
- Git
Make sure to have the Git installed & running in your computer. If you already have installed git on your computer, you can skip this step
-
Gulp
Make sure to have the Gulp installed & running in your computer. If you already have installed gulp on your computer, you can skip this step.
Getting Started
Once you have all pre-requisites installed and running, you are ready to get start with the template. First, go to the root folder (the folder created when you extract the zip) where the package.json is available and run the following command:
composor install
This will download all required laravel and project related dependencies defined in composor.json file.
npm install
This will download all required dependencies defined in package.json
file. Once it finished running the command, it will generate a
folder name
node_modules where you'll be able to see downloaded
packages.
Now you're good to go in running the template and view it in browser by running the command below:
npm run dev
or npm run watch
This would compile all the required assets and make them ready to use
inside public/assets folder.
php artisan serve
This command will start a development server at http://localhost:8000
You can also create a production ready build of assets by running the command below:
npm run prod
Customization
You can easily customize various elements including navbar, topbar,
form elements etc by simply editing Sass files available in
/resources/scss directory. You can also remove unneeded
components from app.scss file.
How to change colors?
In order to change colors (including primary, secondary, success, info, danger, warning, etc.), do the following:
- A file
resources/scss/_variables.scssis containing the overridden colors and other configurations of bootstrap. You can change any values here and it would get reflected in any bootstrap based components or elements.
How to change footer?
In order to add, change or remove any ui elements from
footer or
sidebar, simply edit in file
resources/views/layouts/shared/footer.html. The
change would
be reflected in all files automatically.
Layout and Sidebar
You can change or customize the overall layout or left side navigation easily. There are examples available for horizontal nav, dark theme, RTL, condensed side nav, fixed width (boxed), etc. You can check them under layouts menu option. Additionally, you can also modify the left side nav, topbar, etc.
How to change left side nav width?
In order to change the width of left side navigation bar, open a
file
resources/scss/_variables.scss and change the value
of
variable
$leftbar-width. The default value is set to
240px.
How to change background or menu text color?
In order to change the background color, open a file
resources/scss/_variables.scss and change the value
of
variable
$bg-leftbar-light the default light value is set to
#ffffff, $bg-leftbar-dark the default
dark
value is set to
#323742.
When you change the background color, you might want to change
the
color of menu accordingly. To change
the color of menu item, change the variable
$menu-item
(Default is set to #4B4B5A).
Similarly, change the value of variables
$menu-item-hover and
$menu-item-active.
You can change other styles by making modifications in
resources/scss/custom/structure/_left-menu.scss.