# Components Documentation

### Elements description - v1.0.0

- License
- Tutorial
- Buttons
- Checkbox/Radio/Toggle
- Dropdown
- Inputs
- Textarea
- Navigation
- Pagination
- Progress Bars
- Sliders
- Labels
- Nucleo Icons
- Datepicker
- Modals
- Tooltips/Popovers
- Notifications
- Sections
- Changing Colors (SASS)

## License

Currently, on Creative Tim you can get the products with three types of licenses: MIT License, Personal License or Developer License. All the freebies are licensed to MIT License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what license is the best fit for you (Personal License or Developer License). View the rights table and the description for each license on our Official License Page.

## Short Description

Now UI Kit is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates. Now UI Kit is one of the most popular UI Kits online, provided in PSD and Sketch formats by Invision. We wanted to find a way for developers worldwide to benefit from using it. So, in collaboration with Invision, we are launching the HTML version for it!

Now UI Kit will help you create a clean and simple website that is a perfect fit for today's flat design. It is built using the 12 column grid system, with components designed to fit together perfectly. It makes use of bold colours, beautiful typography, clear photography and spacious arrangements.

## Getting Started

The Now Ui Kit is built on top of Bootstrap 4, so you can safely use it on your existing or a new Bootstrap project. No line of code from Bootstrap 4 was changed, so you don't have to worry about undesired effects in your work.

We provide all the necessary CSS resources. To get going, just include `assets/css/now-ui-kit.css` in your HTML template. Your project will get the new look.

The easiest way to start is to use our start-up template where all the files are already included and ready to use.

## File Structure

Once you have downloaded the archive and opened it, you will find the following structure:

    now-ui-kit
    ├── assets
    │   ├── css
    │   │   ├── bootstrap.min.css
    │   │   ├── demo.css
    │   │   └── now-ui-kit.css
    │   ├── img
    │   ├── js
    │   │   ├── core
    │   │   │   ├── bootstrap.min.js
    │   │   │   ├── jquery.3.2.1.min.js
    │   │   │   └── tether.min.js
    │   │   ├── now-ui-kit.js
    │   │   └── plugins
    │   │       ├── bootstrap-datepicker.js
    │   │       ├── bootstrap-switch.js
    │   │       └── nouislider.min.js
    │   ├── scss
    │   │   ├── now-ui-kit
    │   │   └── now-ui-kit.scss
    ├── documentation
    │   ├── template.html
    │   └── tutorial-components.html
    ├── examples
    │   ├── landing-page.html
    │   ├── profile-page.html
    │   └── login-page.html
    ├── index.html

## Restyled Components

Here is the list of Bootstrap 4 components that were restyled in Now UI Kit:

- Buttons
- Inputs
- Select
- Textarea
- Menu
- Dropdown
- Progress Bars
- Navigation Menu
- Pagination
- Labels
- Notifications
- Typography
- Images
- Tooltips
- Popovers
- Modal
- Carousel

## New Components

Besides giving the existing Bootstrap elements a new look, we added new ones, so that the interface and consistent and homogenous.

Going through them, we added:

- Checkboxes
- Radio Buttons
- Sliders
- Toggle Buttons
- Cards with tabs
- Datepicker
- Nucleo Icons

## Buttons

#### Colors

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-neutral">Neutral</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>

#### Styles

We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or plain simple buttons. Let's see some examples:

    <button class="btn btn-primary">Default</button>
    <button class="btn btn-primary btn-round">Round</button>
    <button class="btn btn-primary btn-round">
    	<i class="now-ui-icons ui-2_favourite-286"></i> With Icon
    </button>
    <button class="btn btn-primary btn-icon  btn-icon-mini btn-round">
    	<i class="now-ui-icons ui-2_favourite-28"></i>
    </button>
    <button class="btn btn-primary btn-simple">Simple</button>

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

## Checkboxes

To use the custom checkboxes, you don't need to import any separate Javascript file, just add the below code:

Unchecked
Checked
Disabled unchecked
Disabled checked

    <div class="checkbox">
        <input id="checkbox1" type="checkbox">
        <label for="checkbox1">
            Unchecked
        </label>
    </div>

    <div class="checkbox">
        <input id="checkbox2" type="checkbox" checked="">
        <label for="checkbox2">
            Checked
        </label>
    </div>

    <div class="checkbox">
        <input id="checkbox3" type="checkbox" disabled="">
        <label for="checkbox3">
            Disabled unchecked
        </label>
    </div>

    <div class="checkbox">
        <input id="checkbox4" type="checkbox" checked="" disabled="">
        <label for="checkbox4">
            Disabled checked
        </label>
    </div>

## Radio Buttons

To use the custom radio buttons, you don't need to import any separate Javascript file, just add the below code:

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

    <div class="radio">
        <input type="radio" name="radio1" id="radio1" value="option1">
        <label for="radio1">
            Radio is off
        </label>
    </div>

    <div class="radio">
        <input type="radio" name="radio1" id="radio2" value="option2" checked="">
        <label for="radio2">
            Radio is on
        </label>
    </div>

    <div class="radio">
        <input type="radio" name="radio3" id="radio3" value="option3" disabled="">
        <label for="radio3">
            Disabled radio is off
        </label>
    </div>

    <div class="radio">
        <input type="radio" name="radio4" id="radio4" value="option4" checked="" disabled="">
        <label for="radio4">
            Disabled radio is on
        </label>
    </div>

