This website is a demonstration of a one page website. Look how all your information can be displayed on one page. Of course, if needed you can have a website with as many pages as you need.
Easily create nicely looking buttons, which come in different styles.
To apply this component, add the
.uk-button class to an
<button> element. Now you have created a button. Add the
disabled attribute to a
<button> element to disable the button.
<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.
There are several color modifiers available. Just add one of the following classes to apply a different look.
||Emphasizes to identify the primary action in a set of buttons.|
||Indicates a successful or positive action.|
||Indicates a dangerous or negative action.|
||Deemphasizes to look like a link while maintaining button behavior.|
.uk-button-large class to a button to make it smaller or larger.
Full width button
.uk-width-1-1 class from the Grid component and the button will take up full width.
<button class="uk-button uk-width-1-1 uk-margin-small-bottom">...</button> <button class="uk-button uk-width-1-1">...</button>
Defines different styles for progress bars.
The progress bar consists of a background bar and the progress bar itself, indicating the increase.
||This class is used on the parent container to create the background of the progress bar.|
||This class needs to be added to the child element to create the actual progress bar.|
<div class="uk-progress"> <div class="uk-progress-bar" style="width: 40%;">40%</div> </div>
.uk-progress-small class to change the size of the bar.
<div class="uk-progress uk-progress-mini">...</div> <div class="uk-progress uk-progress-small">...</div>
To apply different colors to your progress bars, just add the
<div class="uk-progress uk-progress-success">...</div> <div class="uk-progress uk-progress-warning">...</div> <div class="uk-progress uk-progress-danger">...</div>
To create a striped progress bar, use the
<div class="uk-progress uk-progress-striped">...</div>
You can even animate the striped bar. To do so, just add the
<div class="uk-progress uk-progress-striped uk-active">...</div>
All modifiers of the Progress component can be combined with each other.
<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active">...</div>
Widgetkit is the next generation tool set for Joomla and WordPress. This toolkit is the first of its kind! It provides a simple and user-friendly way to enrich your websites experience with slideshows, galleries, lightboxes and much more.
How it works
Widgetkit basically acts as a platform for all our widgets. It installs as a single component in Joomla or as a plugin in WordPress. The Widgetkit dashboard presents you an overview of all widgets. You can create, edit or delete all widgets and their content in one place. And after you have created the content for your first widget, you can either use a shortcode or a module to display your widget anywhere on your website. In fact, you can do both. Because once have you created a widget, you are able to display it multiple times and reuse it on different parts of your website.
- Available for Joomla and WordPress
- All widgets are fully responsive
- Use shortcodes to show widgets anywhere
- Clean and lightweight code
- Semantic HTML5 markup
- Asset file minification and compression
- Supports touch gestures for mobile devices
- Uses hardware accelerated CSS3 animations
- Built with PHP 5.3+ and the latest jQuery version