Progress

Defines different styles for progress bars.

Usage

The progress bar consists of a background bar and the progress bar itself, indicating the increase.

Class Description
.uk-progress This class is used on the parent container to create the background of the progress bar.
.uk-progress-bar This class needs to be added to the child element to create the actual progress bar.

Example

40%

Markup

<div class="uk-progress">
    <div class="uk-progress-bar" style="width: 40%;">40%</div>
</div>

Size modifiers

Add the .uk-progress-mini or .uk-progress-small class to change the size of the bar.

Example

Markup

<div class="uk-progress uk-progress-mini">...</div>
<div class="uk-progress uk-progress-small">...</div>

Color modifiers

To apply different colors to your progress bars, just add the .uk-progress-success, .uk-progress-warning or .uk-progress-danger class.

Example

Markup

<div class="uk-progress uk-progress-success">...</div>
<div class="uk-progress uk-progress-warning">...</div>
<div class="uk-progress uk-progress-danger">...</div>

Striped

To create a striped progress bar, use the .striped class.

Example

Markup

<div class="uk-progress uk-progress-striped">...</div>

You can even animate the striped bar. To do so, just add the .uk-active class.

Example

Markup

<div class="uk-progress uk-progress-striped uk-active">...</div>

Combinable

All modifiers of the Progress component can be combined with each other.

Example

Markup

<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active">...</div>

Overlay

Create an image overlay, which comes in different styles.

Usage

This component can be applied to an image, an anchor or text. Just add the .uk-overlay to a container element and the .uk-overlay-area class to a <div> to create the overlay itself.

Example

Markup

<!-- This is a div with an overlay -->
<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-area"></div>
</div>

<!-- This is an anchor with an overlay -->
<a class="uk-overlay" href="">
    <img src="" alt="">
    <div class="uk-overlay-area"></div>
</a>

Overlay area content

By default, the overlay displays an icon. But you can also enter your own content, like text or a button. Just add the .uk-overlay-area-content class to a <div> element inside the overlay area.

Example

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-area">
        <div class="uk-overlay-area-content">...</div>
    </div>
</div>

Overlay toggle

To toggle the overlay by hovering the area around it, like a caption for example, just add the .uk-overlay-toggle class.

Example

Caption

Markup

<figure class="uk-overlay-toggle">
    <div class="uk-overlay">
        <img src="" alt="">
        <div class="uk-overlay-area"></div>
    </div>
    <figcaption>...</figcaption>
</figure>

Overlay caption

Add the .uk-overlay-caption class to create an overlay with a text caption.

Example

Some text
Some text

Markup

<!-- This is a div with an overlay caption -->
<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-caption">...</div>
</div>

<!-- This is an anchor with an overlay caption -->
<a class="uk-overlay" href="">
    <img src="" alt="">
    <div class="uk-overlay-caption">...</div>
</a>

Overlay with thumbnails

You can also apply an overlay to a thumbnail from the Thumbnail component. To toggle the overlay by hovering the thumbnail's caption or frame, just add the .uk-overlay-toggle class.

Example
Some text

Markup

<a class="uk-thumbnail uk-overlay-toggle" href="">
    <div class="uk-overlay">
        <img src="" alt="">
        <div class="uk-overlay-caption">...</div>
    </div>
</a>

Thumbnail

Create different thumbnail images, which come in various styles and sizes.

Usage

To apply this component, just add the .uk-thumbnail class to an <img>, <a> or <figure> element.

Example

Markup

<!-- This is an image as a thumbnail -->
<img class="uk-thumbnail" src="" alt="">

<!-- This is an anchor as a thumbnail -->
<a class="uk-thumbnail" href=""><img src="" alt=""></a>

<!-- This is a figure as a thumbnail -->
<figure class="uk-thumbnail"><img src="" alt=""></figure>

Caption

Add the .uk-thumbnail-caption class to a <div> element to apply a text caption under the image.

Example

Caption <div>
Caption <a>
Caption <figure>

Markup

<!-- This is a div as a thumbnail with a caption -->
<div class="uk-thumbnail">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">...</div>
</div>

<!-- This is an anchor as a thumbnail with a caption -->
<a class="uk-thumbnail" href="">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">...</div>
</a>

<!-- This is a figure as a thumbnail with a caption -->
<figure class="uk-thumbnail">
    <img src="" alt="">
    <figcaption class="uk-thumbnail-caption">...</figcaption>
</figure>

Size modifiers

Apply the .uk-thumbnail-large, .uk-thumbnail-medium, .uk-thumbnail-small or .uk-thumbnail-mini classes to resize images. The Base component is required to make the images responsive by default.

Example

.uk-thumbnail-large
.uk-thumbnail-medium
.uk-thumbnail-small
.uk-thumbnail-mini

Markup

<div class="uk-thumbnail uk-thumbnail-large">...</div>
<div class="uk-thumbnail uk-thumbnail-medium">...</div>
<div class="uk-thumbnail uk-thumbnail-small">...</div>
<div class="uk-thumbnail uk-thumbnail-mini">...</div>

