Hive theme design patterns 4.6

The purpose of this guide is to document UI elements used within this theme in order to streamline development, avoid conflicts and inconsistencies, and as a reference for admin theme authors and plugin authors.

Switch to RTL layout

Colourways
Columns and grids
Headings
Paragraphs
Text-level semantics
Inline text labels
Alert boxes
Block text-level semantics
Embedded content
Lists
Tables
Progress meters
Summary/details boxes
Forms
Buttons
Edit panes
jQuery UI widgets
Miscellaneous

Colourways

Neutral

background

background-box

gradient-from

gradient-to

border

gradient-border

text-footnote

text

Accent

highlight-box

strong-highlight-box

accent-gradient-from

accent-gradient-to

Interaction

selected

selecting

link-focus

link-hover

link

link-visited

State

success-background

success-text

warning-background

warning-text

error-background

error-text

info-background

info-text

Columns and grids

Page layout columns new v4.6

Responsive page layout grid.

Code:

<div class="txp-layout">

    <div class="txp-layout-1col">...Opt1: 1col - content here...</div>

    <div class="txp-layout-2col">...Opt2: 2col cell1 - content here...</div>
    <div class="txp-layout-2col">...Opt2: 2col cell2 - content here...</div>

    <div class="txp-layout-4col">...Opt3: 4col cell1 - content here...</div>
    <div class="txp-layout-4col">...Opt3: 4col cell2 - content here...</div>
    <div class="txp-layout-4col">...Opt3: 4col cell3 - content here...</div>
    <div class="txp-layout-4col">...Opt3: 4col cell4 - content here...</div>

    <div class="txp-layout-4col-2span">...Opt4: 4col cell1and2 - content here...</div>
    <div class="txp-layout-4col">...Opt4: 4col cell3 - content here...</div>
    <div class="txp-layout-4col">...Opt4: 4col cell4 - content here...</div>

    <div class="txp-layout-4col-alt">...Opt5: 4col cell1 - content here...</div>
    <div class="txp-layout-4col-2span">...Opt5: 4col cell2and3 - content here...</div>
    <div class="txp-layout-4col-alt">...Opt5: 4col cell4 - content here...</div>

    <div class="txp-layout-4col">...Opt6: 4col cell1 - content here...</div>
    <div class="txp-layout-4col">...Opt6: 4col cell2 - content here...</div>
    <div class="txp-layout-4col-2span">...Opt6: 4col cell3and4 - content here...</div>

    <div class="txp-layout-4col-3span">...Opt7: 4col cell1and2and3 - content here...</div>
    <div class="txp-layout-4col-alt">...Opt7: 4col cell4 - content here...</div>

    <div class="txp-layout-4col-alt">...Opt8: 4col cell1 - content here...</div>
    <div class="txp-layout-4col-3span">...Opt8: 4col cell2and3and4 - content here...</div>

</div>

Example:

Opt1: 1col

Opt2: 2col cell1

Opt2: 2col cell2

Opt3: 4col cell1

Opt3: 5col cell2

Opt3: 6col cell3

Opt3: 7col cell4

Opt4: 4col cell1and2

Opt4: 4col cell3

Opt4: 4col cell4

Opt5: 4col cell1

Opt5: 4col cell2and3

Opt5: 4col cell4

Opt6: 4col cell1

Opt6: 4col cell2

Opt6: 4col cell3and4

Opt7: 4col cell1and2and3

Opt7: 4col cell4

Opt8: 4col cell1

Opt8: 4col cell2and3and4

Text columns changed v4.6

This is the standard column width for any text-based content in the admin-side, such as a plugin help page. Larger than the golden ratio at full width spans but a good trade-off between readability and economic use of screen estate. Please note this replaces the old .plugin-help 4.4.x and .text-column 4.5 classes.

Code:

<div class="txp-layout-textbox">
    <p>...content here...</p>
</div>

Example:

Text column (independent of grid columns)

Inline grids changed v4.6

Flexbox inline grid content layouts.

