Getting Started
This guide will help you get started with eBazar! All the important stuff – compiling the source, file structure, build tools, file includes – is documented here, but should you have any questions, always feel free to reach out to pixelwibes@gmail.com
If you really like our work, design, performance and support then please don't forgot to rate us on Themeforest,
it really motivate us to provide something better.
Please Note :
- All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.
- This is Admin panel design integrated with Laravel, ready to develop template. It does not include any Business logic to produce database records.
Installation Setup Laravel
This template is built in Laravel-8 and requires PHP 7.3+, Node 14.x and NPM 6.9.0 to be installed
To get started, you need to do the following:
- Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js
- Project Setup: After Installing Node and NPM, run 'npm install' command to install npm related dependencies
- Composer: Laravel project dependencies are managed through the
PHP Composer tool
. The first step is to install the depencencies by navigating into your project in terminal and typing this command: composer install - Note: However, any SASS code you write must be able compile via change reflected use this command: npm run dev
File Structure
-
app - The app directory holds the base code for your Laravel application.
- Console
- Domains
- Exceptions
- Helpers / Global
-
Http
-
Controllers
- Backend
- Frontend
- Controller.php
- LocaleController.php
- Livewire
- Middleware
- Requests
- Kernel
-
Controllers
- Models
- Providers
- Rules
- Services
- bootstrap- The bootstrap directory contains all the bootstrapping scripts used for your application.
- config- The config directory holds all your project configuration files (.config).
- database- The database directory holds your database files.
- public- The public directory helps to start your Laravel project and maintains other necessary files such as JavaScript, CSS, and images of your project.
-
resources- The resources directory holds all the Sass files, language (localization) files, templates (if any).
- js
- lang
- sass
- views
- routes- The routes directory contain all your definition files for routing, such as console.php, api.php, channels.php, etc.
- storage- The storage directory holds your session files, cache, compiled templates as well as miscellaneous files generated by the framework.
- test- The test directory holds all your test cases.
- node_modules - NPM dependencies (by default the folder is not included)
npm
installs dependencies. - _ide_helper.php -package Generation is done based on the files in your project
- composer.json - The PHP Composer can be defined as a dependency manager or dependency management tool specifically built for PHP
- composer.lock - It basically states that your project is locked to those specific versions
- package.json - List of dependencies and npm information
- phpunit.xml - Convenient helper methods allow to expressively test your applications
- server.php - Head to your cli and start the server
- webpack.mix.js - Mix makes it a cinch to compile and minify your application's
Create Layouts help class
Default Sidebar Layout Setting
<div class="sidebar"></div>
Toggle class in sidebar .sidebar
Mini Sidebar Layout Setting
<div class="sidebar sidebar-mini"></div>
Toggle class in sidebar .sidebar-mini
Font Setting
<body class="font-Plex">
.font-poppins
, .font-opensans
, .font-montserrat
, .font-Plex
RTL Mode
<body class="rtl_mode">
Toggle class in Body tage .rtl_mode
Sidebar Gradient
<div class="sidebar gradient"></div>
Toggle class in sidebar .gradient
Light/Dark & High Contrast
<html class="no-js " lang="en" data-theme="dark">
Change class in HTML tage .light
, .dark
, & .high-contrast
Theme Color Settings
<div class="theme-blue">
.theme-tradewind
,
.theme-monalisa
,
.theme-cyan
,
.theme-indigo
,
.theme-blue
,
.theme-green
,
.theme-orange
,
.theme-blush
,
.theme-red
,
.theme-dynamic
Setting info
Template Color Settings
There are 9 Color option template available here. just simple select your favorite color options.also sidebar gradient colorsidebar gradient color option available. just simple gradient swich on.
Dyanamic color setting
You can set your own primary colors and secondary colors also set chart color options available.just simply set your own color. click in the color box to open the color picker and choose your color
Google Font setting
There are 4 google font options. just simply select the fonts option
Light/Dark & Contrast Layout
Light: By Default Light Color Layout Template Selected
Dark: Enable Dark Mode Swich On.
High Contrast: Enable High Contrast Mode Swich On.
RTL: Enable RTL Mode Swich On.
High Contrast Themefor better accessibility
eBazar has a pre-built High contrast theme for improving accessibility.
If you follow the standard of eBazar, the High contrast theme will be applied to all eBazar elements, regardless of whether they are charts or labels.
Comman Utilities With Custom Class
Text Color
Class | Results |
---|---|
.text-primary |
Lorem ipsum dolor sit amet consectecur. |
.text-secondary |
Lorem ipsum dolor sit amet consectecur. |
.text-success |
Lorem ipsum dolor sit amet consectecur. |
.text-info |
Lorem ipsum dolor sit amet consectecur. |
.text-warning |
Lorem ipsum dolor sit amet consectecur. |
.text-danger |
Lorem ipsum dolor sit amet consectecur. |
.text-dark |
Lorem ipsum dolor sit amet consectecur. |
.color-lightyellow |
Lorem ipsum dolor sit amet consectecur. |
.color-lightblue |
Lorem ipsum dolor sit amet consectecur. |
.color-light-success |
Lorem ipsum dolor sit amet consectecur. |
.color-light-orange |
Lorem ipsum dolor sit amet consectecur. |
.color-careys-pink |
Lorem ipsum dolor sit amet consectecur. |
Background Color
Class | Results |
---|---|
.bg-primary |
|
.bg-secondary |
|
.bg-success |
|
.bg-info |
|
.bg-warning |
|
.bg-danger |
|
.bg-dark |
|
.bg-white |
|
.bg-lightyellow |
|
.bg-lightblue |
|
.bg-careys-pink |
|
.light-success-bg |
|
.light-orange-bg |
Layouts Components
Comman Components Easy to customize by developer
Button
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-xxl">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu border-0 shadow" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Card
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Advantages
- Very easy access to any starters components and core settings from anywhere in the template.
- Intuitive clear architecture.
- Avoiding the probabilities of conflicts between Front codes and third party plugins (libraries).
- Creation of wrapper components simply solves complicated initializations structures for the users.
- Everything is structured, each component in its own file and in its component in the main object.
- The ability of extending functionality without affecting the behavior of the core object and not changing the existing functionality.
eBazar Template Credit
Google font | https://fonts.google.com/ |
Bootstrap | https://v5.getbootstrap.com/ |
Jquery | https://jquery.com/ |
SASS | https://sass-lang.com/ |
Grunt | https://gruntjs.com/ |
NPM | https://www.npmjs.com/ |
Fontawesome | https://fontawesome.com/v4.7.0/ |
Icon Font | https://icofont.com/icons |
Apex Charts | https://apexcharts.com/ |
Sparkline Charts | https://omnipotent.net/jquery.sparkline/#s-about |
Fullcalendar | https://fullcalendar.io/ |
Pexels | https://www.pexels.com/ |
THANK YOU!
pixelwibes.com
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. If you really like our work, design, performance and support then please don't forgot to rate us on Themeforest, it really motivate us to provide something better.