Drunken Parrot UI Kit - Bootstrap Framework Theme

We have restyled all the core bootstrap button classes.

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>

and have introduced a new class called .btn-stroke.

<button class="btn btn-stroke">Stoke</button>

We have also added the classes .btn-orange and .btn-purple to the color various for you to use.

<button class="btn btn-purple">Purple</button>
<button class="btn btn-orange">Orange</button>

All the buttons have disabled variations.

<button class="btn btn-default" disabled="disabled">Default</button>
<button class="btn btn-primary" disabled="disabled">Primary</button>
<button class="btn btn-danger" disabled="disabled">Danger</button>
<button class="btn btn-warning" disabled="disabled">Warning</button>
<button class="btn btn-info" disabled="disabled">Info</button>
<button class="btn btn-success" disabled="disabled">Success</button>

You can also create a 3D button variant of any of the buttons by adding the class .btn-embossed.

<button class="btn btn-primary btn-embossed">3D Button</button>
<button class="btn btn-success btn-embossed">3D Button</button>

Finally, we have introduced one new size called Kraken, to use this size simply add .btn-kr to any button.

<button class="btn btn-primary btn-kr">Kraken</button>

We have restyled the bootstrap inputs, below is an example of a standard text input.

<input type="text" class="form-control" placeholder="Web designer, etc.">

You can add a required marker by adding the class .input-required to the form group element and an empty span element following the input field.

<div class="form-group input-required">
   <input type="text" class="form-control" required placeholder="The Walrus, The Ranger, etc.">
   <span></span>
</div>

Icons can be added to the start of inputs by adding the .input-icon class to the parent element and including the icon you want before the input field.

<div class="form-group input-icon">
   <span class="fa fa-user"></span>
   <input type="text" class="form-control" placeholder="Username">
</div>

and the error state use the same classes as well.

<div class="form-group has-warning">
   <input type="text" class="form-control" value="Warning">
</div>

<div class="form-group has-error">
   <input type="text" class="form-control" value="Error">
</div>

<div class="form-group has-success">
   <input type="text" class="form-control" value="Success">
</div>

The pagination uses the same classes as bootstrap

←
1
2
3
4
5
→

<ul class="pagination">
  <li><a href="#">←</a></li>
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li class="disabled"><a href="#">5</a></li>
  <li><a href="#">→</a></li>
</ul>

You can you the classes .pagination-sm or .pagination-lg to control the sizes

←
1
2
3
4
5
→

←
1
2
3
4
5
→

<ul class="pagination pagination-sm">
  <li><a href="#">←</a></li>
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li class="disabled"><a href="#">5</a></li>
  <li><a href="#">→</a></li>
</ul>

<ul class="pagination pagination-lg">
  <li><a href="#">←</a></li>
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li class="disabled"><a href="#">5</a></li>
  <li><a href="#">→</a></li>
</ul>

Breadcrumbs can be made minimal by adding the class .breadcrumbs-minimal

<ol class="breadcrumb breadcrumbs-minimal">
  <li><a href="#">Home</a></li>
  <li><a href="#">Electronics Hover</a></li>
  <li><a href="#">Cameras</a></li>
  <li><a href="#">Digital Cameras</a></li>
</ol>

The default tabs use the same classes as the tabs in bootstrap

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

and if you want to double the border you can add the class .nav-stroke

<ul class="nav nav-tabs nav-stroke">
  ...
</ul>

and the restyled pills navigation

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
</ul>

You can change the icon used to close the alerts if you want but changing the class on the button element but most of the time you will want to use .fa-times and dont forget to add .alert-dismissable to the parent div.

Primary! There's never a man looked me between the eyes and seen a good day a'terward.

<div class="alert alert-primary alert-dismissable">
  <button type="button" class="close fa fa-times"></button>
  ...
</div>

All the color variations are available via the same classes as bootstrap

Primary

Info

Success

Warning

Error

<div class="alert alert-primary">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-success">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-error">...</div>

We have introduced a hover state to the bootstrap thumbnails, you can control the icon by changing the icon class on the a tag, by default we use .fa-eye which should be suitable for many cases.

<a href="#" class="thumbnail fa fa-eye">
  <img src="images/thumbnail.jpg" >
</a>

