Short Description and Usage
- -
- Paper Dashboard 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.
-
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/ - ├── assets/ - | ├── css/ - | | ├── animate.min.css - | | ├── bootstrap.min.css - | | ├── demo.css - │ | ├── paper-dashboard.css - │ | └── themify-icons.css - | ├── js/ - | | ├── bootstrap-checkbox-radio.js - | | ├── bootstrap-notify.js - | | ├── bootstrap.min.js - │ | ├── chartist.min.js - │ | ├── demo.js - │ | ├── jquery-1.10.2.js - │ | └── paper-dashboard.js - | ├── fonts/ - | ├── sass/ - | └── img/ - | - ├── dashboard.html - ├── documentation/ - | ├── css - | └── documentation.html - ├── icons.html - ├── maps.html - ├── notifications.html - ├── table.html - ├── template.html - ├── typography.html - ├── upgrade.html - └── user.html - --
Restyled Components
- -- Here is the list of Bootstrap 3 components that we restyled for the Paper Dashboard: -
-
-
- Buttons -
- Dropdown -
- Images -
- Inputs -
- Navigation Menu -
- Notifications -
- Tables -
- Textarea -
- 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 -
- Google Maps -
- Panels -
Buttons
- -Colors
-- We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette: -
-- - - - - - - - -
--
-<button class="btn btn-default">Default</button> - -<button class="btn btn-primary">Primary</button> - -<button class="btn btn-info">Info</button> - -<button class="btn btn-success">Success</button> - -<button class="btn btn-warning">Warning</button> - -<button class="btn btn-danger">Danger</button> - --
Sizes
-- Buttons come in all needed sizes: -
-- - - - -
--<button class="btn btn-primary btn-lg">Large</button> - -<button class="btn btn-primary">Normal</button> - -<button class="btn btn-primary btn-sm">Small</button> - -<button class="btn btn-primary btn-xs">Extra Small</button> --
Styles
-- We added extra classes that help you better customise the look. You can use regular buttons, filled buttons or plain link buttons. Let's see some examples: -
-- - - -
- --<button class="btn btn-primary">Default</button> - -<button class="btn btn-primary btn-fill">Filled</button> - -<button class="btn btn-primary btn-simple">Simple</button> -- -
- Button groups, toolbars, and disabled states all work like they are supposed to. -
- -Dropdown
- -
- We are very proud to present the dropdown, we added a subtle animation for this classic widget.
- Here is an example and the code:
-
- <div class="dropdown"> - <a href="#" class="btn dropdown-toggle" data-toggle="dropdown"> - Regular - <b class="caret"></b> - </a> - <ul class="dropdown-menu"> - <li><a href="#paper">Action</a></li> - <li><a href="#paper">Another action</a></li> - <li><a href="#paper">Something else here</a></li> - <li class="divider"></li> - <li><a href="#paper">Separated link</a></li> - <li class="divider"></li> - <li><a href="#paper">One more separated link</a></li> - </ul> - </div> -- -
Inputs
- - -- We restyled the Bootstrap input to give it a flat, minimal look. You can use the classic look, different colours and states or input groups. -
--<div class="form-group"> - - <input type="text" value="" placeholder="Input" class="form-control" /> - -</div> - - - -<div class="form-group has-success"> - - <input type="text" value="Success" class="form-control" /> - -</div> - - - -<div class="form-group has-error has-feedback"> - - <input type="text" value="Error" class="form-control" /> - -</div> - - - -<div class="input-group"> - - <input type="text" value="Group Addon" class="form-control"> - - <span class="input-group-addon"><i class="fa fa-group"></i></span> - -</div> -- -
Textarea
- -We added custom style for the textarea, so it looks similar to all other inputs.
- - - --<textarea class="form-control" placeholder="Here can be your nice text" rows="3"></textarea> --