Limitless - Responsive Web Application Kit by Eugene Kopyov

Victoria Baker

Senior developer

Button types

Button, input and link types

Button element

Basic style of <button> element

Input element

Basic style of <input> element

Anchor element

Basic style of <a> element

An anchor

Button styles

Default and custom button styles

Default style

Default button element styling

Custom colors

Using .bg-* color helper classes

Transparent button

Using .ui-button-link class

Left icon position

Left position using primary option

Checkbox control

Checkbox control as a single button

Single checkbox control

Right icon position

Right position using secondary option

Radio control

Radio control as a single button

Single radio control

Icon without text

Display icon only without text

Segmented buttons

Split buttons with dropdown menu

Button sets

Grouped button sets

Button group

Display buttons in a group

Button checkboxes

Display checkboxes as a button set

Toggle 1 Toggle 2 Toggle 3

Button radios

Display radios as a button set

Choice 1 Choice 2 Choice 3

Progress bars

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format. Typically, progress bars use a linear function, such that the advancement of a progress bar is directly proportional to the amount of work that has been completed.

Basic example

This example demonstrates default determinate progress bar. The value is specified in plugin's configuration using value option.

Maximum value

Here progress bar is initialized with maximum value of 1000 and value is set to 400, so progress width is calculated accordingly.

Striped progress bar

This example shows progress bar with progress stripes. To add stripes, use .ui-progressbar-striped class to the bar container

Indeterminate progress

This bar uses motion indicator to show that progress is taking place instead of the filled portion to show the total amount of progress

Animated stripes

In this example progress bar uses animated stripes, that add a motion to the progress along with animated filled amount of progress

Custom label

In this example the progress amount is visually represented with animated percentage values and success message - progress:

Modal dialogs

The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default. Table below contains basic jQuery UI dialog examples. Click Launch button to run dialog examples.

Basic examples
Default modal dialog		Basic modal dialog with `title` and `content` areas. Default examples displays: header - contains a title and a close button and body contains static or dynamic content
Dialog with overlay		Display dialog as a modal using `modal` option. Modal dialogs create an overlay below the dialog but above other page elements
Animated dialog		Animate dialog using `show` and `hide` options and specify optional animation duration and animation effect
Dialog with buttons		Specify which buttons should be displayed on the dialog. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object
Buttons with icons		Dialog buttons support icons with the following options - before and after content, both or icon only. To use, add icon class to `icon` option
Disable resize		Modal dialogs are resizable by default. To turn off resizable feature, set `resizable` option to `false`
Disable close on escape		Specify whether the dialog should close when it has focus and the user presses the escape (ESC) key by setting `closeOnEscape` option to `false`
Disable drag		By default, the dialog is draggable by the title bar. To disable draggins functionality, set `draggable` option to `false`
Append to element		Specify which element the dialog (and overlay, if modal) should be appended to. Here dialog is appended to the panel
With forms
Vertical form		Example of a dialog with default vertical form layout. For better appearance set desired width in the dialog configuration
Horizontal form		Example of a dialog with default horizontal form layout. For better appearance set desired width in the dialog configuration
Inline form		Example of a dialog with default inline form layout. Requires custom width depending on the form width
Dialog widths
Default width		By default dialog has `300px` width, if width is not specified in configuration via `width` option
Custom pixel width		Specify a custom dialog width in pixels using `width` option
Custom percentage width		Specify a custom dialog width in percentages using `width` option
Full width dialog		To display dialog in a full width, set `96%` in `width` option, let's keep `2%` spacing in both sides

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.