Zendash comes with power of SCSS. The css files can be generated from scss by simply following below steps:
Gulp is a JavaScipt streaming task runner. It automate many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync ,optimizing images, etc... We are using gulp which allows to easily compilation of scss to csss. You can read it more about it here.
Please follow below steps to install and setup all prerequisites:
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, otherwise install nodejs on your computer,
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. In order to install, just run command npm install -g gulp from
your terminal.
To setup, follow below mentioned steps:
Make sure to have all above prerequisites installed & running in your computer
Open your terminal, go to your folder and enter the command npm install. This
would install all required dependencies in node_modules folder.
After you finished with above steps, you can run the command to compile scss into css:
gulp
| Command | Description |
|---|---|
gulp
|
Runs the project locally, starts the development server and watches for any changes in your code, including your html, javascript, sass, etc. The development server is accessible at http://localhost:3000. |
gulp watch
|
In this template gulp watch command is for When any changes to the source file scss folder i.e (.scss) is made, the watch will run an appropriate task.
All the CSS files under assets/css/ folder will be watched and upon changes made to these files, the styles task will be executed.
|
gulp dark
|
In this template gulp dark command is for the changes is made in dark.scss file. dark.scss will be watched and what ever changes has made in dark.scss file it automatically updated in dark.css file in css folder.
|
gulp menu
|
In this template gulp menu command is for the changes is made in sidemenu.scss file. sidemenu.scss will be watched and what ever changes has made in sidemenu.scss file it automatically updated in sidemenu.css file in css folder.
|
gulp skin
|
In this template gulp skin command is for the changes is made in skin-modes.scss file. skin-modes.scss will be watched and what ever changes has made in skin-modes.scss file it automatically updated in skin-modes.css file in css folder.
|
gulp beautify
|
In this template gulp beautify command is for it beautifys all .css files in css folder
|
| Command | Description |
|---|---|
gulp
|
Runs the project locally, starts the development server and watches for any changes in your code, including your html, javascript, sass, etc. The development server is accessible at http://localhost:3000. |
gulp rtlwatch
|
In this template gulp watch command is for When any changes to the source file scss-rtl folder i.e (.scss) is made, the watch will run an appropriate task.
All the CSS files under assets/css/ folder will be watched and upon changes made to these files, the styles task will be executed.
|
gulp rtldark
|
In this template gulp rtldark command is for the changes is made in dark.scss file. dark.scss will be watched and what ever changes has made in dark.scss file it automatically updated in dark.css file in css-rtl folder.
|
gulp rtlmenu
|
In this template gulp rtlmenu command is for the changes is made in sidemenu.scss file. sidemenu.scss will be watched and what ever changes has made in sidemenu.scss file it automatically updated in sidemenu.css filein css-rtl folder.
|
gulp rtlskin
|
In this template gulp rtlskin command is for the changes is made in skin-modes.scss file. skin-modes.scss will be watched and what ever changes has made in skin-modes.scss file it automatically updated in skin-modes.css file in css-rtl folder.
|
gulp rtlbeautify
|
In this template gulp rtlbeautify command is for it beautifys all .css files in css folder
|