Treva - Bootstrap Documentation

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 Treva

Use Gulp in Treva 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 Treva?

Make sure that you have already install Nodejs and Gulp in your server/computer
Open "Nodejs Command prompt" and redirect to your project root directory.
Enter the command npm install in command prompt.
After that you need to run below gulp tasks to build production ready dist/ directory.

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


    Treva/
    ├── src/
    │   ├── assets/
    │   ├── html/
    ├── .babelrc
    ├── gulpfile.js
    ├── package.json
    ├── package-lock.json

Content

Change header ( topbar ) content

to change header content just open src/html/layouts/main-dashboard.html and change the file as you want.

Change navbar ( menu ) list

to change header content just open src/html/layouts/menu-list-dashboard.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`
`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` . . .

Set vertical value in layouts variable


    //=============================================================
    //    this is default layout of theme which already setup
    //=============================================================
    const layout = {
        'layouts': 'vertical',
        'sublayouts': '',
        'bodyclass': '',
        'menuclass': 'menu-light menupos-fixed',
        'headerclass': 'headerpos-fixed',
    }

Set horizontal value in layouts variable

remove menupos-fixed from menuclass variable

remove headerpos-fixed from headerclass variable


    const layout = {
        'layouts': 'horizontal',
        'sublayouts': '',
        'bodyclass': '',
        'menuclass': 'menu-light',
        'headerclass': '',
    }

Header background


    const layout = {
        'headerclass':'', // do nothing, its default layout
        ....
    }

add header-blue value in headerclass property to set Blue Header


    const layout = {
        'headerclass':'header-blue'
        ....
    }

add header-red value in headerclass property to set Red Header


    const layout = {
        'headerclass':'header-red'
        ....
    }

add header-purple value in headerclass property to set Purple Header


    const layout = {
        'headerclass':'header-purple'
        ....
    }

add header-info value in headerclass property to set info Header


    const layout = {
        'headerclass':'header-info'
        ....
    }

add header-dark value in headerclass property to set Dark Header


    const layout = {
        'headerclass':'header-dark'
        ....
    }

Menu brand background


    const layout = {
        'headerclass':'' // do nothing, its default layout
        ....
    }

add brand-blue value in headerclass property to set blue brand background


    const layout = {
        'headerclass':'brand-blue'
        ....
    }

add brand-red value in headerclass property to set red brand background


    const layout = {
        'headerclass':'brand-red'
        ....
    }

add brand-purple value in headerclass property to set Purple brand background


    const layout = {
        'headerclass':'brand-purple'
        ....
    }

add brand-info value in headerclass property to set info brand background


    const layout = {
        'headerclass':'brand-info'
        ....
    }

add brand-dark value in headerclass property to set dark brand background


    const layout = {
        'headerclass':'brand-dark'
        ....
    }

Menu background

add navbar-blue class in <nav> to set Blue navigation


    const layout = {
        'menuclass': 'navbar-blue',
        ....
    }

add navbar-red class in <nav> to set Red navigation


    const layout = {
        'menuclass': 'navbar-red',
        ....
    }

add navbar-purple class in <nav> to set Purple navigation


    const layout = {
        'menuclass': 'navbar-purple',
        ....
    }

add navbar-info class in <nav> to set info navigation


    const layout = {
        'menuclass': 'navbar-info',
        ....
    }

add navbar-Dark class in <nav> to set Dark navigation


    const layout = {
        'menuclass': 'navbar-Dark',
        ....
    }

Gulp Documentation