If you are a developer or a website owner that needs to work within a dashboard and want to have a pretty sight while doing so, Paper Dashboard 2 is for you. Paper Dashboard is a Bootstrap Admin Panel which combines soft colours with beautiful typography and spacious cards and graphics. It is a powerful tool, but it is light and easy to use. It has enough features to allow you to get the job done, but it is not crowded to the point where you can't find the files for a specific plugin.
We like consistency and design that blends into its purpose. Paper Dashboard is a perfect example of our most thoughtful work. It combines over a dozen components and plugins, while looking like everything fits together. For an easy start or inspiration for you project, we have also create a set of example pages, like the user settings or usage graphics.
Paper Dashboard is built using the same design language as [Paper Kit(https://www.creative-tim.com/product/paper-kit-2). You can easily use them together, or pick between them depending on the project you have.
Bootstrap 4 Support Paper Dashboard 2 is built on top of the much awaited Bootstrap 4. This makes starting a new project very simple. It also provides benefits if you are already working on a Bootstrap 4 project; you can just import the Paper Dashboard style over it. Most of the elements have been redesigned; but if you are using an element we have not touched, it will fall back to the Bootstrap default.
Example Pages We wanted to fully display the power of this dashboard, so the kit comes packed with examples showing you how to use the components. Inside the product you will find:
Tutorial In order for you to easily be able to use the Paper Dashboard 2, we have created a tutorial page in our documentation. It shows the structure for the files inside the archive and how to import them. It then features every components with a description and example how to use it. You can see the details here.
Within the download you'll find the following directories and files:
Paper Dashboard 2 . ├── CHANGELOG.md ├── README.md ├── assets │ ├── css/ │ ├── demo/ │ ├── fonts/ │ ├── img/ │ ├── js │ │ ├── core/ │ │ ├── paper-dashboard.js │ │ ├── paper-dashboard.js.map │ │ ├── paper-dashboard.min.js │ │ └── plugins │ │ ├── bootstrap-notify.js │ │ ├── chartjs.min.js │ │ └── perfect-scrollbar.jquery.min.js │ └── scss/ │ ├── paper-dashboard/ │ │ ├── cards/ │ │ ├── mixins/ │ │ └── plugins/ │ └── paper-dashboard.scss ├── docs/ │ └── documentation.html ├── examples/ │ ├── dashboard.html │ ├── icons.html │ ├── map.html │ ├── notifications.html │ ├── tables.html │ ├── typography.html │ ├── upgrade.html │ └── user.html ├── gulpfile.js ├── nucleo-icons.html └── package.json
- Download the project’s zip
- Make sure you have node.js (https://nodejs.org/en/) installed
npm installin terminal/console in the source folder where
- You will find all the branding colors inside
assets/scss/core/variables/_brand.scss. You can change them with a HEX value or with other predefined variables from
- Run in terminal
gulp compile-scssfor a single compilation or gulp watch for continous compilation of the changes that you make in
*.scssfiles. This command should be run in the same folder where
- Run in terminal
gulp open-appfor opening the Presentation Page (default) of the product. You can set in
gulpfile.jsfrom your downloaded archive any page you want to open in browser,
at line 30: gulp.src('./examples/dashboard.html')
More products from Creative Tim: http://www.creative-tim.com/bootstrap-themes
Affiliate Program (earn money): http://www.creative-tim.com/affiliates/new