Code:

<div class="txp-grid">
    <div class="txp-grid-cell" [width, see notes]>
        <p>Grid item 1</p>
    </div><div class="txp-grid-cell" [width, see notes]>
        <p>Grid item 2</p>
    </div><div class="txp-grid-cell highlight" [width, see notes]>
        <p>Grid item 3</p>
    </div><div class="txp-grid-cell" [width, see notes]>
        <p>Grid item 4</p>
    </div>
    ...etc...
</div>

Example:

Lorem ipsum dolor sit amet, quo epicuri volutpat no.

Longer text item example to show how Flexbox stretches vertically to fill the addtional area

Lorem ipsum dolor sit amet, quo epicuri volutpat no.

Short text item.

Lorem ipsum dolor sit amet, quo epicuri volutpat no.

Notes:

You should define a specific width for each .txp-grid-cell, either as a class attribute or style attribute, otherwise the cell width stretches to the content within it.

Headings changed v4.5

Code:

<h1 class="txp-heading">

Example:

h1 Heading 1 h1 Heading 1 h1 Heading 1 h1 Heading 1 h1 heading 1

Notes:

Top level headings in the Textpattern admin area, we advise adding the class="txp-heading" attribute which allows advanced users to optionally hide headings throughout the admin area.

Code:

<h2>

Example:

h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2

Code:

<h3>

Example:

h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3

Paragraphs

Code:

<p>

Example:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.

Text-level semantics

Anchor

Code:

<a>

Example:

The a element example

Abbreviation

Code:

<abbr>

Example:

The abbr element and abbr element with title examples

Bold (non-semantic)

Code:

<b>

Example:

The b element example

Citation

Code:

<cite>

Example:

The cite element example

Code

Code:

<code>

Example:

The code element example

Deleted

Code:

<del>

Example:

The ~~del element~~ example

Definition

Code:

<dfn>

Example:

The dfn element and dfn element with title examples

Emphasis

Code:

<em>

Example:

The em element example

Italic (non-semantic)

Code:

<i>

Example:

The i element example

Inserted

Code:

<ins>

Example:

The ins element example

Keyboard Input

Code:

<kbd>

Example:

The kbd element example

Mark

Code:

<mark>

Example:

The mark element example

Quote

Code:

<q>

Example:

The q element inside a q element

Strikethrough

Code:

<s>

Example:

The ~~s element~~ example

Sample

Code:

<samp>

Example:

The samp element example

Small

Code:

<small>

Example:

The small element example

Span

Code:

<span>

Example:

The span element example

Strong

Code:

<strong>

Example:

The strong element example

Subscript

Code:

<sub>

Example:

The _{sub element} example

Superscript

Code:

<sup>

Example:

The ^{sup element} example

Underline

Code:

<u>

Example:

The u element example

Variable

Code:

<var>

Example:

The var element example

Inline text labels

Safe new v4.5

Code:

<span class="success">...message...</span>

<strong class="success">...message...</strong>

Example:

This is an example of a span success label and a strong success label.

Warning new v4.5

Code:

<span class="warning">...message...</span>

<strong class="warning">...message...</strong>

Example:

This is an example of a span warning label and a strong warning label.

Danger new v4.5

Code:

<span class="error">...message...</span>

<strong class="error">...message...</strong>

Example:

This is an example of a span error label and a strong error label.

Information (no semantic meaning) new v4.5

Code:

<span class="information">...message...</span>

<strong class="information">...message...</strong>

Example:

This is an example of a span information label and a strong information label.

Alert boxes

System message: success new v4.5

Code:

<p class="alert-block success"><span class="ui-icon ui-icon-check"></span> ...message...</p>

Example:

Success: a suitable success message goes here.

System message: warning changed v4.5

Code:

<p class="alert-block warning"><span class="ui-icon ui-icon-alert"></span> ...message...</p>

Example:

Warning: a suitable warning message goes here.

System message: error new v4.5

Code:

