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

    <label class="checkbox" for="checkbox1">
    
        <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox">
    
        Unchecked
    
    </label>
    
    <label class="checkbox" for="checkbox2">
    
        <input type="checkbox" value="" id="checkbox2" data-toggle="checkbox" checked>
    
        Checked
    
    </label>
    
    <label class="checkbox" for="checkbox3">
    
        <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" disabled>
    
        Disabled unchecked
    
    </label>
    
    <label class="checkbox" for="checkbox4">
    
        <input type="checkbox" value="" id="checkbox4" data-toggle="checkbox" disabled checked>
    
        Disabled checked
    
    </label>
    
    

Or can be called via Javascript: See example.

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

We added more classes to provide you with choices

See Full Implementation
    <label class="checkbox checkbox-blue" for="checkbox1">
    
        <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox" checked>
    
        Blue
    
    </label>
    
    <label class="checkbox checkbox-azure" for="checkbox2">
    
        <input type="checkbox" value="" id="checkbox2" data-toggle="checkbox" checked>
    
        Azure
    
    </label>
    
    <label class="checkbox checkbox-green" for="checkbox3">
    
        <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" checked>
    
        Green
    
    </label>
    
    <label class="checkbox checkbox-orange" for="checkbox4">
    
        <input type="checkbox" value="" id="checkbox4" data-toggle="checkbox" checked>
    
        Orange
    
    </label>
    
    <label class="checkbox checkbox-red" for="checkbox5">
    
        <input type="checkbox" value="" id="checkbox5" data-toggle="checkbox" checked>
    
        Red
    
    </label>
    

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.

    <label class="radio">
    
        <input type="radio" name="optionsRadios" data-toggle="radio" id="optionsRadios1" value="option1">
    
        <i></i>Radio is off
    
    </label>
    
    <label class="radio">   
    
        <input type="radio" name="optionsRadios" data-toggle="radio" id="optionsRadios2" value="option1" checked>
    
        <i></i>Radio is on
    
    </label>
    
    <label class="radio">
    
        <input type="radio" name="optionsRadiosDisabled" data-toggle="radio" id="optionsRadios3" value="option2" disabled>
    
        <i></i>Disabled radio is off
    
    </label>
    
    <label class="radio">
    
        <input type="radio" name="optionsRadiosDisabled" data-toggle="radio" id="optionsRadios4" value="option2" checked disabled>
    
        <i></i>Disabled radio is on
    
    </label>
    

Or can be called via Javascript: See example.

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

You can choose between different colors:

See Full Implementation
    <label class="radio radio-blue">
    
        <input type="radio" name="optionsRadios1" data-toggle="radio" id="optionsRadios1" value="option1" checked>
    
        <i></i>Blue
    
    </label>
    
    <label class="radio radio-azure">
    
        <input type="radio" name="optionsRadios2" data-toggle="radio" id="optionsRadios2" value="option1" checked>
    
        <i></i>Azure
    
    </label>
    
    <label class="radio radio-green">
    
        <input type="radio" name="optionsRadios3" data-toggle="radio" id="optionsRadios3" value="option1" checked>
    
        <i></i>Green
    
    </label>
    
    <label class="radio radio-orange">
    
        <input type="radio" name="optionsRadios4" data-toggle="radio" id="optionsRadios4" value="option1" checked>
    
        <i></i>Orange
    
    </label>
    
    <label class="radio radio-red">
    
        <input type="radio" name="optionsRadios5" data-toggle="radio" id="optionsRadios5" value="option1" checked>
    
        <i></i>Red
    
    </label>
    

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.

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>
    

Textarea

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>
    

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.

See full implementation

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
    <div class="progress">
    
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
    
        <span class="sr-only">60% Complete</span>
    
      </div>
    
    </div>
    
    <div class="progress">
    
      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    
        <span class="sr-only">60% Complete</span>
    
      </div>
    
    </div>
    
    <div class="progress">
    
      <div class="progress-bar progress-bar-success" style="width: 35%">
    
        <span class="sr-only">35% Complete (success)</span>
    
      </div>
    
      <div class="progress-bar progress-bar-warning" style="width: 20%">
    
        <span class="sr-only">20% Complete (warning)</span>
    
      </div>
    
      <div class="progress-bar progress-bar-danger" style="width: 10%">
    
        <span class="sr-only">10% Complete (danger)</span>
    
      </div>
    
    </div>
    

Sliders

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


See Markup and Javascript
    <!-- Markup -->
    <div id="slider-default" class="slider-info"></div>
    
    <div id="slider-range" class="slider-success"></div>
    
    <!-- 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
    <span class="label label-default">Default</span>
    
    <span class="label label-primary">Primary</span>
    
    <span class="label label-success">Success</span>
    
    <span class="label label-info">Info</span>
    
    <span class="label label-warning">Warning</span>
    
    <span class="label label-danger">Danger</span>
    
    

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
    <!-- markup -->
    
    <input class="datepicker form-control" type="text"/>
    
    
    
    <!-- javascript -->
    
    $('.datepicker').datepicker({
    
             weekStart:1,
    
             color: '{color}'
    
    });
    

Tooltips

We restyled the Bootstrap tooltip.

See Markup and Javascript
    <!-- Markup -->
    <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top" data-trigger="manual">Button with Tooltip</button>
    
    <!-- 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
    <!-- markup -->
    
    <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Here will be some very useful information about his popover.">On top</button>
    
    
    
    <!-- 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.