## Toggle Buttons

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

ON OFF

    <input type="checkbox" name="checkbox" class="bootstrap-switch" checked/>

    <input type="checkbox" name="checkbox" class="bootstrap-switch"
          data-on-label="ON"
          data-off-label="OFF"
    />

## Dropdown

We are very proud to present the dropdown which has a subtle animation. We also thought of another use-case: dropdown with flags.

Regular
Flags

    <div class="dropdown">
        <a href="#pablo" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="navbarDropdownMenuLink1">
        	Regular
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">One more separated link</a>
        </ul>
    </div>

## Inputs

We restyled the Bootstrap input to give it a more flat, minimal look. You can use them with regular labels, states or input groups.

    <div class="col-sm-4">
        <div class="form-group form-group-no-border">
            <input type="text" value="" placeholder="Regular" class="form-control" />
        </div>
    </div>

    <div class="col-sm-4">
        <div class="form-group">
            <input type="email" class="form-control" placeholder="With Border" value="">
        </div>
    </div>

    <div class="col-sm-4">
        <div class="form-group has-success form-group-no-border">
            <input type="text" value="Success" class="form-control form-control-success" />
        </div>
    </div>

    <div class="col-sm-4">
        <div class="form-group has-danger form-group-no-border">
            <input type="email" value="Error Input" class="form-control form-control-danger" />
        </div>
    </div>

    <div class="col-sm-4">
        <div class="input-group form-group-no-border">
            <span class="input-group-addon">
                <i class="fa fa-user-circle"></i>
            </span>
            <input type="text" class="form-control" placeholder="Left Font Awesome Icon">
        </div>
    </div>

    <div class="col-sm-4">
        <div class="input-group form-group-no-border">
            <input type="text" class="form-control" placeholder="Right Nucleo Icon">
            <span class="input-group-addon">
                <i class="now-ui-icons holidays_wolf"></i>
            </span>
        </div>
    </div>

## Textarea

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

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

## 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 like `.nav-pills-primary`, `.nav-pills-info`, `.nav-pills-success`, `.nav-pills-warning`, `.nav-pills-danger`

    <ul class="nav nav-pills nav-pills-primary" role="tablist">
      	<li class="nav-item">
    		<a class="nav-link" data-toggle="tab" href="#active" role="tablist">
    			<i class="fa fa-diamond"></i>
    		</a>
      	</li>
      	<li class="nav-item">
    		<a class="nav-link active" data-toggle="tab" href="#link" role="tablist">
    			<i class="fa fa-thermometer-full"></i>
    		</a>
      	</li>
      	<li class="nav-item">
    		<a class="nav-link" data-toggle="tab" href="#link" role="tablist">
    			<i class="fa fa-suitcase"></i>
    		</a>
      	</li>
        <li class="nav-item">
            <a class="nav-link disabled" data-toggle="tab" href="#disabled" role="tablist">
    		    <i class="fa fa-exclamation"></i>
    	    </a>
        </li>
    </ul>

## 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`, `.pagination-danger`, `.pagination-primary`.

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

We build two classes `.arrow-margin-left` and `.arrow-margin-right`, so once that you will apply these classes pagination will be full-width. To see where to put the mentioned classes please see the example below.

- 1
- 2
- 3
- 4
- 5

    //Pagination simple
    <ul class="pagination pagination-primary">
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
    </ul>

    //Pagination full-width
    <div class="justify-content-center">
        <ul class="pagination pagination-primary">
            <li class="page-item arrow-margin-left">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true"><i class="fa fa-angle-double-left" aria-hidden="true"></i></span>
                </a>
            </li>

            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item active"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>

            <li class="page-item arrow-margin-right">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
                </a>
            </li>
        </ul>
    </div>

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

Default
25%
Primary
60%
Info
60%
Success
60%
Danger
60%
Warning
60%

    <div class="progress-container">
        <span class="progress-badge">Default</span>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
                <span class="progress-value">25%</span>
            </div>
        </div>
    </div>

    <div class="progress-container progress-primary">
        <span class="progress-badge">Primary</span>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="progress-value">60%</span>
            </div>
        </div>
    </div>

    <div class="progress-container progress-info">
        <span class="progress-badge">Info</span>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="progress-value">60%</span>
            </div>
        </div>
    </div>

    <div class="progress-container progress-success">
        <span class="progress-badge">Success</span>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="progress-value">60%</span>
            </div>
        </div>
    </div>

    <div class="progress-container progress-danger">
        <span class="progress-badge">Danger</span>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="progress-value">60%</span>
            </div>
        </div>
    </div>

    <div class="progress-container progress-warning">
        <span class="progress-badge">Warning</span>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="progress-value">60%</span>
            </div>
        </div>
    </div>

## Sliders

