1. Docs
  2. Getting Started
Buy Now Contact

Getting Started

Dashboard UI Kit is a simple, powerful UI framework for building responsive dashboard user interfaces and web applications.

Folder Structure

Once you download and unzip the package, you will see this folder structure.

dashboard/
    ├── src/
    │   ├── scss/
    │   │   ├── settings/
    │   │   ├── tools/
    │   │   ├── themes/
    │   │   ├── base/
    │   │   ├── objects/
    │   │   ├── components/
    │   │   ├── vendor/
    │   │   ├── utilities/
    │   │   └── main.scss
    │   └── js/
    │   │   ├── vendor/
    │   │   └── *.js
    │   ├── img/
    │   ├── fonts/
    │   └── *.html
    │
    ├── dist/
    │   ├── css/
    │   │   ├── main.css
    │   │   └── main.min.css
    │   ├── js/
    │   │   ├── main.js
    │   │   └── main.min.js
    │   ├── img/
    │   ├── fonts/
    │   └── *.html
    │
    ├── gulpfile.js
    ├── package.json
    ├── .gitignore
    └── .sass-lint.yml

SCSS

Dashboard is SCSS based, it follows the BEMIT Methodology and is inspired by ITCSS, OOCSS.

Classes are prefixed with 3 different:

  • .o- Objects
  • .c- Components
  • .u- Utilities

ITCSS helps you to organize your project SCSS files in such way that you can better deal with (not always easy-to-deal-with) CSS specifics like global namespace, cascade and selectors specificity.

├── scss/
    ├── settings/
    ├── tools/
    ├── themes/
    ├── base/
    ├── objects/
    ├── components/
    ├── vendor/
    └── utilities/
    └── main.scss
  • Settings: Global sass variables and component-specific variables.
  • Tools: Site-wide mixins and functions.
  • Themes: Override default scss variables to apply different themes.
  • Base: Resets, unclassed (bare) elements.
  • Vendor: Third-party librairies/dependencies like Font Awesome and Bootstrap Grid.
  • Objects: Objects, abstractions, and design patterns e.g. .o-layout.
  • Components: Discrete, complete chunks of UI e.g. .c-alert.
  • Utilities: Overrides and helper classes e.g. .u-hidden.

Then, the main.scss file should look something like this:

//
// TOOLS
//
@import "tools/tools.rem";
@import "tools/tools.clearfix";
...

//
// SETTINGS 
// 

// Global Settings
@import "settings/settings.global";

// UI-Kit Settings
@import "settings/settings.buttons";
@import "settings/settings.tables";
...

//
// THEMES
//
//@import "themes/themes.dark"; // <== uncomment to use the dark theme

//
// BASE
//
@import "base/base.global";
@import "base/base.typography";


//
// VENDORS
//
@import "vendor/bootstrap-grid";
@import "vendor/fontawesome";
...

//
// OBJECTS
//
@import "objects/objects.page";
@import "objects/objects.media";


//
// COMPONENTS
//

// UI-Kit Components
@import "components/components.buttons";
@import "components/components.button-group";
...


// Dashboard/Admin-Related Components
@import "components/components.profile-card";
@import "components/components.event";
...


// UTILITIES
@import "utilities/utilities.typography";
@import "utilities/utilities.floats";
...

Javascript

Dashboard’s javascript is fairly simple and is powered by Bootstrap javascript plugins. It depends on jQuery and few external plugins to work, Take a look at js/ folder structure:

├── js/
    ├── vendor/
    ├── chart-custom.js
    ├── fullcalendar-custom.js
    ├── *.js
    └── main.js
  • vendor/: Contains external javascript/jquery plugins (copied from node_modules via GulpJS)
  • chart-custom.js: Override default options of chart.js
  • fullcalendar-custom.js: Override default options of fullcalendar.js
  • *.js: Scripts for other components like sidebar, switches, etc..
  • main.js: Contains all scripts that initialize Dashboard UI Kit components