Welcome to Dashbrd

This guide will walk you through getting set up and using the key features of the theme, including how to compile the source, understand the file structure, and work with the build tools. If you run into any questions along the way, don’t hesitate to reach out to us!

New and enhanced components

Dashbrd takes Bootstrap to the next level by extending its components and introducing new ones, as well as additional plugins. For a complete overview of what's available, take a look at the components on the components.html page.

Development setup

Here’s how to get started:

1. Ensure Node.js is installed on your machine. Dashbrd relies on npm for managing dependencies, and you can install Node easily from the Node.js Downloads page.
2. Extract the theme files, then open your command line, making sure it points to the root folder of the extracted theme.
3. Run npm install from the command line at the theme’s root to download all the dependencies needed for Dashbrd.

That's it! If you’re not familiar with the terminal, don’t worry – this is about as complex as it gets. To stop the server later, simply press Control + C.

Compiling the theme

Dashbrd uses Webpack and npm-scripts to handle development. You’ll be working from the root directory of the theme to run the following commands:

• npm start: This compiles and watches the SCSS, JavaScript, and HTML files. It also sets up a live reload server, so your browser updates immediately when you save any changes. A new browser tab will automatically open.
• npm run build: This generates the production files and places them in the /dist folder.

File structure

Here’s a breakdown of the file structure in Dashbrd:

• 📁 dist: Production-ready files.
• 📁 node_modules: Directory for npm dependencies.
• 📁 src: The source files for the theme.
  • favicon: Favicon files.
  • html: HTML source files.
  • img: Image assets.
  • js: JavaScript source files.
  • partials: HTML partial files.
  • scss: Theme SCSS files.
• Other key files include:
  • .browserslistrc: Specifies target browsers and Node.js versions for tools.
  • .gitignore: Keeps unnecessary files out of Git.
  • LICENSE.md: Theme license.
  • package-lock.json: Describes the exact dependency tree used.
  • package.json: List of npm dependencies.
  • README.md: Theme overview.
  • webpack.config.js: Webpack configuration.

Handlebars Webpack Plugin

Dashbrd simplifies the use of partials during development with the handlebars-webpack-plugin. It’s mainly used for a few components that appear on multiple pages. To add new partials, simply create them inside the /partials directory and reference them with {{> }} in any file.

For further details, refer to the official package documentation.

Emails

The Email templates section allows you to manage and customize email designs for your application. You have two options for editing email templates:

1. Direct HTML editing – Modify the HTML source code of the available email templates directly within the project. This gives you full control over the markup and styling.
2. Dashbrd Email Templates workflow – For an easier editing experience, use the Dashbrd Email Templates workflow. Available as a separate GitHub repository under the MIT license, this workflow provides tools to edit, preview, and build new email templates efficiently. It streamlines the process, ensuring a smoother development experience.