Compass

Please wait...

  • Design Team

  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Alexander 6:12 Hello, John
  • 6:15 Hi, Alexander
    How are you!
  • 6:16 There are many variations of passages of Lorem Ipsum available
  • Elizabeth 6:25 Hi, Alexander,
    John
    What are you doing?
  • Michael 6:28 I would love to join the team.
  • 7:02 Hello,
    Michael

UI Kit Welcome to Compass

Typography

Header 1The Life of Now UI Kit

Header 2The Life of Now UI Kit

Header 3The Life of Now UI Kit

Header 4The Life of Now UI Kit

Header 5The Life of Now UI Kit
Header 6The Life of Now UI Kit

Paragraph I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

Quote

"I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."

- Noaa

Muted Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Primary Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Info Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Success Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Warning Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Danger Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Small Tag Header with small subtitle
Use "small" tag for the headers

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>

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

Buttons 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="zmdi zmdi-favorite-outline6"></i> With Icon
</button>
<button class="btn btn-primary btn-icon  btn-icon-mini btn-round">
<i class="zmdi zmdi-favorite-outline"></i>
</button>
<button class="btn btn-primary btn-simple">Simple</button>

Checkboxes

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

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

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

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">
    <input type="text" value="" placeholder="Regular" class="form-control">
</div>
</div>

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

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

<div class="col-sm-4">
<div class="input-group">
    <span class="input-group-addon">
        <i class="zmdi zmdi-account-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">
    <input type="text" class="form-control" placeholder="Right Nucleo Icon">
    <span class="input-group-addon">
        <i class="zmdi zmdi-account"></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="zmdi zmdi-favorite"></i>
        </a>
        </li>
        <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#link" role="tablist">
            <i class="zmdi zmdi-library"></i>
        </a>
        </li>
        <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#link" role="tablist">
            <i class="zmdi zmdi-lamp"></i>
        </a>
        </li>
    <li class="nav-item">
        <a class="nav-link disabled" data-toggle="tab" href="#disabled" role="tablist">
            <i class="zmdi zmdi-lock"></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.

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.

//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="zmdi zmdi-chevron-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="zmdi zmdi-chevron-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>

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>

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

<div class="alert alert-success" role="alert">
<div class="container">
    <div class="alert-icon">
        <i class="zmdi zmdi-thumb-up"></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="zmdi zmdi-close"></i>
        </span>
    </button>
</div>
</div>
<div class="alert alert-info" role="alert">
<div class="container">
    <div class="alert-icon">
        <i class="zmdi zmdi-alert-circle-o"></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="zmdi zmdi-close"></i>
        </span>
    </button>
</div>
</div>
<div class="alert alert-warning" role="alert">
<div class="container">
    <div class="alert-icon">
        <i class="zmdi zmdi-notifications"></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="zmdi zmdi-close"></i>
        </span>
    </button>
</div>
</div>
<div class="alert alert-danger" role="alert">
<div class="container">
    <div class="alert-icon">
        <i class="zmdi zmdi-block"></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="zmdi zmdi-close"></i>
        </span>
    </button>
</div>
</div>

Images

Image

Rounded Image

Circle Image

Circle Image

Raised

Raised Image

Circle Raised

Thumbnail Image