Gulp (i.e. Optional)
Gulp is not mandatory
You may skip this section if you don't want Gulp in your project. Please use quickstart/
directory in your project.
You can use Gulp for Automate and enhance your project workflow.
Don't know about Gulp?
Gulp is a toolkit for automating painful or time-consuming tasks in your project development workflow, so you can stop messing around and build something easier than ever.
- Auto Minify/Uglify CSS, HTML, JS codes
- Auto Compile SaSS file
- 3000+ Plugins
Gulp for Ablepro v8.0
Use Gulp in Ablepro v8.0 is for build different layouts and theme customization with lots of useful tasks like Image Optimization, SaSS compile
etc...which really useful to build the production ready dist/
directory.
How to setup Gulp for Ablepro v8.0?
Gulp Commands(task)
Default task
Gulp Command | Description |
---|---|
gulp |
which build template in /dist directory |
Basic task
Gulp Command | Description |
---|---|
gulp sass |
which compile .scss files from /src/assets/scss directory and place it into a /dist/assets/css directory |
gulp imgmin |
which use to optimize images from /src/assets/images directory and place it into a /dist/assets/images directory |
gulp build |
which use to copy files from /src/assets directory and place it into a /dist/assets directory |
gulp build-html |
which use compile your html file from /src/html directory and place it into a /dist directory |
gulp build-js |
which use to build .js files from /src/assets/js directory and place it into a /dist/assets/js directory |
gulp watch |
It will automatically start your build process if you make any changes in html,scss,js file from /src directory and put new changes to /dist
directory |
gulp watch-minify |
It will automatically start your build process if you make any changes in html,scss,js file from /src directory and put new changes to /dist
directory with minify assets |
Minify task
Gulp Command | Description |
---|---|
mincss |
which minify all css in /dist/assets/css directory |
uglify |
which minify all javascript in /dist/assets/js directory |
htmlmin |
which minify all html in /dist directory |
Gulp structure
Elite-able/
├── src/
│ ├── assets/
│ ├── html/
│ ├── doc/
├── .babelrc
├── gulpfile.js
├── package.json
├── package-lock.json
Content
Change header ( topbar ) content
to change header content just open src/html/layouts/main.html
and change the file as you want.
Change navbar ( menu ) list
to change header content just open src/html/layouts/menu-list.html
and change the file as you want.
Tons of layout using gulp
Pre-build layout( build ) using gulp
Take care when add class
be careful while adding a class in header, menu & body using prebuild layouts
the class will be separated by the space(" ") so you don't need to add commas(",") or dash("-") to separated two class
Steps to use pre-build layouts
- Open
/gulpfile.js
file at root directory of theme package. - Find the code
const layout = {
in/gulpfile.js
file. - Replace the whole
const layout = {
block with respected given code which you can find given below for different layout. - For other supported customization option you need to refer the respected layout pages in the theme package.
Variable description
Variable | Description |
---|---|
layouts |
This variable store value of layout types eg. vertical ,horizontal |
sublayouts |
This variable store prebuild layout typesHorizontaleg.v2
|
darktheme |
This variable store true / false value for making dark theme |
rtltheme |
This variable store true / false value for making RTL theme
If you are using Horizontal layout with RTL theme then you need to add
|
bodyclass |
This variable store value which add in body classBox layouteg.container , box-layout add both class
|
menuclass |
This variable store value which add in right navbar class eg. menupos-fixed . . .
|
headerclass |
This variable store value which add in right header class eg. headerpos-fixed . . .
|
Gulp Layout customizer
Set vertical
value in layouts
variable
//=============================================================
// this is default layout of theme which already setup
//=============================================================
const layout = {
'layouts': 'vertical',
'sublayouts': '',
'darktheme': 'false',
'rtltheme': 'false',
'bodyclass': '',
'menuclass': 'menupos-fixed menu-light ',
'headerclass': 'headerpos-fixed header-blue',
}
Set horizontal
value in layouts
variable
remove menupos-fixed
from menuclass
variable
remove headerpos-fixed
from headerclass
variable
const layout = {
'layouts': 'horizontal',
'sublayouts': '',
'darktheme': 'false',
'rtltheme': 'false',
'bodyclass': '',
'menuclass': 'menu-light ',
'headerclass': 'header-blue',
}
Set container box-layout
value in bodyclass
variable
* Make sure that you have set vertical
value in layouts
variable
const layout = {
'layouts': 'vertical',
'sublayouts': '',
'darktheme': 'false',
'rtltheme': 'false',
'bodyclass': 'container box-layout',
'menuclass': 'menupos-fixed menu-light navbar-collapsed',
'headerclass': 'headerpos-fixed header-blue',
}
Set true
value in rtltheme
variable
ass dir="rtl"
attribute in <html>
in page
<html dir="rtl">
const layout = {
'layouts': 'vertical',
'sublayouts': '',
'darktheme': 'false',
'rtltheme': 'true',
'bodyclass': '',
'menuclass': 'menupos-fixed menu-light',
'headerclass': 'headerpos-fixed',
}
remove menu-light
value in menuclass
variable
const layout = {
'layouts': 'vertical',
'sublayouts': '',
'darktheme': 'false',
'rtltheme': 'false',
'bodyclass': '',
'menuclass': 'menupos-fixed ',
'headerclass': 'headerpos-fixed header-blue',
}
Set true
value in darktheme
variable
const layout = {
'layouts': 'vertical',
'sublayouts': '',
'darktheme': 'true',
'rtltheme': 'false',
'bodyclass': '',
'menuclass': 'menupos-fixed ',
'headerclass': 'headerpos-fixed header-blue',
}
Set true
value in rtltheme
variable
ass dir="rtl"
attribute in <html>
in page
<html dir="rtl">
const layout = {
'layouts': 'horizontal',
'sublayouts': '',
'darktheme': 'false',
'rtltheme': 'true',
'bodyclass': '',
'menuclass': 'menu-light',
'headerclass': 'header-blue',
}
Background color
Set background-blue
value in bodyclass
variable
Set background-red
value in bodyclass
variable
Set background-purple
value in bodyclass
variable
Set background-info
value in bodyclass
variable
Set background-green
value in bodyclass
variable
Background gradient
Set background-grd-blue
value in bodyclass
variable
Set background-grd-red
value in bodyclass
variable
Set background-grd-purple
value in bodyclass
variable
Set background-grd-info
value in bodyclass
variable
Set background-grd-green
value in bodyclass
variable
Background image
Set background-img-1
value in bodyclass
variable
Set background-img-2
value in bodyclass
variable
Set background-img-3
value in bodyclass
variable
Set background-img-4
value in bodyclass
variable
Set background-img-5
value in bodyclass
variable