Buttons

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.

Checkboxes

To use the custom checkboxes, you need to import a separate Javascript file called 'checkbox.js'.

Usage can be done via Data Attributes:









Or can be called vis js:

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

We added more classes to provide you with choices










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.
$(':checkbox').checkbox('check');

Events

  • .on('toggle') gets activated when the checkbox state changes between checked and unchecked.
  • .on('change') the same as toggle.
$(':checkbox').on('toggle', function() {
  // Do something
});

Radio buttons

To use the custom radio buttons, you need to import a separate Javascript file called 'radio.js'.

Usage can be done via Data Attributes:








Or can be called vis js:

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

You can choose between different colors:










Methods

  • .radio('check') sets the checkbox state to checked.
  • .radio('uncheck') sets the state to unchecked.
$(':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.
$(':radio').on('toggle', function() {
  // Do something
});

Switches

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.



        


Dropdown

We are very proud to present the dropdown, we added a subtle animation for this classic widget.


Inputs

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.

Navbar

We restyled the classic Bootstrap navbar:

 

Besides the default navbar, we added 5 new colors: blue, azzure, green, orange, red. If you want to use one of them, you have to replace the 'navbar-default' with the class for the chosen color 'navbr-ct-#color'.

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 and then turn to color after scrolling for a certain number of pixels. We recommend that the part of your page that has the transparent navbar contains something non-cluttered, like an image. If you want to see a nice example in details, check this page out.

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.








    

Pagination

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.



  
    

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

60% Complete
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
60% Complete
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Sliders

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


Markup:

Js:

$( "#slider-range" ).slider({

	range: true,
	min: 0,
	max: 500,
	values: [ 75, 300 ],

});

$( "#slider-default" ).slider({
		
		value: 70,
		orientation: "horizontal",
		range: "min",
		animate: true

});

Tooltips

We restyled the Bootstrap tooltip.

Markup:


Js:

$('.btn-tooltip').tooltip();

Collapsable groups

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.

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

Notifications

The new Get Shit Done notification are looking more fresh and clean. They go great with the navbar. If you want to see how we recommen using them, see this:

Live Preview