<p class="alert-block error"><span class="ui-icon ui-icon-alert"></span> ...message...</p>

Example:

Error: a suitable error message goes here.

System message: information (no semantic meaning) new v4.5

Code:

<p class="alert-block information"><span class="ui-icon ui-icon-info"></span> ...message...</p>

Example:

Information: a suitable information message goes here.

Block text-level semantics

Pre-formatted text blocks

Code:

<pre dir="auto">...content...</pre>

Example:

This is an example of a non-code
    pre-formatted text block
        preserving white spaces

Notes:

Changed at 4.6: Added dir="auto" attribute, which allows the browser to determine whether text direction should be LTR or RTL depending on content.

Pre-formatted code blocks

Code:

<pre dir="ltr"><code>...content...</code></pre>

Example:

<div id="messagepane" role="alert">
    <span class="success" id="message">Article posted. <a class="close" title="Close" aria-label="Close">&<span role="presentation">times;</span></a></span>
</div>

Notes:

Changed at 4.6: Added dir="ltr" attribute, which ensures computer code text direction is LTR.

Pre-formatted code blocks with syntax highlighting new v4.5

Uses Prism to provide syntax highlighting. We include support for the following languages:

class="language-markup" (HTML)
class="language-css" (CSS)
class="language-clike" (C-like)
class="language-javascript" (JavaScript)
class="language-json" (JSON)
class="language-php" (PHP)
class="language-markdown" (Markdown)
class="language-textile" (Textile)

Code:

<pre dir="ltr"><code class="language-markup">...content...</code></pre>

Example:

<div id="messagepane" role="alert">
    <span class="success" id="message">Article posted. <a class="close" title="Close" aria-label="Close">&<span role="presentation">times;</span></a></span>
</div>

Embedded content

Image (unstyled)

Code:

<img src="" alt="">

Example:

Alt text

Image (styled) new v4.5

Code:

<img class="content-image" src="" alt="">

Example:

Alt text

Image (styled) with link new v4.5

Code:

<a href="" title=""><img class="content-image" src="" alt=""></a>

Example:

Left ranged image new v4.5

Code:

<img class="align-left" src="" alt="">

Example:

Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

Right ranged image new v4.5

Code:

<img class="align-right" src="" alt="">

Example:

Centred image new v4.5

Code:

<img class="align-center" src="" alt="">

Example:

Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. 128x128px placeholder Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet.

Lists

Ordered

Code:

<ol>

Example:

this is an example
of a numbered
(ordered) list
1. and a second level
2. numbered list example

Unordered

Code:

<ul>

Example:

this is an example
of a bulletpoint
(unordered) list
- and a second level
- bulletpoint list example

Plain

Code:

<ul class="plain-list">

Example:

this is an example
of a plain
(unstyled) list
- and a second level
- bulletpoint list example

Description

Code:

<dl>

Example:

This is a definition list term 1

Definition of term 1 here

Another definition of term 1

A sub term: With; Subs

Tables changed v4.6

Code:

<div class="txp-listtables">
    <table class="txp-list">
        <thead>
            <tr>
                <th class="desc" scope="col"><a href="">...</a></th>
                <th scope="col">...</th>
                <th scope="col">...</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="3">...</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">...</th>
                <td>...</td>
                <td>...</td>
            </tr>
            <tr>
                <th scope="row">...</th>
                <td>...</td>
                <td>...</td>
            </tr>
            <tr class="highlight">
                <th scope="row">...</th>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

Example:

Planet	Population	Government
This is the tfoot (optional)
Diso	4.1 B	Democracy
Lave	2.5 B	Dictatorship
Leesti	5.0 B	Corporate State
Reorte	3.1 B	Dictatorship
Zaonce	5.3 B	Corporate State

Notes:

Changed at 4.6: Added scope attribute to columns and rows. Each <tbody> row now has a <th> cell.

Progress meters new v4.5

Code:

