When you purchase an item from Creative Tim, you are actually purchasing a license to use that item. All our free items are under MIT license. All our premium items are covered by our Personal and Developer licenses. In order to understand the rights and restrictions that come with your purchase, please read the details from our Official License Page.
We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:
Buttons come in all needed sizes:
We added extra classes that can help you better customise the look. You can use regular buttons, filled buttons, rounded corners buttons or plain link buttons. Let's see some examples:
Button groups, toolbars, and disabled state all work like they are supposed to.
An extra category of buttons that are necessary for any project is the social buttons. We have added classes that provide the default color 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, ranging from filled to round to simple.
We used the Font Awesome social icons that you can find here.
Here is the example for all the social buttons with the filled style:
If you want a special effect for the buttons in your forms, we have created a special class of buttons called morphing buttons.
The buttons have 2 states: loading and result. The loading state starts after the click action: the buttons transforms itself into a loading circle (presumably while the call to the server is being made). The button remains in the loading state until the second state is invoked. To call the result state, you should call "morphingButton()" by Javascript with the following parameters: icon (which will be displayed in the result) and state (that can take the values: {info | success | warning | error}).
You can set the color for the loading circle with the following classes “data-rotation-color=”{ azure | green | orange | red}”.
To use the custom checkboxes, you need to import a separate Javascript file called '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
<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>
$(':checkbox').checkbox('check');
$(':checkbox').on('toggle', function() {
// Do something
});
To use the custom radio buttons, you need to import a separate Javascript file called '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:
<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>
$(':radio').radio('check');
$(':radio').on('toggle', function() {
// Do something
});
If you want to use something more special than a checkbox, we recomment the switch. You can use it with both text and with icons. For extra customisation we added color classes.
For the original documentation, please go here: Larentis Switch.
<input type="checkbox" checked data-toggle="switch" class="ct-green"/>
<input type="checkbox" data-toggle="switch" />
<div class="switch"
data-on-label="<i class='fa fa-check'></i>"
data-off-label="<i class='fa fa-times'></i>">
<input type="checkbox" checked/>
</div>
<div class="switch"
data-on-label="<i class='fa fa-check'></i>"
data-off-label="<i class='fa fa-times'></i>">
<input type="checkbox"/>
</div>
We are very proud to present the dropdown, we added a subtle animation for this classic widget. We also thought of another 2 popular use-cases: dropdown with flags ( requires no additional class) and dropdown with icons (requires the “dropdown-with-icons” class).
You can use both sets of icons: Stroke and Font Awesome; for this particular case, we suggest using the thin-line Stroke ones.
Here are some examples and the code:
Flags
Deutsch
English(UK)
Français
Română
Italiano
Español 
Português 
日本語
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
We restyled the Bootstrap input to give it a more flat, minimal look. You can use the classic look, different colors and states or input groups.
<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="fa fa-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>
There are 2 ways to use them: as normal select, in which case you need to specify the style as "form-control", or as button, for which you have to specify the style as "btn-{type}". You can also set the "multiple" attribute if you wan to have multiple selects. Please check the original documentation.
<select name="huge" class="selectpicker" data-style="form-control">
<option disabled selected> Choose city</option>
<option value="1">Paris </option>
<option value="1">Bucharest</option>
</select>
<select name="huge" class="selectpicker" data-style="btn-info btn-fill btn-block">
<option disabled selected> Choose city</option>
<option value="1">Paris </option>
<option value="1">Bucharest</option>
</select>
If you want to use tags, we now offer you 3 possibilities: simple tags, colored tags that you can use by adding the necessary color class and filled tags, resulted by using the "tag-fill" class. You can also add an external URL for autocomplete feature, or you can just add a couple of words inside javascript. More details about tags here: jQuery Tags Input
We added custom style for the textarea, so it looks similar to all other inputs.
<textarea class="form-control" placeholder="Here can be your nice text" rows="3"></textarea>
Set up a space on your page to gather subscription by adding this special area. It contains the email input and a call to action ( you can use any variation of button you see fit). The subscription area comes with 3 styles: white (class "subscribe-line"), black (class "subscribe-line-black") and transparent (class "subscribe-line-transparent"), which looks best when you use a background image and a black layer over it.
See the examples and implementation here.
Promote sharing in your site by adding the kit's custom social lines. You can add your own text, the buttons are the social ones (you can find them in the Social Buttons section). There are 2 variations for the social line: white (by using the class "social line" ) and black (by using the class "social-line-black").
See more examples and implementation here.
We took the Bootstrap pagination elements and customised them to fit the overall theme. We also added a special class called 'no-border', which dies what its name says and improves the overall clean look.
Besides the classic look, we also added the color classes to offer more customisation.
<ul class="pagination pagination-blue">
<li><a href="#">«</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="#">»</a></li>
</ul>
The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean and minimal.
<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>
We restyled jQuery UI slider, while keeping the design consistent.
<!-- 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
});
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
<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>
<!-- Filled -->
<span class="label label-default label-fill">Default</span>
<span class="label label-primary label-fill">Primary</span>
<span class="label label-success label-fill">Success</span>
<span class="label label-info label-fill">Info</span>
<span class="label label-warning label-fill">Warning</span>
<span class="label label-danger label-fill">Danger</span>
We restyled the classic description by tabs. We offer 2 possbility to style the navigation part of the description area: with text( using the class "nav-text") and with icons (using the class "nav-icons"). Besides the default order that comes horizontal, we added a vertical alignment possibility, reachable by the use of the class “nav-stacked”. You can style it with any of the colors that come with the kit, by using the class “nav-{color}”.
Here is an example of the stacked, text option.
Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.
There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.
It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.
It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
<div class="row">
<div class="col-md-3">
<ul class="nav nav-text nav-stacked" role="tablist">
<li class="active">
<a href="#info" role="tab" data-toggle="tab">
Info
</a>
</li>
<li>
<a href="#description" role="tab" data-toggle="tab">
Description
</a>
</li>
<li>
<a href="#concept" role="tab" data-toggle="tab">
Concept
</a>
</li>
<li>
<a href="#support" role="tab" data-toggle="tab">
Support
</a>
</li>
<!-- <li class="divider"></li> -->
<hr>
<li>
<a href="#extra" role="tab" data-toggle="tab">
Extra
</a>
</li>
</ul>
</div>
<div class="col-md-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="info">
<p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.</p>
<p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>
</div>
<div class="tab-pane" id="description">
<p>The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design. </p>
<p>There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.</p>
</div>
<div class="tab-pane" id="concept">
<p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>
<p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display. </p>
</div>
<div class="tab-pane" id="support">
<p>From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.</p>
<p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>
</div>
<div class="tab-pane" id="extra">
<p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display. </p>
<p>It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>
</div>
</div>
</div>
</div>
Here is an example with icons, aligned horizontally.
Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
The first thing you notice when you hold the phone is how great it feels in your hand. There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.
The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.
Larger, yet dramatically thinner.It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.
Larger, yet dramatically thinner.
<div class="row">
<div class="col-md-3">
<ul class="nav nav-stacked nav-icons" role="tablist">
<li class="active">
<a href="#stacked-description-logo" role="tab" data-toggle="tab">
<i class="fa fa-info-circle"></i><br>
Description
</a>
</li>
<li>
<a href="#stacked-legal-logo" role="tab" data-toggle="tab">
<i class="fa fa-legal"></i><br>
Legal Info
</a>
</li>
<li>
<a href="#stacked-help-logo" role="tab" data-toggle="tab">
<i class="fa fa-life-ring"></i><br>
Help Center
</a>
</li>
</ul>
</div>
<div class="col-md-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="stacked-description-logo">
<p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.</p>
<p>The first thing you notice when you hold the phone is how great it feels in your hand. There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.</p>
</div>
<div class="tab-pane" id="stacked-legal-logo">
<p>The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.</p>
<p>Larger, yet dramatically thinner.It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>
</div>
<div class="tab-pane" id="stacked-help-logo">
<p>From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.</p>
<p>Larger, yet dramatically thinner.
</p>
</div>
</div>
</div>
</div>
You can see more examples here.
Our information areas are made of created using rounded corners squares with gradients and using icons (iOS7 Stroke, Font Awesome or custom). The default color for the gradient is grey, and you can all others colors by using the corresponding class “icon-{blue | azure | green| orange | red | purple | pink | black }”.
The default size for the areas is 64x64px. If you want the smaller version of 32x32px, you can use the “icon-sm” class.
For an horizontal alignment use the custom class "icon-horizontal". See more illustrative examples below:
Really fast implementation
<!-- example with regular info -->
<div class="col-md-4">
<div class="info">
<div class="icon icon-pink">
<i class="pe-7s-like"></i>
</div>
<div class="description">
<h3> Made with Love </h3>
<p>Really fast implementation</p>
</div>
</div>
</div>
<!-- example with info horizontal and small icon -->
<div class="col-md-5">
<div class="info info-horizontal">
<div class="icon icon-blue icon-sm">
<i class="fa fa-shopping-cart"></i>
</div>
<div class="description">
<h4> Fast Delivery </h4>
<p>Create really awesome projects.</p>
<a href="javascript: void(0);">Find more</a>
</div>
</div>
</div>
All Boostrap classes for tables are supported and improved. Besides the simple and striped tables, we added a shopping cart table, that gives you more customisation. With the shopping cart table you can use the classes “td-name” for a cell that contains names and “td-number” for numbers. All tables have to possibility to add action cells for every row. If you add the class “td-actions” for the cell that has the actions, when you will hover over its row, it will become more intense.
If you want to make the most out of the Get Shit Done Pro tables, you should check out the next examples.
| # | Name | Job Position | Since | Salary | Actions |
|---|---|---|---|---|---|
| 1 | Andrew Mike | Develop | 2013 | € 99,225 | |
| 2 | John Doe | Design | 2012 | € 89,241 | |
| 3 | Alex Mike | Design | 2010 | € 92,144 | |
| 4 | Mike Monday | Marketing | 2013 | € 49,990 | |
| 5 | Paul Dickens | Communication | 2014 | € 69,201 |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-center">#</th>
<th>Name</th>
<th>Job Position</th>
<th>Since</th>
<th class="text-right">Salary</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Andrew Mike</td>
<td>Develop</td>
<td>2013</td>
<td class="text-right">€ 99,225</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-user"></i>
</button>
<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>John Doe</td>
<td>Design</td>
<td>2012</td>
<td class="text-right">€ 89,241</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-user"></i>
</button>
<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Alex Mike</td>
<td>Design</td>
<td>2010</td>
<td class="text-right">€ 92,144</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-user"></i>
</button>
<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td class="text-center">4</td>
<td>Mike Monday</td>
<td>Marketing</td>
<td>2013</td>
<td class="text-right">€ 49,990</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-user"></i>
</button>
<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td class="text-center">5</td>
<td>Paul Dickens</td>
<td>Communication</td>
<td>2014</td>
<td class="text-right">€ 69,201</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-user"></i>
</button>
<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
| # | Product Name | Type | Qty | Price | Amount | |
|---|---|---|---|---|---|---|
| 1 | Moleskine Agenda | Office | 25 | € 49 | € 1,225 | |
| 2 | Stabilo Pen | Office | 30 | € 10 | € 300 | |
| 3 | A4 Paper Pack | Office | 50 | € 10.99 | € 109 | |
| 4 | Apple iPad | Meeting | 10 | € 499.00 | € 4,990 | |
| 5 | Apple iPhone | Communication | 10 | € 599.00 | € 5,999 | |
| Total | €12,999 | |||||
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="text-center">#</th>
<th></th>
<th>Product Name</th>
<th>Type</th>
<th>Qty</th>
<th class="text-right">Price</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>Moleskine Agenda</td>
<td>Office</td>
<td>25</td>
<td class="text-right">€ 49</td>
<td class="text-right">€ 1,225</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox" checked="">
</label>
</td>
<td>Stabilo Pen</td>
<td>Office</td>
<td>30</td>
<td class="text-right">€ 10</td>
<td class="text-right">€ 300</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox" checked="">
</label>
</td>
<td>A4 Paper Pack</td>
<td>Office</td>
<td>50</td>
<td class="text-right">€ 10.99</td>
<td class="text-right">€ 109</td>
</tr>
<tr>
<td class="text-center">4</td>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>Apple iPad</td>
<td>Meeting</td>
<td>10</td>
<td class="text-right">€ 499.00</td>
<td class="text-right">€ 4,990</td>
</tr>
<tr>
<td class="text-center">5</td>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>Apple iPhone</td>
<td>Communication</td>
<td>10</td>
<td class="text-right">€ 599.00</td>
<td class="text-right">€ 5,999</td>
</tr>
<tr>
<td colspan="5"></td>
<td class="td-total">
Total
</td>
<td class="td-price">
<small>€</small>12,999
</td>
</tr>
</tbody>
</table>
</div>
| Product | Description | Price | Qty | Amount | ||
|---|---|---|---|---|---|---|
|
Moleskine Agenda |
Meeting Notes
Most beautiful agenda for the office. |
€49 | x25 | €1,225 | |
| Total | €1,225 | |||||
<div class="table-responsive">
<table class="table table-shopping">
<thead>
<tr>
<th class="text-center"></th>
<th >Product</th>
<th class="th-description">Description</th>
<th class="text-right">Price</th>
<th class="text-right">Qty</th>
<th class="text-right">Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="img-container">
<img src="assets/img/shopping.jpg" alt="...">
</div>
</td>
<td class="td-name">
Moleskine Agenda
</td>
<td>
<b>Meeting Notes</b>
<p>
Most beautiful agenda for the office.</p>
</td>
<td class="td-number">
<small>€</small>49
</td>
<td class="td-number">
<small>x</small>25
</td>
<td class="td-number">
<small>€</small>1,225
</td>
<td class="td-actions">
<button type="button" rel="tooltip" data-placement="left" title="Aprove" class="btn btn-info btn-simple btn-icon">
<i class="fa fa-check"></i>
</button>
<button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-danger btn-simple btn-icon ">
<i class="fa fa-times"></i>
</button>
<button type="button" rel="tooltip" data-placement="left" title="Wishlist" class="btn btn-default btn-simple btn-icon">
<i class="fa fa-heart-o"></i>
</button>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td class="td-total">
Total
</td>
<td class="td-price">
<small>€</small>1,225
</td>
<td> <button type="button" class="btn btn-info btn-fill btn-l">Complete Purchase <i class="fa fa-chevron-right"></i></button></td>
<td></td>
</tr>
</tbody>
</table>
</div>
For the comments section, we used the Bootstrap classes for media, to which we added the "media-post" class. You can use the former class for the area in which a user can post a comment.
All comments should be placed in the class "media-area". There is also a class for smaller comments area called “media-area-small”; use it for a tighter space, it will shrink the text and pictures.
You can see more examples here.
There are a lot of beautiful cards! They are one of the best way to organise your information. We went over board with possibilities and we recommended finding the right fit for your product. The general class for a card is called "card". All cards have also a plain version, without the background and shadow, and you can reach it by using the "card-plain" class. IF you want them structured horizontally, just add the “card-horizontal” class.
Blog cards have 3 areas: the image area defined by the "image" class and the content area with the class "content" on the bottom.
The image part of the card can take filters, that show on the hover action. We recommend adding specific action for the object the cards defines here. The filters come with 7 options, black being the default one. To choose the color, use of the “filter-{color = black[default], white,blue,azure,green,orange,red}” options.
If you have multiple cards, with different stories, it is easy to put them into categories and identify them more easily by using the following: <p class= “category”></p> (which represents the category). The category part of the content can contain icons, text or both on all color options.
One way to organize the content area is by having a title , for which you should use the "title" class, and a description, class "description".
If you want a footer for your card, we recommend placing it inside the content area, with the "footer" class. The footer is made of the stats (using the class "stats") and author (class "author"). Stats can have icons or icons and text. The author part can have icon and name, or picture and name.
See all possibilities in detail here.
<div class="card">
<div class="image">
<img src="assets/img/thumb.jpg&fit=max&fm=jpg&auto=format&s=5c4d815f60933514c19eda5655f240eb" alt="..."/>
<div class="filter filter-white">
<button type="button" class="btn btn-default btn-simple">
<i class="fa fa-image"></i> Preview
</button>
<button type="button" class="btn btn-success btn-simple">
<i class="fa fa-check"></i> Publish
</button>
<button type="button" class="btn btn-danger btn-simple">
<i class="fa fa-times"></i> Delete
</button>
</div>
</div>
<div class="content">
<p class="category">Latest from <a href="">Best Stories</a></p>
<a href="#">
<h4 class="title">Get Shit Done Kit PRO, the most wanted bootstrap kit is here </h4>
</a>
<a href="#">
<p class="description">Edgerank completely fails to have the effect it was originally designed for nice product. This will be a really interesting post about Facebook's biggest mistake yet...</p>
</a>
<div class="footer">
<div class="author">
<a class="card-link" href="#">
<img src="assets/img/default-avatar.png" alt="..." class="avatar">
<span> Alex Paduraru</span>
</a>
</div>
<div class="stats pull-right">
<a href="#">
<i class="fa fa-comments"></i> 89
</a>
</div>
<div class="stats pull-right">
<a href="#">
<i class="fa fa-heart"></i> 341
</a>
</div>
</div>
</div>
</div>
The profile cards are defined by the "card-profile" class. They have the same image and content structure as the blog card. You can use your own image for the "image" area, or you can go with the default white one. If you do not want your card to be differentiated from the background, you can use the "card-plain" class.
To see more examples, please go here.
<div class="card card-user">
<div class="image">
<img src="assets/img/thumb.jpg" alt="..."/>
</div>
<div class="content">
<div class="author">
<a href="#">
<img class="avatar" src="assets/img/default-avatar.png" alt="..."/>
<h4 class="title">Creative Tim <br />
<small>Designer</small>
</h4>
</a>
</div>
<p class="description text-center">
<i class="fa fa-map-marker text-muted"></i> Bucharest, Romania <br>
<i class="fa fa-envelope-o text-muted"></i> hello@creative-tim.com <br>
<i class="fa fa-clock-o text-muted"></i> Since 2013
</p>
</div>
<hr>
<div class="text-center">
<button href="#" class="btn btn-social btn-simple"><i class="fa fa-facebook-square"></i></button>
<button href="#" class="btn btn-social btn-simple"><i class="fa fa-twitter"></i></button>
<button href="#" class="btn btn-social btn-simple"><i class="fa fa-google-plus-square"></i></button>
</div>
</div> <!-- end card -->
The class that defines the product cards is called "card-product". It has the same structure of image and content, like the ones described above.
Inside the "image" class you can also use a carousel for product bundles.
We added a class for price called "price". If you wish to show a special promotion, you can use the classes "price-old" and "price-new".
We added a new class of buttons for this cards, called "btn-hover". You should use it if you wish for the button to appear on the hover action for the card. The button that appears on hover can best be used for actions such as “Favourite, Wishlist, View Later”.
To see more examples, please go here.
Leaf-Print Cotton, Silk-Blend Shirt and Cashmere-Blend Blanket
<div class="card card-product">
<div class="image">
<div id="card-product-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/product.jpg" alt="">
</div>
<div class="item">
<img src="assets/img/product.jpg" alt="">
</div>
<div class="item">
<img src="assets/img/product.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#card-product-carousel" data-slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#card-product-carousel" data-slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div>
</div>
<div class="content">
<a href="#">
<h4 class="title">Burberry Collection</h4>
</a>
<p class="description">
Leaf-Print Cotton, Silk-Blend Shirt and Cashmere-Blend Blanket
</p>
<div class="footer">
<span class="price price-old">€ 549</span>
<span class="price price-new">€ 449</span>
<button class="btn btn-default btn-fill pull-right btn-xs btn-hover">
<i class="fa fa-star"></i>
</button>
</div>
</div>
</div> <!-- end card -->
Information shown on cards is most likely homogenous and you should be able to provide the user an easy way to search and filter. To do this, we provide a refine card. The class for it is called "card-refine". Due to large number of categories, this area can get pretty long, so we also created a class called “panel-scroll” to make areas scrollable.
<div class="card card-refine">
<div class="header">
<h4 class="title">Refine
<button class="btn btn-default btn-xs btn pull-right btn-simple" rel="tooltip" title="Reset Filter">
<i class="fa fa-refresh"></i>
</button>
</h4>
</div>
<div class="content">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h6 class="panel-title">
<a data-toggle="collapse" href="#refinePrice">
Price Range
<i class="fa fa-caret-up pull-right"></i>
</a>
</h6>
</div>
<div id="refinePrice" class="panel-collapse collapse in">
<div class="panel-body">
<span class="price price-left">€ 100</span>
<span class="price price-right">€ 850</span>
<div class="clearfix"></div>
<div id="refine-price-range" class="slider slider-info"></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h6 class="panel-title">
<a data-toggle="collapse" href="#refineClothing" class="collapsed">
Clothing
<i class="fa fa-caret-up pull-right"></i>
</a>
</h6>
</div>
<div id="refineClothing" class="panel-collapse collapse">
<div class="panel-body">
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox" checked="">
Blazers
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Casual Shirts
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Formal Shirts
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Jeans
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Polos
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Pyjamas
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Shorts
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Trousers
</label>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h6 class="panel-title">
<a data-toggle="collapse" href="#refineDesigner">
Designer
<i class="fa fa-caret-up pull-right"></i>
</a>
</h6>
</div>
<div id="refineDesigner" class="panel-collapse collapse in">
<div class="panel-body panel-scroll">
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox" checked="">
All
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Acne Studio
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Alex Mill
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Alexander McQueen
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Alfred Dunhill
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
AMI
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Berena
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Berluti
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Burberry Prorsum
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Calvin Klein
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Canali
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Club Monaco
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Dolce & Gabbana
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Gucci
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Kolor
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Lanvin
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Loro Piana
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Massimo Alba
</label>
</div>
</div>
</div><!-- end panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h6 class="panel-title">
<a data-toggle="collapse" href="#refineColour" class="collapsed">
Colour
<i class="fa fa-caret-up pull-right"></i>
</a>
</h6>
</div>
<div id="refineColour" class="panel-collapse collapse">
<div class="panel-body">
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox" checked="">
All
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Black
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Blue
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Brown
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Gray
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Green
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Neutrals
</label>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
Purple
</label>
</div>
</div>
</div> <!-- end panel -->
</div>
</div>
</div> <!-- end card -->
We created a special set of classes designed to help you create your price options in your website. If you want to describe the options on every card with a list, please the use the class “list-lines”.
If you want to see examples, please go here. Here is a fully coded version of a price card:
<div class="card card-price">
<div class="content">
<h6 class="category">Photoshop Elements</h6>
<h1 class="price">
<small>€</small>39 <small>/mo</small>
</h1>
<ul class="list-unstyled list-lines">
<li>
<i class="fa fa-comments"></i> <b>10,000</b> Messages
</li>
<li>
<i class="fa fa-magic"></i> <b>Unlimited</b> Combinations
</li>
<li>
<i class="fa fa-male"></i> <b>Too much</b> Users
</li>
<li>
<i class="fa fa-level-up"></i> <b>Free</b> Updates
</li>
</ul>
</div>
<div class="footer">
<button type="button" class="btn btn-info btn-fill btn-block">Get this Package</button>
</div>
</div> <!-- end card -->
Like we mentioned before, all cards are usable in the plain version too. If you wish to use the price cards in the plain version, it is best to use the "card-price-separator” class to create a division between them. You can see an example here.
To use this special kind of cards, you have to add the “card-background” to the card. You can use all filters mentioned above by adding the “filter filter-{color}” class inside the "image" class.
We created a javascript function that takes the background for every card and fits it perfectly, so that the cards looks nice no matter the size. This is how you can call it: gsdk.fitBackgroundForCards();
To see more examples of full background cards, please go here.
<div class="card card-background">
<div class="image">
<img src="assets/img/thumb.jpg" alt="..."/>
<div class="filter"></div>
</div>
<div class="content">
<h5 class="price">€ 129,00
<a href="#" class="pull-right">
<i class="fa fa-heart"></i>
</a>
</h5>
<a href="#"><br>
<h4 class="title">Premium Apartment in Old Town</h4>
</a>
</div>
<div class="footer">
<div class="author">
<a href="#">
<img src="assets/img/default-avatar.png" alt="..." class="avatar">
<span>Alex</span>
</a>
</div>
<div class="stats pull-right">
<i class="fa fa-comment"></i> 253 Reviews
</div>
</div>
</div> <!-- end card -->
The video card is an extension to the full background card, having the background made of video. To use, you need to add the "video" tag inside your card. The "video" tag needs an id attribute, since you need to control the "play" and "pause" actions for it.
Inside the card you need to place the very important play button. If the video is in play mode, the button will be transformed in pause. Having this button is crucial, since he represents the trigger for the video and contains all the needed information in its attributes data-video = “id-video” si data-toggle=”video”.
Featured
<div class="card card-background">
<div class="video">
<video id="video-source" preload="auto" loop="loop" muted="muted" volume="0">
<source src="assets/video/nyc_skyline.webm" type="video/webm">
<source src="assets/video/nyc_skyline.ogv" type="video/ogg">
<source src="assets/video/nyc_skyline.mp4" type="video/mp4">
Video not supported
</video>
<div class="filter"></div>
</div>
<div class="content">
<p class="category">
Featured
</p>
<h4 class="title">Get Shit Done Kit Pro is here...</h4>
</div>
<div class="footer">
<button type="button" data-video="video-source" data-toggle="video" class="btn btn-neutral btn-round">
<i class="fa fa-play"></i> Play
</button>
<div class="stats pull-right">
<i class="fa fa-comment"></i> 68
</div>
<div class="stats pull-right">
<i class="fa fa-heart"></i> 221
</div>
</div>
</div> <!-- end card -->
<!-- javascript -->
gsdk.initVideoCards();
Google Maps Card is an extension of the full background card. To be able to use it, you need a link to Google Maps and Javascript function to initialize it.
<!-- html code -->
<div class="card card-background">
<div class="map" id="map"></div>
</div> <!-- end card -->
<!-- link to google maps plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- init in page -->
initGoogleMaps();
<!-- javascript function -->
function initGoogleMaps(){
var myLatlng = new google.maps.LatLng(44.433530, 26.093928);
var mapOptions = {
zoom: 14,
center: myLatlng,
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
The re-styled the Bootstrap datepicker and we added the Get Shit Done colors, which you can give as parameter to the plugin: color = {blue,azure,green,orange,red}.
<!-- markup -->
<input class="datepicker form-control" type="text"/>
<!-- javascript -->
$('.datepicker').datepicker({
weekStart:1,
color: '{color}'
});
We restyled the classic Bootstrap Modal and gave it a more simple look.
You can see more examples or custom modals here.
IMPORTANT! Please make sure you place the modal body outside of the "div.wrapper" tag.
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal Core -->
<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">×</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">
<button type="button" class="btn btn-default btn-simple" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-info btn-simple">Save</button>
</div>
</div>
</div>
</div>
We restyled the Bootstrap tooltip.
<!-- Markup -->
<button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top" >Button with Tooltip</button>
<!-- Javascript -->
$('.btn-tooltip').tooltip();
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:
<!-- 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();
The Get Shit Done Kit has new classes for collapsable groups which offer a nice sneak peak into the content of the body of the group.
If you want to stick with the old classes, they remain compatible. If you want to see the new ones, you will have to add data-toggle="gsdk-collapse" instead of "collapse".
Here is an example of both the groups. The first two are done using the preview on hover and the third one is classical.
<div id="acordeon">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-target="#collapseOne" href="#collapseOne" data-toggle="gsdk-collapse">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-target="#collapseTwo" href="#collapseTwo" data-toggle="gsdk-collapse">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div><!-- end acordeon -->
For the implementation of graphic charts, we used the Chartist plugin and added our custom styles. The plugin is free to download and use here. The guys behind the project did an awesome job and we recommend using it. Besides all the great customisation that you have using it, it is also fully responsive.
We recommend using this chart when you have easy to understand information, that can be conveyed in a single line throughout a continuous period.
<!-- graphic area in html -->
<h4> <br><small>24 Hours Performance</small></h4>
<div id="chartPerformance" class="ct-chart ct-perfect-fourth"></div>
<!-- javascript -->
var dataPerformance = {
labels: ['9pm', '2am', '8am', '2pm', '8pm'],
series: [
[1, 6, 8, 7, 4, 7, 8, 12, 16, 17, 14, 13]
]
};
var optionsPerformance = {
showPoint: false,
lineSmooth: true,
axisX: {
showGrid: false,
showLabel: true
},
axisY: {
offset: 40,
},
low: 0,
high: 20
};
Chartist.Line('#chartPerformance', dataPerformance, optionsPerformance);
This graphic is best used when you have multiple results for different points and you want to show a correlation (growth, down-side, etc).
<!-- graphic area in html -->
<h4></small> <br><small>NASDAQ: AAPL</small></h4>
<div id="chartStock" class="ct-chart ct-perfect-fourth"></div>
<!-- javascript -->
var dataStock = {
labels: ['2009', '2010', '2011', '2012', '2013', '2014'],
series: [
[22.20, 28.16, 34.90, 42.28, 47.26, 48.89, 51.93, 55.32, 59.21, 62.21, 75.50, 80.23, 60.32, 55.03, 62.21, 78.83, 82.12, 89.21, 102.50, 107.23]
]
};
var optionsStock = {
lineSmooth: false,
axisY: {
offset: 40,
labelInterpolationFnc: function(value) {
return '$' + value;
}
},
low: 10,
high: 110,
classNames: {
point: 'ct-point ct-green',
line: 'ct-line ct-green'
}
};
var $chart = $('#chartStock');
Chartist.Line('#chartStock', dataStock, optionsStock);
We recommend you use this graphic when you need to show multiple functions in the same visual element. For example, you can see a correlation between the registered versus active users. Always try to use a legend when you have multiple elements in the graphic.
<!-- graphic area in html -->
<h4><small>Users Behavior</small></h4>
<div id="chartSales" class="ct-chart ct-perfect-fourth"></div>
<h6>Legend</h6>
<i class="fa fa-circle text-info"></i> Visited Site<br>
<i class="fa fa-circle text-success"></i> Register<br>
<i class="fa fa-circle text-warning"></i> Login 2nd time
<!-- javascript -->
var dataSales = {
labels: ['2009', '2010', '2011', '2012', '2013', '2014'],
series: [
[287, 385, 490, 492, 554, 586, 698, 695, 752, 788, 846, 944],
[67, 152, 143, 240, 287, 335, 435, 437, 539, 542, 544, 647],
[23, 113, 67, 108, 190, 239, 307, 308, 439, 410, 410, 509]
]
};
var optionsSales = {
lineSmooth: false,
axisY: {
offset: 40
},
low: 0,
high: 1000
};
Chartist.Line('#chartSales', dataSales, optionsSales);
A pie chart is the easiest way to represent an information. Use it whenever you want to show something understandable at once.
<!-- graphic area in html -->
<h4><small>Public Preferences</small></h4>
<div class="row margin-top">
<div class="col-md-10 col-md-offset-1">
<div id="chartPreferences" class="ct-chart ct-perfect-fourth"></div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h6>Legend</h6>
<i class="fa fa-circle text-info"></i> Apple
<i class="fa fa-circle text-success"></i> Samsung
<i class="fa fa-circle text-warning"></i> BlackBerry
<i class="fa fa-circle text-danger"></i> Windows Phone
</div>
</div>
<!-- javascript -->
Chartist.Pie('#chartPreferences', {
labels: ['46%','28%','15%','11%'],
series: [46, 28, 15, 11]
});
We recommend using the bar chart whenever you want to show progress over periods of time. Here is an example.
<!-- graphic area in html -->
<h4><small>Views</small></h4>
<div id="chartViews" class="ct-chart ct-perfect-fourth"></div>
<!-- javascript -->
var dataViews = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
]
};
var optionsViews = {
seriesBarDistance: 10,
classNames: {
bar: 'ct-bar ct-azure'
},
axisX: {
showGrid: false
}
};
var responsiveOptionsViews = [
['screen and (max-width: 640px)', {
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function (value) {
return value[0];
}
}
}]
];
Chartist.Bar('#chartViews', dataViews, optionsViews, responsiveOptionsViews);
Go for multiple bars charts if you want to show two indicators side by side.
<!-- graphic area in html -->
<h4>Activity <br><small>Multiple Bars Chart</small></h4>
<div id="chartActivity" class="ct-chart ct-perfect-fourth"></div>
<h6>Legend</h6>
<span class="label label-info">Views</span>
<span class="label label-success">Reads</span>
<!-- javascript -->
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
[412, 243, 280, 580, 453, 353, 300, 364, 368, 410, 636, 695]
]
};
var options = {
seriesBarDistance: 10,
axisX: {
showGrid: false
}
};
var responsiveOptions = [
['screen and (max-width: 640px)', {
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function (value) {
return value[0];
}
}
}]
];
Chartist.Bar('#chartActivity', data, options, responsiveOptions);
The new Get Shit Done notification are looking fresh and clean. They go great with the navbar. If you want to see how we recommend using them, see this example.
You can also use it like "alert alert-auto-close" if you want the notification to be automatically closed in 5 seconds.