Custom content thumbnails follow the same patterns as bootstraps thumbnails however you can add .thumbnail-caption to the container div to round the corners of the thumbnail image.

15 men on a dead chest

Fifteen men on the dead man’s chest – Yo-ho-ho and a bottle of rum! Drink and the devil had done for the rest – Yo-ho-ho and a bottle of rum!

Arr! Avast

<div class="thumbnail thumbnail-caption">
  <img src="images/thumbnail-large.jpg">
  <div class="caption">
    <h4>...</h4>
    <p>...</p>
    <p>
      <a href="#" class="btn btn-primary">Arr!</a>
      <a href="#" class="btn btn-stroke">Avast</a>
    </p>
  </div>
</div>

Our restyled panels all follow the same classes as there bootstrap counterparts, so panels are easily intergrated into your projects.

Basic panel

Panel heading without title

Panel content

Panel title

Panel content

Panel footer

<!-- Basic -->
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel
  </div>
</div>

<!-- With Headings -->
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<!-- With Footer -->
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

All the contextual options are also available by adding any of the contextual state classes.

Panel Primary

This be yer content in here!

Panel Info

This be yer content in here!

Panel Success

This be yer content in here!

Panel Warning

This be yer content in here!

Panel Danger

This be yer content in here!

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Our version of the panels with tables, again these follow the same classes as the bootstrap version.

Shiver me timbers!

My name is Captain Kidd, as I sailed, as I sailed. Oh my name is Captain Kidd as I sailed. My name is Captain Kidd and God's laws I did forbid, and most wickedly I did as I sailed.

#	Ship Name	Captain	Status
1	Walrus	James Flint	Unknown
2	Royal Fortune	Black Bart	Destroyed
3	Ranger	Charles Vane	Captured

<!-- Panel with Table -->
<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Our checkboxes require javascript to work correctly. First off make sure you have included jQuery in your code and the checkbox.js plugin.

No one be fillin’ my box!

To get a checkbox up and running is nice and simple, wrap the input in a label with the class .checkbox and add the attribute data-toggle="checkbox" to the checkbox input. Thats it.

<label class="checkbox>
  <input type="checkbox" value="" data-toggle="checkbox" />
  Oy! Me box is filled!
</label>

Adding in the standard attributes of checked="" and disabled="" will work as expected.

Oy! Me box is filled! Aaand I’m disabled. Got picked, but I’m disabled.

<label class="checkbox">
  <input type="checkbox" value="" data-toggle="checkbox" checked=""/>
  Oy! Me box is filled!
</label>

<label class="checkbox">
  <input type="checkbox" value="" data-toggle="checkbox" disabled="" />
  Aaand I’m disabled.
</label>

<label class="checkbox">
  <input type="checkbox" value="" data-toggle="checkbox" disabled="" checked="" />
  Got picked, but I’m disabled.
</label>

Our radios also require javascript to work correctly. Just like the checkboxes, make sure you have included jQuery in your code and the radio.js plugin.

Radio is off

To get a radio up and running is also nice and simple, wrap the input in a label with the class .radio and add the attribute data-toggle="radio" to the radio input. Thats it.

<label class="radio>
  <input type="radio" name="optionsRadios" value="option1" data-toggle="radio" />
  Radio is off
</label>

Just like the checkbox elements, adding in the standard attributes of checked="" and disabled="" will work as expected.

Radio is on Disabled radio is off Disabled radio is on

<label class="radio">
  <input type="radio" value="" name="optionsRadios" data-toggle="radio" checked="" />
  Radio is on
</label>

<label class="radio">
  <input type="radio" value="" name="optionsRadiosDisabled" data-toggle="radio" disabled="" />
  Disabled radio is off
</label>

<label class="radio">
  <input type="radio" value="" name="optionsRadiosDisabled" data-toggle="radio" disabled="" checked="" />
  Disabled radio is on
</label>

We use the bootstrap switch plugin from http://www.bootstrap-switch.org/ and requires jQuery like our other plugins. To get started with the switches include the bootstrap-switch JS plugin.

Using the plugin is extremly simple, just add the attribute data-toggle="switch" to a checkbox input and initialise the plugin.

$("[data-toggle='switch']").bootstrapSwitch();

<input type="checkbox" data-toggle="switch" />