<aside class="progress-meter">
    <p class="txp-accessibility">There are 4 steps to this installation process:</p>
    <ol>
        <li class="active"><strong>Add database details</strong></li>
        <li>Add config.php file</li>
        <li>Create database</li>
        <li>Go!</li>
    </ol>
</aside>

Example:

Summary/details boxes changed v4.6

Collapsible

Code:

<section class="txp-details" id="regionname1_group" aria-labelledby="regionname1_group-label">
    <h3 class="txp-summary expanded" id="regionname1_group-label"><a href="#name-of-details" role="button" aria-controls="name-of-details" aria-pressed="true">Heading (lever)</a></h3>
    <div class="toggle" id="name-of-details" role="group" aria-expanded="true">
        ...content...
    </div>
</section>

Example:

Heading (lever)

Standard paragraph text within a collapsible details box.

Unordered list
items within
a collapsible details box

Ordered list
items within
a collapsible details box

Plain (unstyled) list
items within
a collapsible details box

Notes:

The WAI-ARIA attribute states and expanded class are managed via JavaScript. May eventually be changed to use HTML5.1 <details> and <summary> tags when browser support is better.

Non-collapsible

Code:

<section class="txp-details" id="regionname1_group" aria-labelledby="regionname1_group-label">
    <h3 id="regionname1_group-label">Heading</h3>
    <div role="group">
        ...content...
    </div>
</section>

Example:

Heading

Standard paragraph text within a non-collapsible details box.

Unordered list
items within
a non-collapsible details box

Ordered list
items within
a non-collapsible details box

Plain (unstyled) list
items within
a non-collapsible details box

Notes:

This replaces the <fieldset> boxes used in Textpattern v4.5 and below.

Forms

Textareas

Code:

<textarea id="" name="">

Example:

Textarea

Text fields large new v4.5

Code:

<input class="input-large" id="" name="" size="64" type="text">

Example:

Text (large) with pophelp i

Text fields standard

Code:

<input id="" name="" type="text" size="32">

Example:

Text (standard) with pophelp i

Text fields medium new v4.5

Code:

<input class="input-medium" id="" name="" type="text" size="16">

Example:

Text medium

Text fields small new v4.5

Code:

<input class="input-small" id="" name="" type="text" size="8">

Example:

Text (small)

Text fields extra small new v4.5

Code:

<input class="input-xsmall" id="" name="" type="text" size="4">

Example:

Text (extra small)

Password fields

Code:

<input id="" name="" type="password" size="32">

Example:

Password

Date fields

Code:

<div class="txp-form-field">
    <div class="txp-form-field-label">Date</div>
    <div class="txp-form-field-value">
        <input class="input-year" id="year" name="year" type="text" size="4" maxlength="4" title="Year" placeholder="yyyy">
        <span role="separator">/</span>
        <input class="input-month" id="month" name="month" type="text" size="2" maxlength="2" title="Month" placeholder="mm">
        <span role="separator">/</span>
        <input class="input-day" id="day" name="day" type="text" size="2" maxlength="2" title="Day" placeholder="dd">
    </div>
</div>

Example:

Date

/ /

Time fields

Code:

<div class="txp-form-field">
    <div class="txp-form-field-label">Time</div>
    <div class="txp-form-field-value">
        <input class="input-hour" id="hour" name="hour" type="text" size="2" maxlength="2" title="Hour" placeholder="hh">
        <span role="separator">:</span>
        <input class="input-minute" id="minute" name="minute" type="text" size="2" maxlength="2" title="Minute" placeholder="mm">
        <span role="separator">:</span>
        <input class="input-second" id="second" name="second" type="text" size="2" maxlength="2" title="Second" placeholder="ss">
    </div>
</div>

Example:

Time

: :

Checkboxes

Code:

<input type="checkbox" id="test_checkbox_1" name="test_checkbox_1">
<label for="test_checkbox_1">Test checkbox 1</label>

Example:

Test checkbox 1 Test checkbox 2 Test checkbox 3 (disabled)

Radiobuttons

Code:

<input type="radio" id="test_radio_1" name="test_radio_group">
<label for="test_radio_1">Test radio 1</label>

