Paper Kit

Components description and usage

Buttons

Colors

We worked over the original Bootstrap classes, choosing a different color pallete. We opted for this beautiful scheme of pale colors:


See Full Implementation
    
    
    
    
    
    
    
    
    
    
    
    
    
    

Sizes

Buttons come in all needed sizes:

See Full Implementation
    
    
    
    
    
    
    
    

Styles

We added extra classes that can 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 groups, toolbars, and disabled state all work like they are supposed to.

Checkboxes

To use the custom checkboxes, you need to import a separate Javascript file called 'ct-paper-checkbox.js'.

Usage can be done via Data Attributes: See example.

    
    
    
    
    
    
    
    
    

Or can be called via Javascript: See example.

    $(':checkbox').checkbox();
    

We added more classes to provide you with choices

See Full Implementation
    
    
    
    
    
    
    
    
    
    

Methods

  • .checkbox('toggle') is used to toggle the states between checked and unchecked.
  • .checkbox('check') sets the checkbox state to checked.
  • .checkbox('uncheck') sets the state to unchecked.
See coded example
    $(':checkbox').checkbox('check');
    

Events

  • .on('toggle') gets activated when the checkbox state changes between checked and unchecked.
  • .on('change') the same as toggle.
See coded example
    $(':checkbox').on('toggle', function() {
      // Do something
    });
    

Radio Buttons

To use the custom radio buttons, you need to import a separate Javascript file called 'ct-paper-radio.js'.

Usage can be done via Data Attributes: See example.

    
    
    
    
    
    
    
    

Or can be called via Javascript: See example.

    $(':radio').radio();
    

You can choose between different colors:

See Full Implementation
    
    
    
    
    
    
    
    
    
    

Methods

  • .radio('check') sets the checkbox state to checked.
  • .radio('uncheck') sets the state to unchecked.
See coded example
    $(':radio').radio('check');
    

Events

  • .on('toggle') gets activated when the checkbox state changes between checked and unchecked.
  • .on('change') the behaviour as the toggle, with the difference that the event is fired for each radio button that gets a state change.
See coded example
    $(':radio').on('toggle', function() {
      // Do something
    });
    

Inputs

We restyled the Bootstrap input to give it a different look. You can use the classic look, different colors and states or input groups.

Textarea

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

Pagination

We took the Bootstrap pagination elements and customised them to fit the overall theme.

Besides the classic look, we also added the color classes to offer more customisation.

Progress Bars

The progress bars from Bootstrap hold the same classes and functionality. You can use the standard class or you can add the class 'progress-thin' for a progress bar that has only half the height of the normal one.

60% Complete
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
See full implementation
    
60% Complete
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Sliders

We restyled jQuery UI slider, while keeping the design consistent.


See Markup and Javascript
    
    
$( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], }); $( "#slider-default" ).slider({ value: 70, orientation: "horizontal", range: "min", animate: true });

Labels

We restyled the default options for labels and we added the filled class, that can be used in any combination.

Default Primary Success Info Warning Danger
See Full Implementation
    Default
    
    Primary
    
    Success
    
    Info
    
    Warning
    
    Danger
    
    

Datepicker

The re-styled the Bootstrap datepicker and we added the Paper Kit colors, which you can give as parameter to the plugin: color = {blue,azure,green,orange,red}.

See Markup and Javascript
    
    
    
    
    
    
    
    
    $('.datepicker').datepicker({
    
             weekStart:1,
    
             color: '{color}'
    
    });
    

Tooltips

We restyled the Bootstrap tooltip.

See Markup and Javascript
    
    
    
    
    $('.btn-tooltip').tooltip();
    

Popovers

We restyled the Bootstrap popover and we added an extra effect of opening. When the popover is active, the background of the page gets darker, letting you concentrate on the information inside the popover.
See the following example:

See Markup and Javascript
    
    
    
    
    
    
    
    
    gsdk.initPopovers();
    

Notifications

The new Paper Kit notifications are looking fresh and clean. They go great with the navbar. If you want to see how we recommend using them, see on of the example pages here.