Adding the checked attribute the element will turn the switch on.

<input type="checkbox" checked data-toggle="switch" />

Our restyled navbars. If you want to include icons in the navbar use the class .navbar-icons on the ul element.

You can add a 'New' notification indicator next to an icon by adding in the element <span class="navbar-new"></span> after the icon you want the indicator to appear. Note that the span must be on a new line in the HTML.

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Hoarrd!</a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Ranger</a></li>
    <li><a href="#">Walrus</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dah <span class="fa fa-chevrondown"></span></a>
      <ul class="dropdown-menu">
        <div class="arrow top"></div>
        <li><a href="#">Action</a></li>
        <li class="active"><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
  <ul class="nav navbar-nav navbar-right navbar-icons">
    <li>
      <a href="#">
        <span class="fa fa-user"></span><span class="hidden-lg">My Account</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="fa fa-bell"></span><span class="hidden-lg">Messages</span>
        <span class="navbar-new"></span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="fa fa-cog"></span><span class="hidden-lg">Settings</span>
      </a>
    </li>
  </ul>
  <p class="navbar-text navbar-right">Heigh-ho, <a href="#" class="navbar-link">Billy Bones</a></p>
  </div>
</nav>

Change the class to .nabar-inverse to use a dark color scheme.

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

The tiles are a custom componant providied just for the Drunken Parrot UI Kit. We have created two custom tiles, one for a profile and one for a login. Both the tiles are extremely easy to include in your project by following the markup below.

James Hoarrd

Ship Captain

Profile

Profile Tile

<div class="tile tile-profile">
  <img src="images/captain-hoarrd.png" alt="">
  <h4>James Hoarrd</h4>
  <p>Ship Captain</p>
  <a href="#" class="btn btn-block btn-danger btn-embossed">Profile</a>
</div>

Login Tile

<div class="tile tile-login">
  <h3 class="logo">Hoarrd!</h3>
  <div class="input-icon">
    <span class="fa-user fa"></span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
  <div class="input-icon">
    <span class="fa-lock fa"></span>
    <input type="password" class="form-control" placeholder="******">
  </div>
  <a href="#" class="btn btn-block btn-primary btn-embossed">Log in</a>
  <div class="login-action clearfix">
    <div class="col-md-8">
      <label class="checkbox">
        <input type="checkbox" value="" data-toggle="checkbox" />Remember Me
      </label>
    </div>
    <div class="col-md-4">
      <a href="#">Forget?</a>
    </div>
  </div>
</div>

The toolbar is another custom componant for Drunken Parror UI Kit that makes use of a customised version Paul Kinzett's toolbar.js Jquery Plugin. The toolbars requires jquery, so please make sure you have included jQuery in your project and the toolbar.js plugin file.

Include your toolbar icons in a div wrapper and ensure it is hidden.

<div id="toolbar-icons" style="display: none">
  <a href="#"><i class="fa fa-user"></i></a>
  <a href="#"><i class="fa fa-star"></i></a>
  <a href="#"><i class="fa fa-flag"></i></a>
  <a href="#"><i class="fa fa-edit"></i></a>
  <a href="#"><i class="fa fa-trash-o"></i></a>
</div>

And include the icon you want to trigger the toolbar which will need the class .icon-button on the parent link tag.

<a id="toolbar" class="icon-button"><i class="fa fa-cog"></i></a>

Finally inlcude the js code as per the documentation in the Toolbar.js documentation.

$('#toolbar').toolbar({
  content: '#toolbar-icons',
  position: 'top'
});

We have included two new position options to the toolbar plugin. vertical-top and vertical-bottom

Buttons

Inputs

Navs

Alerts

Thumbnails

15 men on a dead chest

Panels

Panel title

Panel Primary

Panel Info

Panel Success

Panel Warning

Panel Danger

Checkboxes

Radio

Switches

Navbar

Tiles

James Hoarrd

Toolbars

Buttons

Inputs

Pagination

Breadcrumbs

Navs

Alerts

Thumbnails

15 men on a dead chest

Panels

Panel title

Panel Primary

Panel Info

Panel Success

Panel Warning

Panel Danger

Checkboxes

Radio

Switches

Navbar

Tiles

James Hoarrd

Hoarrd!

Toolbars