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.
  • --layout = vertical or horizontal : build the theme with vertical or horizontal menu
  • --rtl = true if you want to build the theme with rtl option, please set this parameter and let it equal true
  • --headerbg = true enable this parameter if you want to enable header background

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
  • Aenean sit amet erat nunc
  • 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
    • _variable-dark.scss & _variable-light.scss : this includes color 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.