Example:

Test radio 1 Test radio 2 Test radio 3 (disabled)

Selects

Single select

Code:

<select id="" name="">
    <optgroup label="Group 1">
        <option value="1">Some text goes here</option>
        <option value="2">Another choice could be here</option>
        <option value="3">Yet another item to be chosen</option>
    </optgroup>
</select>

Example:

Select drop-down

Multiple select

Code:

<select id="" name="" multiple="multiple" size="10">
    <optgroup label="Group 1">
        <option value="1">Some text goes here</option>
        <option value="2">Another choice could be here</option>
        <option value="3">Yet another item to be chosen</option>
    </optgroup>
</select>

Example:

Select multiple

Disabled form elements

Code:

<select disabled>
<input type="text" disabled>
<input type="button" disabled>

Example:

Select drop-down

Buttons

Primary and standard buttons

Code:

<input class="publish" type="submit" value="">
<input type="submit" value="Input Submit">
<input type="button" value="Input Button">
<button>Button Tag</button>
<a class="navlink" href="">Link (navlink)</a>

Example:

Link (navlink)

Delete buttons changed v4.6

Code:

<button class="destroy" type="submit" title="Delete">
    <span class="ui-icon ui-icon-close">Delete</span>
</button>

Example:

Notes:

Changed at 4.6: Using button tag.

Button sets

Code:

<p class="nav-tertiary">
    <a class="navlink-active" href="#">Page 1</a><a class="navlink" href="#">Page 2</a><a class="navlink" href="#">Page 3</a>
</p>

Example:

Page 1 Page 2 Page 3

Edit panes changed v4.6

Code:

<form class="txp-edit" method="post" action="#">
    <h2>Edit panel title</h2>

    <div class="txp-form-field prefs-example-1">
        <div class="txp-form-field-label"><label for="prefs_example_1">Long text</label></div>
        <div class="txp-form-field-value"><input id="prefs_example_1" name="prefs_example_1" type="text" size="32"></div>
    </div>
    <div class="txp-form-field prefs-example-2">
        <div class="txp-form-field-label"><label for="prefs_example_2">Medium text</label></div>
        <div class="txp-form-field-value"><input class="input-medium" id="prefs_example_2" name="prefs_example_2" type="text" size="8"></div>
    </div>
    <div class="txp-form-field prefs-example-3">
        <div class="txp-form-field-label"><label for="prefs_example_3">Select</label></div>
        <div class="txp-form-field-value">
            <select id="prefs_example_3" name="prefs_example_3">
                <option value="" selected> </option>
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
            </select>
        </div>
    </div>

    <div class="txp-form-field prefs-example-4">
        <div class="txp-form-field-label"><label for="prefs_example_4">Select multiple</label></div>
        <div class="txp-form-field-value">
            <select id="prefs_example_4" name="prefs_example_4" multiple="multiple" size="3">
                <option value="1">Some text goes here</option>
                <option value="2">Another choice could be here</option>
                <option value="3">Yet another item to be chosen</option>
                <option value="4">Yep, another item here</option>
                <option value="5">Finally, some text goes here</option>
            </select>
        </div>
    </div>
    <div class="txp-form-field prefs-example-5">
        <div class="txp-form-field-label">Radio buttons</div>
        <div class="txp-form-field-value">
            <input class="radio active" id="prefs_example_5_0" name="prefs_example_5" type="radio" value="0" checked>
            <label for="prefs_example_5_0">No</label>
            <input class="radio" id="prefs_example_5_1" name="prefs_example_5" type="radio" value="1">
            <label for="prefs_example_5_1">Yes</label>
        </div>
    </div>
    <div class="txp-form-field txp-form-field-textarea prefs-example-6">
        <div class="txp-form-field-label"><label for="prefs_example_6">Textarea</label></div>
        <div class="txp-form-field-value"><textarea id="prefs_example_6" name="prefs_example_6" cols="64" rows="4"></textarea></div>
    </div>
    ...etc...
    <p class="txp-edit-actions">
        <a class="txp-button" href="#">Cancel</a>
        <input class="publish" type="submit" value="Save">
    </p>

