UI Kit
Documentation

Buttons

Colors

We worked over the original Bootstrap classes, opting for a softer look:


<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-secondary">Secondary</button>
    			

Sizes

Buttons come in all needed sizes:

<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 customize the look. You can use regular buttons, rounded buttons or plain simple buttons. Let's see some examples:

<button class="btn btn-primary">Default</button>
<button class="btn btn-primary rounded">Round</button>
<button class="btn btn-primary rounded">
	<i class="fas fa-heart"></i> With Icon
</button>
<button class="btn btn-primary btn-fab btn-fab-mini rounded">
	<i class="fas fa-heart"></i>
</button>
<button class="btn btn-primary btn-just-icon">
	<i class="fas fa-heart"></i>
</button>
<button class="btn btn-link-secondary">Simple Link</button>
    			

Button groups and disabled states all work like they are supposed to. We used the Font Awesome icons that can be found here.

Checkboxes

To use the custom checkboxes, you don't need to import any separate JavaScript file, everything is inside /ILLUMIN4TE-timeless.js

<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes">
		Unchecked
	</label>
</div>
<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes" checked>
		Checked
	</label>
</div>
				

Radio Buttons

To use the custom radio buttons, you don't need to import any separate JavaScript file, everything is inside /ILLUMIN4TE-timeless.js

<div class="radio">
	<label>
		<input type="radio" name="optionsRadios">
		Radio is off
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" checked="true">
		Radio is on
	</label>
</div>

    			

Toggle Buttons

If you want to use something more special than a checkbox, we recommend the toggle buttons.

<div class="togglebutton">
	<label>
    	<input type="checkbox" checked="">
		Toggle is on
	</label>
</div>

<div class="togglebutton">
	<label>
    	<input type="checkbox">
		Toggle is off
	</label>
</div>
    			

Inputs

We restyled the default Bootstrap inputs to give it a more flat, minimal look. You can use them with regular labels, floating labels and states or input groups. You can also add icons to add more interest.

Floating Label

Success input

Error input

With Icon

With Icon

<div class="col-sm-4">
	<div>
    	<input type="text" placeholder="Regular" />
	</div>
</div>

<div class="col-sm-4">
	<div>
		<input type="email">
		<h4>Floating Label</h4>
	</div>
</div>

<div class="col-sm-4">
	<div>
		<span class="form-feedback form-success"><i class="fas fa-check"></i></span>
		<input type="text"/>
		<h4>Success input</h4>
	</div>
</div>

<div class="col-sm-4">
	<div>
		<span class="form-feedback form-error"><i class="fas fa-times"></i></span>
		<input type="text"/>
		<h4>Error input</h4>
	</div>
</div>

<div class="col-sm-4">
	<div>
		<span class="form-icon"><i class="fas fa-users"></i></span>
		<input type="text"/>
		<h4>With Icon</h4>
	</div>
</div>

<div class="col-sm-4">
	<div class="input-group">
		<span class="form-icon"><i class="fas fa-users"></i></span>
		<span class="form-feedback form-success"><i class="fas fa-check"></i></span>
		<input type="text"/>
		<h4>With Icon</h4>
	</div>
</div>
				

Textarea

The textarea has a new style, but it still looks similar to all other inputs.

<textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>
				

Pagination

The Bootstrap pagination elements were customised to fit the overall theme. Besides the classic look, we also added the color classes to offer more customisation like .pagination-info, .pagination-success, .pagination-warning, and .pagination-danger:

<ul class="pagination pagination-primary">
	<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>
		    

Progress Bars

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. The default background is a light gray. Each bar has a specific color but you can add some colors for the background lines using the next classes .progress-line-primary, .progress-line-info, .progress-line-success, .progress-line-warning, and .progress-line-danger:

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

Labels

We restyled the default options for labels, so they can be used seamlessly alongside regular text.

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>
			    	

Tables

All Boostrap classes for tables are supported and improved.

Simple Table with Actions

# Name Position Since Salary Actions
1 John Doe Developer 2017 $88,000
2 Jane Doe Designer 2015 $70,000
3 Jane John Owner 2010 $103,000
<table class="table">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th>Name</th>
            <th>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>John Doe</td>
            <td>Developer</td>
            <td>2017</td>
            <td class="text-right">&$88,000</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-just-icon btn-xs">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-just-icon btn-xs">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-just-icon btn-xs">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">2</td>
            <td>Jane Doe</td>
            <td>Designer</td>
            <td>2016</td>
            <td class="text-right">&$70,000</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-just-icon btn-xs">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-just-icon btn-xs">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-just-icon btn-xs">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">3</td>
            <td>Jane John</td>
            <td>Owner</td>
            <td>2010</td>
            <td class="text-right">&$103,000</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-just-icon btn-xs">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-just-icon btn-xs">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-just-icon btn-xs">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>
		    

Tooltips

We restyled the Bootstrap tooltip to make it match the lighter look.

<!-- Markup -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Button with Tooltip</button>

<!-- Javascript -->
$('[data-toggle="tooltip"]').tooltip();
				

Popovers

We restyled the Bootstrap popover to align with the Timeless concept, while still adding a bit of color for interest.
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 -->

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

Font Awesome Icons

We used the default Font Awesome Icons for all the icons in this kit.

<i class="fab fa-font-awesome-alt"></i>
    			

Notifications

The new notifications are looking fresh, clean, and timeless. For these notifications examples we used the .container-fluid class, so they will be fluid. Use the class .container when you use them outside of the .wrapper so they will be alignd with the general page container.

Info alert: You've got some friends nearby, stop looking at your phone and find them...
Success Alert: Yuhuuu! You've got your $11.99 album from The Weeknd
Warning Alert: Hey, it looks like you still have the "copyright © 2015" in your footer. Please update it!
Error Alert: Dang man! You screwed up the server this time. You should find a good excuse for your Boss...
<div class="alert alert-info">
    <div class="container-fluid">
	  <div class="alert-icon">
		<i class="fas fa-info-circle"></i>
	  </div>
	  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true"><i class="far fa-times-circle"></i></span>
	  </button>
	  <b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
    </div>
</div>

<div class="alert alert-success">
    <div class="container-fluid">
	  <div class="alert-icon">
		<i class="fas fa-check"></i>
	  </div>
	  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true"><i class="far fa-times-circle"></i></span>
	  </button>
      <b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd
    </div>
</div>

<div class="alert alert-warning">
    <div class="container-fluid">
	  <div class="alert-icon">
		<i class="fas fa-exclamation-triangle"></i>
	  </div>
	  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true"><i class="far fa-times-circle"></i></span>
	  </button>
      <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy;  2015" in your footer. Please update it!
    </div>
</div>

<div class="alert alert-danger">
    <div class="container-fluid">
	  <div class="alert-icon">
	    <i class="fas fa-exclamation-circle"></i>
	  </div>
	  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true"><i class="far fa-times-circle"></i></span>
	  </button>
      <b>Error Alert:</b> Dang man! You screwed up the server this time. You should find a good excuse for your Boss...
    </div>
</div>