We restyled noUIslider, while keeping the design consistent. You can use other classes for colors like `.slider-info`, `.slider-success`, `.slider-warning`, `.slider-danger`, `.slider-primary`. Check also noUISlider Full Documentation.

    <!-- Markup -->
    <div id="sliderRegular" class="slider"></div>
    <div id="sliderDouble" class="slider slider-info"></div>

    <!-- Javascript -->
    $('#sliderRegular').noUiSlider({
    	start: 40,
    	connect: "lower",
    	range: {
    	    min: 0,
    	    max: 100
    	}
    });

    $('#sliderDouble').noUiSlider({
    	start: [20, 60] ,
    	connect: true,
    	range: {
    	    min: 0,
    	    max: 100
    	}
    });

## Labels

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="badge badge-default">Default</span>
    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-success">Success</span>
    <span class="badge badge-info">Info</span>
    <span class="badge badge-warning">Warning</span>
    <span class="badge badge-danger">Danger</span>

## Nucleo Icons

Through most of the examples in this kit, we have used 100 Nucleo Icons for the Now Ui Kit. View all the example icons. If you want more than 2100 icons please check the official Nucleo Icons Pack.

    <i class="now-ui-icons users_single-02"></i>

## Datepicker

The re-styled the Bootstrap datepicker. You can change color for the background using the attribute `data-datepicker-color=" "`. Set the value for this attribute to `primary`.Checkout the Bootstrap Datepicker Full Documentation.

Datepicker Default

Datepicker Primary

    <!-- markup -->
    <input type="text" class="form-control date-picker" value="10/05/2016"/ data-datepicker-color="">

    <!-- javascript -->

    $('.date-picker').each(function(){
        $(this).datepicker({
            templates:{
                leftArrow: '<i class="now-ui-icons arrows-1_minimal-left"></i>',
                rightArrow: '<i class="now-ui-icons arrows-1_minimal-right"></i>'
            }
        }).on('show', function() {
                $('.datepicker').addClass('open');

                datepicker_color = $(this).data('datepicker-color');
                if( datepicker_color.length != 0){
                    $('.datepicker').addClass('datepicker-'+ datepicker_color +'');
                }
            }).on('hide', function() {
                $('.datepicker').removeClass('open');
            });
    });

## Modals

We restyled the classic Bootstrap Modal and gave it a more simple look.

    <!-- 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">&times;</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>

## Tooltips

We restyled the Bootstrap tooltip.

    <!-- 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 Now Ui Kit Concept. You have the option to set color of the background changing the value of attribute `data-color=""` with one of the next values: `popover-info`, `popover-warning`, `popover-danger`, `popover-success`.
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();

## Notifications

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

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

    <div class="alert alert-success" role="alert">
    	<div class="container">
    		<div class="alert-icon">
    			<i class="now-ui-icons ui-2_like"></i>
    		</div>
    		<strong>Well done!</strong> You successfully read this important alert message.
    		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    				<span aria-hidden="true">
    				<i class="now-ui-icons ui-1_simple-remove"></i>
    			</span>
    		</button>
    	</div>
    </div>
    <div class="alert alert-info" role="alert">
    	<div class="container">
    		<div class="alert-icon">
    			<i class="now-ui-icons travel_info"></i>
    		</div>
    		 <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    				<span aria-hidden="true">
    				<i class="now-ui-icons ui-1_simple-remove"></i>
    			</span>
    		</button>
    	</div>
    </div>
    <div class="alert alert-warning" role="alert">
    	<div class="container">
    		<div class="alert-icon">
    			<i class="now-ui-icons ui-1_bell-53"></i>
    		</div>
    		<strong>Warning!</strong> Better check yourself, you're not looking too good.
    		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    			<span aria-hidden="true">
    				<i class="now-ui-icons ui-1_simple-remove"></i>
    			</span>
    		</button>
    	</div>
    </div>
    <div class="alert alert-danger" role="alert">
    	<div class="container">
    		<div class="alert-icon">
    			<i class="now-ui-icons objects_support-17"></i>
    		</div>
    		<strong>Oh snap!</strong> Change a few things up and try submitting again.
    		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    			<span aria-hidden="true">
    				<i class="now-ui-icons ui-1_simple-remove"></i>
    			</span>
    		</button>
    	</div>
    </div>

## Sections

We have created two options for the background of sections. You can go with a black or orange color. We built an attribute named `data-background-color="color"`, so at once you add this attribute to `div` with class `.section` you can access our two background options color. To see how they look, you can check them out below.

## Changing Colors (SASS)

You can change the default colors via variables from SASS:

1. You can find the colors in assets/scss/now-ui-kit/_variables.scss starting with line 72 where is the primary color set: `$brand-primary: $primary-color !default;`.
2. Add the SASS folder from `assets/scss/` to a new project inside Koala Compiler and find the file now-ui-kit.scss, it will be the one in Green.
3. Right click on that file and set the output path, it must be in `assets/css/` so anything that you compile will overwrite the original now-ui-kit.css
4. Press on compile and everything will be done automatically.

#### Modal title

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.