This is the instruction which help you works with Tinydash. This helps you understand the structure, theme customization, compiling source and building the theme.
- Make sure you have Node installed and uses npm to manage dependencies.
Learn more for Node installation here : nodejs.org/en/download/
- Unzip theme package.
- Open command line and change directory to
- Make sure that gulp-cli is installed or install it by using
npm install gulp-cli
npm installand enter to install all of Tinydash's dependencies
Compiling & building
Tinydash uses gulp task to compile and build the theme. By default gulp command without any parameters will compile and build Tinydash with dark theme without rtl, you pass parameters to build Tinydash as your requirements.
gulpcommand will combine compile and build tasks
gulp compilecompile scss, js
gulp builda generat /dist directory with HTML and assets files
gulp watchview built theme and watch if there is any adjustment with source files.
gulp task accept several parameter, see bellow for more details
--theme = darkor light : allow to build the theme with light or dark mode as default. If this parameter is not config, dark mode is selected as default.
--navbarthis parameter used to build the theme with difference type of menu. It accepts these value vertical1, vertical2, vertical3, condensed, horizontal1, horizontal2 and default value is vertical1
--navcolorto change menu colors, please use this parameter. There are some values could be used with this parameter : inverse (opposite color with theme color), solid ( primary color background), gradient. Ignore this parameter to make menu with theme colors.
--rtl = trueif you want to build the theme with rtl option, please set this parameter and let it equal true
--boxed = trueEnable boxed layout for your dashboard
--headerbg = trueenable this parameter if you want to enable header background
--colornew colors palette was added to compiler configuration, if you want to build with demo2 colors, please add value for this parameter is color2. Ignore this parameter to use default colors palette
- dist - Generated files for production
- docs - Theme documentation
- gulp - gulp tasks which writen in .js files
- node_modules - This is NOT includes with theme package by default. This will be appear when you installed theme's npm dependencies.
- src - Source folder.
- assets - images and others assets which used for demo theme
- css - css files which generated after compiling
- data - json files which used to generate theme demo
- fonts - fonts files which used with the theme
- scss - scss source files for the theme
- templates - structured html source files
- macros - nunjucks macro which used with html source
- pages - html source for pages
- partials - html partials, this includes header, footer...etc
- .gitignore - Unnecessary files from Git
- package.json - List of npm dependencies which used with the theme
- README.md - Text version of theme information
Tinydash use Nunjucks (https://mozilla.github.io/nunjucks/) to make modular html structure. Partial html are included to html page or layout to reused html block without editing them manytime. Nunjucks template are renamed to html to make it easier to read and customize.
You can create new .html partials inside the /partials folder and point to them from any file by specifying the path to the partial file and using the
Customizing the theme.
You do not have to touch on bootstrap source to customize the theme, just need to customize scss file, theme configuration js only.
- scss file : there are several scss file could be change to adjust the theme, they are
_colors.scss: color palate are placed in this file, just replace with your colors to make your theme.
_variable-light.scss: this includes extended variable from bootstrap and typograpy variable which could be adjust.
_dark.scss: colors configuration for html elements
Version 1.1 - 15/08/2020* Add secondary navbar
* Add new file grid
* Add contact apps
* Add new map with leatlef & remove datamaps
* Add more widgets
* Add ion-rangslider & tagify to form elements
* Add new colors
* Add navbar colors
* Fix and update apexchart widget
* Fix vertical menu structure
* Fix & update layout with new parameters
* Create new scss for plugins
* Fix other minor issues