Paper Dashboard PRO

Elements description - v1.3.1

License

Currently, on Creative Tim you can get the products with two types of licenses: Personal or Developer. All the freebies are licensed to Personal License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what is the best fit for you. View the rights table and the description for each license on our Official License Page.

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.

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-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)
-----es6-promise-auto.min.js
-----fullcalendar.min.js
-----jquery.min.js
-----jquery-jvectormap.js
-----jquery-ui.min.js
-----jquery.bootstrap.wizard.min.js
-----jquery.datatables.js
-----jquery.easypiechart.min.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

Components

Buttons Live Demo

Colors

We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette:


See Full Implementation 
<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>

/* If you want to use button with white border on non-white background */
<button class="btn btn-neutral">Neutral</button>

Sizes

Buttons come in all needed sizes:

See Full Implementation 
<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:

See Full Implementation 
<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.

Social Buttons

An extra category of buttons that are necessary for any project is the social buttons. We have added classes that provide the default colour for every social network.
To use them, you have to add to your button the general class btn-social and the specific network, for example btn-twitter. All styles described above can be applied to social buttons (default, filled, simple).
We used the Themify social icons which you can find here.
Here are examples for all the social buttons:

See Full Implementation 
<button class="btn btn-icon btn-twitter">
    <i class="ti-twitter"></i>
</button>
<button class="btn btn-icon btn-facebook">
    <i class="ti-facebook"> </i>
</button>
<button class="btn btn-icon btn-google">
    <i class="ti-google"> </i>
</button>
<button class="btn btn-icon btn-linkedin">
    <i class="ti-linkedin"></i>
</button>
<button class="btn btn-icon btn-pinterest">
    <i class="ti-pinterest"></i>
</button>
<button class="btn btn-icon btn-youtube">
    <i class="ti-youtube"> </i>
</button>
<button class="btn btn-icon btn-tumblr">
    <i class="ti-tumblr"> </i>
</button>
<button class="btn btn-icon btn-github">
    <i class="ti-github"></i>
</button>
<button class="btn btn-icon btn-dribbble">
    <i class="ti-dribbble"></i>
</button>
<button class="btn btn-icon btn-reddit">
    <i class="ti-reddit"></i>
</button>
<button class="btn btn-icon btn-instagram">
    <i class="ti-instagram"></i>
</button>

Checkboxes - v1.0.0 Live Demo

See Full Implementation 
<div class="checkbox">
    <input id="checkbox1" type="checkbox">
    <label for="checkbox1">
	Unchecked
    </label>
</div>

<div class="checkbox">
    <input id="checkbox2" type="checkbox" checked="">
    <label for="checkbox2">
	Checked
    </label>
</div>

<div class="checkbox">
    <input id="checkbox3" type="checkbox" disabled="">
    <label for="checkbox3">
	 Disabled unchecked
    </label>
</div>

<div class="checkbox">
    <input id="checkbox4" type="checkbox" checked="" disabled="">
    <label for="checkbox4">
         Disabled checked
    </label>
</div>

Radio Buttons - v1.0.0 Live Demo

See Full Implementation 
<div class="radio">
    <input type="radio" name="radio1" id="radio1" value="option1">
    <label for="radio1">
         Radio is off
    </label>
</div>

<div class="radio">
    <input type="radio" name="radio1" id="radio2" value="option2" checked="">
    <label for="radio2">
         Radio is on
    </label>
</div>

<div class="radio">
    <input type="radio" name="radio3" id="radio3" value="option1" disabled="">
    <label for="radio3">
         Disabled radio is off
    </label>
</div>

<div class="radio">
    <input type="radio" name="radio4" id="radio4" value="option1" checked="" disabled="">
    <label for="radio4">
         Disabled radio is on
    </label>
</div>

Switches - v3.3.2 Live Demo

If you want to use something more special than a checkbox, we recommend the switch. You can use it as plain, with text or with icons. The default version is the one with text (on and off states).


See Full Implementation 
<input type="checkbox" class="switch" />
<input type="checkbox" class="switch" checked />
<input type="checkbox" class="switch-plain" />
<input type="checkbox" class="switch-icon" checked />

/* Javascript */
/* Here you change the color of the switch with one of our colours: danger, warning, success, info, primary */
/* These lines of code are located in assets/js/paper-dashboard.js */

$('.switch').bootstrapSwitch({
   onColor: 'primary'
]});

Inputs Live Demo

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.

See full implementation 
<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" />

    <span class="glyphicon glyphicon-remove form-control-feedback"></span>

</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>

Bootstrap SelectPickerv1.12.1 - Live Demo

There are 2 ways to use this input: as a normal select, in which case you need to specify the style as .form-control, or as a button, in which case you have to specify the style as .btn-{type}. You can also have multiple select options by using the multiple attribute on the select tag. Here are some coded examples. To see the original documentation, please check out Silvio Moreto repo on GitHub.

See full implementation 
<!-- simple select -->
<select class="selectpicker" data-style="btn btn-danger btn-block" title="Single Select" data-size="7">
     <option value="id">Bahasa Indonesia</option>
     <option value="ms">Bahasa Melayu</option>
...
</select>

<!-- multiple select -->
<select multiple title="Multiple Select" class="selectpicker" data-style="btn-info btn-fill btn-block" data-size="7">
    <option value="ARS">ARS</option>
    <option value="AUD">AUD</option>
...
</select>

<!-- Bootstrap Select Picker -->
if($(".selectpicker").length != 0){
    $(".selectpicker").selectpicker();
}

jQuery Tagsinput v0.8.0 - Live Demo

If you want to use tags, we now offer you 2 possibilities: simple tags and coloured tags, that you can use by adding the necessary colour class. For more information please check Full Github Documentation.

See full implementation 
<!-- Markup -->
<input type="text" value="Minimal, Light, New, Friends" class="tagsinput" data-role="tagsinput" data-color="success"/>

<!-- Javascript -->
$('.tagsinput').tagsinput();

Textarea Live Demo

We added custom style for the textarea, so it looks similar to all other inputs.

See full implementation 
<textarea class="form-control" placeholder="Here can be your nice text" rows="3"></textarea>