You can even scale a thumbnail beyond its proper size, so that it extends to the full width of its parent element. Just add the .uk-thumbnail-expand class.

Example

.uk-thumbnail-expand

Markup

<div class="uk-thumbnail uk-thumbnail-expand">...</div>

Grid

You can easily create a grid with thumbnails by using the Grid component.

Example

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
    <div class="uk-width-medium-1-2">
        <div class="uk-grid">
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
        </div>
</div>

Badge

Easlily create nicely looking badges to label and highlight your content.

Usage

To create a badge, just add the .uk-badge class to a <div> or <span> element.

Example

Info New Free

Markup

<div class="uk-badge">...</div>

Modifiers

To display badges in a different style, just add modifier classes to the .uk-badge class. These modifiers can be combined with each other.

Notification

Add the .uk-badge-notification class to indicate a notification, typically it is used with numbers.

Example

1 2 3 10 100

Markup

<div class="uk-badge uk-badge-notification">...</div>

Color Modifier

Add the .uk-badge-success, .uk-badge-warning or .uk-badge-danger class for additional colors.

Example

Success Warning Danger

1 10 1 10 1 10

Markup

<div class="uk-badge uk-badge-success">...</div>
<div class="uk-badge uk-badge-warning">...</div>
<div class="uk-badge uk-badge-danger">...</div>

Button

Easily create nicely looking buttons, which come in different styles.

Usage

To apply this component, add the .uk-button class to an <a> or <button> element. Now you have created a button. Add the disabled attribute to a <button> element to disable the button.

Example

Link

Markup

<a class="uk-button" href="">...</a>
<button class="uk-button" type="button">...</button>
<button class="uk-button" type="button" disabled>...</button>

NOTE If you are displaying a number of buttons in a row, you can add a top margin to them, when they stack on smaller viewports. Just add the data-uk-margin attribute from the Utility component to their parent element.

Color modifiers

There are several color modifiers available. Just add one of the following classes to apply a different look.

Example Class Description
.uk-button-primary Emphasizes to identify the primary action in a set of buttons.
.uk-button-success Indicates a successful or positive action.
.uk-button-danger Indicates a dangerous or negative action.
Link .uk-button-link Deemphasizes to look like a link while maintaining button behavior.

Size modifiers

Add the .uk-button-mini, .uk-button-small or .uk-button-large class to a button to make it smaller or larger.

Full width button

Add the .uk-width-1-1 class from the Grid component and the button will take up full width.

Example

Markup

<button class="uk-button uk-width-1-1 uk-margin-small-bottom">...</button>
<button class="uk-button uk-width-1-1">...</button>

Button group

To create a button group, add the .uk-button-group class to a <div> element around the buttons. That's it! No further markup needed.

Example

Link
Link
Link
Link

Markup

<div class="uk-button-group">
    <a class="uk-button" href="">...</a>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

JavaScript

You can toggle button states via JavaScript. Just add the data attibute data-uk-button.

Example

Markup

<button class="uk-button uk-button-primary" type="button" data-uk-button>Button</button>

Checkbox buttons

Toggle between a group of buttons like a checkbox by wrapping a <div> element with the data attribute data-uk-button-checkbox around them. This can also be applied to a button group.

Example

Markup

<div data-uk-button-checkbox>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

Radio buttons

Toggle between a group of buttons, like radio buttons, by wrapping a div element that uses data-uk-button-radio around them. This can also be applied to a button group.

Example

Markup

<div data-uk-button-radio>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

Button with dropdowns

A button can be used to trigger a dropdown menu from the Dropdown component. Just add the .uk-button-dropdown class and the data-uk-dropdown attribute to a <div> element that contains the button and the dropdown itself.

Example

Markup

<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- This is the button toggling the dropdown -->
    <button class="uk-button">...</button>

    <!-- This is the dropdown -->
    <div class="uk-dropdown uk-dropdown-small">
        <ul class="uk-nav uk-nav-dropdown">
            <li><a href="">...</a></li>
            <li><a href="">...</a></li>
        </ul>
    </div>

</div>

Button group with dropdowns

Use button groups to split buttons into a standard action on the left and a dropdown toggle on the right. Just wrap a <div> element around the button and the dropdown and add the data-uk-dropdown="{mode:'click'}" attribute. Of course, a dropdown can also be applied to a button within a button group.

Example

Markup

<div class="uk-button-group">

    <!-- This is a button -->
    <button class="uk-button">...</button>

    <!-- This is the container enabling the JavaScript -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- This is the button toggling the dropdown -->
        <a href="" class="uk-button">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
            </ul>
        </div>

    </div>
</div>

More Articles ...

Chameleon I.T are a client focused consultancy seeking to deliver IT efficiency gains through software and consulting solutions.

These solutions seek to take existing systems and optimise them in conjunction with adding cutting edge technologies to complement.

 

Map

Contact us

Phone:
01727 831 383
Email:
info@chameleonit.co.uk
Mon-Fri:
9am to 5pm

Most Read

Search