Get Shit Done Kit Components by Creative Tim

Buttons

We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:

<button class="btn btn-default">Default</button>

<button class="btn btn-primary">Primary</button>

<button class="btn btn-info">Info</button>

<button class="btn btn-success">Success</button>

<button class="btn btn-warning">Warning</button>

<button class="btn btn-danger">Danger</button>

<button class="btn btn-link">Link</button>

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>

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 class="btn btn-primary">Default</button>

<button class="btn btn-primary btn-fill">Filled</button>

<button class="btn btn-primary btn-round">Round</button>

<button class="btn btn-primary btn-simple">Simple</button>

Button groups, toolbars, and disabled state all work like they are supposed to.

Checkboxes

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

Unchecked Checked Disabled unchecked Disabled checked

Usage can be done via Data Attributes:

<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 vis js:

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

We added more classes to provide you with choices

Blue Azzure Green Orange Red

<label class="checkbox ct-blue" for="checkbox1">

    <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox" checked>

    Blue

</label>

<label class="checkbox ct-azzure" for="checkbox2">

    <input type="checkbox" value="" id="checkbox2" data-toggle="checkbox" checked>

    Azzure

</label>

<label class="checkbox ct-green" for="checkbox3">

    <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" checked>

    Green

</label>

<label class="checkbox ct-orange" for="checkbox4">

    <input type="checkbox" value="" id="checkbox4" data-toggle="checkbox" checked>

    Orange

</label>

<label class="checkbox ct-red" for="checkbox5">

    <input type="checkbox" value="" id="checkbox5" data-toggle="checkbox" checked>

    Red

</label>

Methods

.checkbox('toggle') is used to toggle the states between checked and unchecked.
.checkbox('check') sets the checkbox state to checked.
.checkbox('uncheck') sets the state to unchecked.

$(':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'.

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

Usage can be done via Data Attributes:

<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 vis js:

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

You can choose between different colors:

Blue Azzure Green Orange Red

<label class="radio ct-blue">

    <input type="radio" name="optionsRadios1" data-toggle="radio" id="optionsRadios1" value="option1" checked>

    <i></i>Blue

</label>

<label class="radio ct-azzure">

    <input type="radio" name="optionsRadios2" data-toggle="radio" id="optionsRadios2" value="option1" checked>

    <i></i>Azzure

</label>

<label class="radio ct-green">

    <input type="radio" name="optionsRadios3" data-toggle="radio" id="optionsRadios3" value="option1" checked>

    <i></i>Green

</label>

<label class="radio ct-orange">

    <input type="radio" name="optionsRadios4" data-toggle="radio" id="optionsRadios4" value="option1" checked>

    <i></i>Orange

</label>

<label class="radio ct-red">

    <input type="radio" name="optionsRadios5" data-toggle="radio" id="optionsRadios5" value="option1" checked>

    <i></i>Red

</label>

Methods

.radio('check') sets the checkbox state to checked.
.radio('uncheck') sets the state to unchecked.

$(':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.

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

Dropdown

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

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

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.

<div class="form-group">

    <input type="text" value="" placeholder="Input" class="form-control" />

</div>



<div class="form-group has-success">

    <input type="text" value="Success" class="form-control" />

</div>



<div class="form-group has-error has-feedback">

    <input type="text" value="Error" class="form-control" />

    <span class="glyphicon glyphicon-remove form-control-feedback"></span>

</div>



<div class="input-group">

    <input type="text" value="Group Addon" class="form-control">

    <span class="input-group-addon"><i class="fa fa-group"></i></span>

</div>

Navbar

We restyled the classic Bootstrap navbar:

<div id="navbar">

    <nav class="navbar navbar-default" role="navigation">

      <div class="container-fluid">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand" href="#">Brand</a>

        </div>


        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

          <ul class="nav navbar-nav">

            <li><a href="#">Work in progress...</a></li>

            <li class="active"><a href="#">Link</a></li>

            <li><a href="#">Link</a></li>

            <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

              <ul class="dropdown-menu">

                <li><a href="#">Action</a></li>

                <li><a href="#">Another action</a></li>

                <li><a href="#">Something else here</a></li>

                <li class="divider"></li>

                <li><a href="#">Separated link</a></li>

                <li class="divider"></li>

                <li><a href="#">One more separated link</a></li>

              </ul>

            </li>

          </ul>

        </div><!-- /.navbar-collapse -->

      </div><!-- /.container-fluid -->

    </nav>

</div><!--  end navbar -->

Besides the default navbar, we added 5 new 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.

<ul class="nav nav-pills ct-blue">

    <!--  color-classes: "ct-blue", "ct-azure", "ct-orange", "ct-red", "ct-green"

          special-classes: "no-border"  -->

      <li class="active"><a href="#">Home</a></li>

      <li><a href="#"> Profile</a></li>

      <li><a href="#">Messages</a></li>

</ul>

Pagination

We took the Bootstrap pagination elements and customised them to fit the overall theme. 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 ct-blue">

  <li><a href="#">&laquo;</a></li>

  <li><a href="#">1</a></li>

  <li><a href="#">2</a></li>

  <li class="active"><a href="#">3</a></li>

  <li><a href="#">4</a></li>

  <li><a href="#">5</a></li>

  <li><a href="#">&raquo;</a></li>

</ul>

Progress Bars

The progress bars from Bootstrap hold the same classes and functionality. 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>

Sliders

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>

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:

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

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.

Collapsible Group Item #1

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.

Collapsible Group Item #2

Collapsible Group Item #3

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

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