</form>

Example:

Edit panel title

Long text

Medium text

Select

Select multiple

Radio buttons

No Yes

Textarea

Cancel

jQuery UI widgets new v4.6

Collection of all the available jQuery UI widgets.

Interactions: Draggable

Drag me around!

Full documentation

Interactions: Resizable

Resize me!

Full documentation

Interactions: Selectable

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Full documentation

Interactions: Sortable

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Full documentation

Widgets: Accordion

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

List item one
List item two
List item three

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Full documentation

Widgets: Autocomplete

Countries

Full documentation

Widgets: Button

Default functionality buttons

<a> button

Icon buttons

<a> icon only <a> icon on the left <a> icon on the right <a> two icons

Full documentation

Widgets: Checkboxradio

Checkboxes (and without icons)

Dogs Cats Ferrets

Radiobuttons

Yes Maybe No

Full documentation

Widgets: Controlgroup

Controlgroup horizontal (checkboxes and select)

B I U

Controlgroup horizontal (radiobuttons)

Off On

Controlgroup vertical

Favourite drink

Tea Coffee Tequila

Add milk Add ice Add vodka

Full documentation

Widgets: Datepicker

Full documentation

Widgets: Dialog

Open basic dialog…

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

Open modal dialog…

Full documentation

Note: Currently jQuery UI does not support horizontal menus.

Full documentation

Widgets: Progressbar

Determinate value

Animate to random number

Indeterminate value

Full documentation

Widgets: Selectmenu

Selectmenu - standard

Select a speed

Selectmenu - with option groups

Select a file

Selectmenu - with disabled options

Select a number

Selectmenu - with disabled optgroup

Select a file 2

Full documentation

Widgets: Slider

Slider - horizontal

Slider - vertical

88 77 55 33 40 45 70

Full documentation

Widgets: Spinner

Select a value:

Full documentation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget diam nec urna hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ligula non nulla cursus volutpat.

Aliquam malesuada felis nec turpis auctor interdum. Cras et lobortis dolor. Nam sodales, dolor eu cursus faucibus, justo leo vestibulum turpis, id malesuada erat ipsum et leo. Integer id aliquam augue. Proin quis risus magna. Vivamus eget accumsan mauris. Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Cras dignissim tincidunt molestie. Suspendisse rutrum dignissim tortor quis mollis. Sed tempor feugiat ligula in imperdiet. Quisque molestie viverra erat in adipiscing.

Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.

Mauris tempor urna non quam tincidunt aliquam. Proin venenatis metus eu purus interdum a vehicula ipsum sollicitudin. Mauris sed dignissim odio. Nam id odio sed diam dapibus dignissim. Nulla vestibulum nisl ac magna scelerisque adipiscing. Nam pellentesque sapien vulputate nisi scelerisque ut vehicula orci luctus. Sed rhoncus tempor metus vitae egestas. Proin pharetra tristique justo ac rutrum. Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus.

Full documentation

Here is an example of a link with a tooltip, mouseover to reveal it.

Full documentation

Styles: Icons

Additions to standard jQuery UI icon set

Miscellaneous

Accessibility text new v4.6

Code:

<p class="txp-accessibility">...content...</p>

Notes:

Accessibility text is hidden from the page but available to screen readers as an aid to those with visual impairments. This is accomplished via CSS visibility: hidden; not via display: hidden; (which would hide the text from most screen readers too).

AJAX spinner new v4.5

Code:

<span class="spinner"></span>

Example:

Disabled non-form elements new v4.5

Code:

<p class="disabled" aria-disabled="true">...message...</p>

Example:

This is an example of an element greyed out via a .disabled class.

Notes:

This class only gives a visual impression of disabled elements, any links and/or form elements therein would still be active and clickable. To truly disable form elements use the proper disabled attribute instead, see the forms section for more information.