Getting start

This is the instruction which help you works with Tinydash. This helps you understand the structure, theme customization, compiling source and building the theme.

Dev Setup

  1. Make sure you have Node installed and uses npm to manage dependencies.
    Learn more for Node installation here : nodejs.org/en/download/
  2. Unzip theme package.
  3. Open command line and change directory to tinydash/src
  4. Make sure that gulp-cli is installed or install it by using npm install gulp-cli
  5. Type npm install and 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.

  1. gulp command will combine compile and build tasks
  2. gulp compile compile scss, js
  3. gulp build a generat /dist directory with HTML and assets files
  4. gulp watch view built theme and watch if there is any adjustment with source files.

Parameters

gulp task accept several parameter, see bellow for more details

  • --theme = dark or 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.
  • --navbar this 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
  • --navcolor to 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 = true if you want to build the theme with rtl option, please set this parameter and let it equal true
  • --boxed = true Enable boxed layout for your dashboard
  • --headerbg = true enable this parameter if you want to enable header background
  • --color new 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

File Structure

  • 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
    • js - javascript files
      • custom - customized javascript file
    • 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

Gulp Nunjucks

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 @include keyword.


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-dark.scss & _variable-light.scss : this includes extended variable from bootstrap and typograpy variable which could be adjust.
    • _light.scss & _dark.scss : colors configuration for html elements
  • config.js : color and fonts which used with javascripts, if you want to customize the theme, you also need to change the configuration in config.js file too.

Change log

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

1.0 30/06/2020

Release first version