Short Description and Usage
Paper Dashboard PRO is a beautiful resource built over Bootstrap to allow you to create powerful and beautiful dashboards. We have redesigned all the usual components in Bootstrap to make it look flat, minimalist and easy to use.
Using the dashboard is very simple, but it does require you to understand basic JavaScript functions. To get the desired effect you will need to integrate JS plugins that take a little bit more effort. Down below we list all the files you need to include inside the application to get going. In the elements page, you can how each element if called and used.
Getting Started
The Paper Dashboard is built on top of Bootstrap 3, so you can safely use it on your existing or new Bootstrap project. No line of code from Bootstrap 3 was changed, so you don't have to worry about undesired effects in your work.
We provide all the necessary CSS resources. So, to immediately change or get started with our design, include the "css/paper-dashboard.css" in your HTML template. Your project will get the new look.
To jump start your project, you can use our start-up template where all the files are already included and ready to use. If you do however, want to start from scratch, you can see the file structure below. The core JavaScript is contained in "js/paper-dashboard.js". Some functions are called from "js/demo.js" because they are presented only for demo purpose, you can check there how they are working and duplicate their effect on your projct. For the other files, you should add them if you use the specific element inside your page.
File Structure
Once you have downloaded the archive and opened it, you will find the following structure:
Let's take it one by one:
paper_dashboard_pro
--assets
---css
-----bootstrap.min.css
-----demo.css
-----paper-dashboard.css
-----themify-icons.css
---img
---fonts
---js
-----bootstrap-checkbox-radio-switch-tags.js
-----bootstrap-datetimepicker.js
-----bootstrap-notify.js
-----bootstrap-selectpicker.js
-----bootstrap-table.js
-----bootstrap.min.js
-----chartist.min.js
-----demo.js (the demo functions for Paper Dashboard Pro)
-----fullcalendar.min.js
-----jquery-jvectormap.js
-----jquery-ui.min.js
-----jquery.bootstrap.wizard.min.js
-----jquery.datatables.js
-----jquery.easypiechart.min.js
-----jquery.min.js
-----jquery.tagsinput.js
-----jquery.validate.min.js
-----moment.min.js
-----paper-dashboard.js (the main functions for Paper Dashboard Pro)
-----sweetalert2.js
----sass
--documentation
--examples
----calendar.html
----charts.html
----components
----dashboard
----forms
----maps
----pages
----tables
----start-template.html
Restyled Components
Here is the list of Bootstrap 3 components that we restyled for the Paper Dashboard:
- Buttons
- Collapse
- Dropdown
- Images
- Inputs
- Menu
- Navigation Menu
- Notifications
- Pagination
- Progress Bars
- Select
- Tables
- Textarea
- Tooltips
- Typography
New Components
Besides giving the existing Bootstrap elements a new look, we added new ones, so that the interface and consistent and homogenous. We also imported more plugins to use depending on your needs.
Going through them, we added:
- Charts
- Checkboxes
- Footers
- Google Maps
- jVector Maps
- jQuery Validations
- Bootstrap Tables
- DataTables.net
- DateTimePicker
- Maps
- Panels
- Radio Buttons
- Sliders
- Sweet Alert
- Switches
- Sidebar
- Tags
- Wizard
For more details regarding the components, go to our elements page.