Paper Kit Components by Creative Tim

Buttons
Checkbox/Radio
Dropdown
Inputs
Textarea
Navigation
Footers
Pagination
Progress Bars
Sliders
Labels
Datepicker
Modals
Tooltips/Popovers
Notification

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

Unchecked Checked Disabled unchecked Disabled checked

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

Blue Azure Green Orange Red

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

Radio is off Radio is on Disabled radio is off Disabled radio is on

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:

Blue Azure Green Orange Red

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>

Navbar

We restyled the classic Bootstrap Navbar:

See full implementation

    <div id="navbar">
    
        <nav class="navbar navbar-default" role="navigation">
    
          <div class="container-fluid">
    
            <div class="navbar-header">
    
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    
                <span class="sr-only">Toggle navigation</span>
    
                <span class="icon-bar"></span>
    
                <span class="icon-bar"></span>
    
                <span class="icon-bar"></span>
    
              </button>
    
              <a class="navbar-brand" href="#">Brand</a>
    
            </div>
    
    
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    
              <ul class="nav navbar-nav">
    
                <li><a href="#">Work in progress...</a></li>
    
                <li class="active"><a href="#">Link</a></li>
    
                <li><a href="#">Link</a></li>
    
                <li class="dropdown">
    
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    
                  <ul class="dropdown-menu">
    
                    <li><a href="#">Action</a></li>
    
                    <li><a href="#">Another action</a></li>
    
                    <li><a href="#">Something else here</a></li>
    
                    <li class="divider"></li>
    
                    <li><a href="#">Separated link</a></li>
    
                    <li class="divider"></li>
    
                    <li><a href="#">One more separated link</a></li>
    
                  </ul>
    
                </li>
    
              </ul>
    
            </div><!-- /.navbar-collapse -->
    
          </div><!-- /.container-fluid -->
    
        </nav>
    
    </div><!--  end navbar -->

Besides the default navbar, we added 5 new classes for colors: primary, info, success, warning, danger. If you want to use one of them, you have to replace the 'navbar-default' with the class for the chosen color 'navbar-ct-#class'.

Besides all this customisation, we have an extra navbar. 'Navbar-transparent' is a special class that you can to use if you want the navbar to be transparent. We recommend that the part of your page that has the transparent navbar contains something non-cluttered, like an image.

Nav Tabs

We changed the look for the nav tabs, so they can easily integrate with the rest of the kit.

Here is information about home.

Here is your profile.

Here are your messages.

See full implementation

<div class="nav-tabs-navigation">
    <div class="nav-tabs-wrapper">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
    </ul>
    </div>
</div>
<div id="my-tab-content" class="tab-content text-center">
    <div class="tab-pane active" id="home">
        <p>Here is information about home.</p>
    </div>
    <div class="tab-pane" id="profile">
        <p>Here is your profile.</p>
    </div>
    <div class="tab-pane" id="messages">
        <p>Here are your messages.</p>
    </div>
</div>

Nav Pills

We changed the design for the Bootstrap nav pills into something a bit more fresh. We also added more color classes for customisation.

See full implementation

    <ul class="nav nav-pills nav-pills-blue">
    
        <!--  color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-warning", "nav-pills-danger", "nav-pills-success" -->
    
          <li class="active"><a href="#">Home</a></li>
    
          <li><a href="#"> Profile</a></li>
    
          <li><a href="#">Messages</a></li>
    
    </ul>

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

    <ul class="pagination"> 
    
      <li><a href="#">&laquo;</a></li>
    
      <li><a href="#">1</a></li>
    
      <li><a href="#">2</a></li>
    
      <li class="active"><a href="#">3</a></li>
    
      <li><a href="#">4</a></li>
    
      <li><a href="#">5</a></li>
    
      <li><a href="#">&raquo;</a></li>
    
    </ul>

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.

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}'
    
    });

Modals

We restyled the classic Twitter Bootstrap and gave it a more simple look. TO have the footer splitted into 2 parts, please you the 'left-side' and 'right-side' classes. You can see and an example below.

See Full Implementation

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. 
      </div>
      <div class="modal-footer">
        <div class="left-side">
            <button type="button" class="btn btn-default btn-simple" data-dismiss="modal">Never mind</button>
        </div>
        <div class="divider"></div>
        <div class="right-side">
            <button type="button" class="btn btn-danger btn-simple">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>

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.

Paper Kit

Components description and usage

Buttons

Colors

Sizes

Styles

Checkboxes

Methods

Events

Radio Buttons

Methods

Events

Dropdown

Inputs

Textarea

Navbar

Nav Tabs

Nav Pills

Pagination

Progress Bars

Sliders

Labels

Datepicker

Modals

Tooltips

Popovers

Notifications