The following classes are added to the body element so that you can easily add conditional code to provide a better user experience in all devices.

Some classes are also added to the body based on the screen's dimensions. The pixel ranges can be overrided by setting the appropriate data attributes. The retina-s class is added in retina screens.

The width is indicated with these classes: mobile-s / tablet-s / desktop-s / fat-s

The screen height is represented by the following classes: minimal-s / small-s / short-s / average-s / tall-s

The classes portrait-s or landscape-s are based on the device's ratio.

UXF also provides an easy way to check what browser and OS is being used. This information is added to the body element both as classes and as data attributes.

This element adds autocomplete to a text field using a data source. It supports all text field data attributes.

<div class="drop-field">
    <ul class="data-source" data-type="countries"></ul>
</div>

To select a value programmatically use the set function like in the following example:

jQuery(".drop-field").uxdropfield("set", { value: "Portugal", valueLogic: "PT" });

This component allows the user to select a value from several options. It can be used as a menu as when expanded it will trigger the hide event on all active menus (with the selector .menu.active). This also means that only one dropdown will be expanded at the same time.

<ul class="drop-down drop-down-form" data-name="Select one">
    <li data-value="student">Student</li>
    <li data-value="software-developer">Software Developer</li>
    <li data-value="mechanical-engineer">Mechanical Engineer</li>
    <li data-value="doctor">Doctor</li>
</ul>

<div class="drop-tag" data-title="I am a:">
    <ul class="items">
        <li>Student</li>
        <li>Software Developer</li>
        <li>Mechanical Engineer</li>
        <li>Doctor</li>
    </ul>
</div>

<div class="drop-list">
    <div class="drop-item">Select One</div>
    <ul class="drop-options">
        <li data-value="student">Student</li>
        <li data-value="software-developer">Software Developer</li>
        <li data-value="mechanical-engineer">Mechanical Engineer</li>
        <li data-value="doctor">Doctor</li>
    </ul>
</div>

With this component you can select tags retrieved from a data source with autocomplete.

<div class="tag-field" data-no_duplicates="true">
    <ul class="data-source" data-type="countries"></ul>
</div>

To have a <select> element consume a data source use this component.

<div class="select-field" data-value="name">
    <select class="text-field"></select>
    <ul class="data-source" data-type="local">
        <li><span name="name">User 1</span></li>
        <li><span name="name">User 2</span></li>
        <li><span name="name">User 3</span></li>
    </ul>
</div>

May be used to list dynamic content in a table like environment. Queries a data source and has support for filtering with a text field and drop fields. You can also trigger the update event to refresh the filter.

<ul class="filter" data-number_records="2">
    <ul class="data-source" data-type="local">
        <li><span name="name">User 1</span></li>
        <li><span name="name">User 2</span></li>
        <li><span name="name">User 3</span></li>
        <li><span name="name">User 4</span></li>
        <li><span name="name">User 5</span></li>
        <li><span name="name">User 6</span></li>
    </ul>
    <li class="template">
        <div class="name">
            <a>%[name]</a>
        </div>
    </li>
    <div class="filter-no-results quote">
        No results found
    </div>
    <div class="filter-more">
        <span class="button more">Load more</span>
        <span class="button load">Loading</span>
    </div>
</ul>

The following classes are added to the component during it's lifecycle:

Component to list items with support for ordering and selection.

<ul class="select-list" data-order="true">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

This component adds Data Source support to Select List.

<div class="source-list" data-order="true">
    <ul class="data-source" data-type="countries"></ul>
</div>

This element may be used to move or select elements from one list to other. Uses Source Lists as child elements.

<div class="cross-list" data-source="From" data-target="To" data-order="true">
    <ul class="data-source" data-type="countries"></ul>
</div>

This is the basic structure for providing information for the various element including drop field and filter.

<ul class="data-source" data-type="countries"></ul>

When developing web applications is mandatory to have a good set of buttons to control the application. The buttons provided allow you to raise events, submit forms, follow links, etc.

The main areas to be explored in the button involve data-link and the data-submit attributes.

<div id="button-link" class="button" data-link="http://hive.pt">Button with Link</div>

<form action="//hive.pt" method="post" style="display:inline-block;">
    <div id="button-form" class="button" data-submit="true">Button submit Form</div>
</form>

This component allows the selection of an option in a form using buttons. When the form is submitted, an input is created with the name of the button group and the value of the selected button.

<div class="button-group button-group-left" name="option">
    <div class="button button-solid" data-value="a">Option A</div>
    <div class="button button-solid" data-value="b">Option B</div>
    <div class="button button-solid" data-value="c">Option C</div>
    <div class="button button-solid" data-value="d">Option D</div>
</div>
<div class="clear"></div>

<form action="/form" method="post" class="form form-confirm" data-message="Submit Form">
    <div class="label">
        <label>Name</label>
    </div>
    <div class="input">
        <input name="name" class="text-field focus" placeholder="eg: John Doe" value=""
               data-error="" />
    </div>
</form>

Add the following classes to include different behaviours:

To give focus to a specific element when the page loads add the class focus.

<label class="radio-label" for="male">Male</label>
<input type="radio" class="radio-field" name="gender" id="male" data-checked="on"/>
<label class="radio-label" for="female">Female</label>
<input type="radio" class="radio-field" name="gender" id="female"/>

<input type="checkbox" class="check-field" data-checked="on"/>
<input type="checkbox" class="check-field"/>

<input type="text" class="text-field field-margin" data-original_value="text field" />
<input type="text" class="text-field" data-type="date" data-original_value="text field" data-error="true" />

<input type="text" class="text-field" data-type="float" data-decimal_places="2" />

<input type="text" class="incremental-field" data-type="integer" />

<textarea class="text-area field-margin" data-original_value="text area" data-maximum_length="100"></textarea>

<input type="file" size="12" multiple="true" class="file-field" />

<a class="link link-blue uploader">Upload image</a>

<div class="file-drop">Drop your files here</div>

<p>Drop image here</p>
<div class="image-upload"></div>

Add the class name-change to a form field to change its name to the name defined with data-name_empty if it is submitted without a value.

<form class="form" action="/form" method="POST">
    <div class="label field-margin">
        <label>Name</label>
    </div>
    <div class="input field-margin">
        <input name="name" class="text-field name-change"
               placeholder="eg: John Doe" data-name_empty="no_name" />
    </div>
</form>

This component allows changing an input's mode. The button can be styled accordingly by using the .toggle-field .button.{mode_name} selector.

<input class="toggle-field toggle-left" data-modes="currency, percent"/>

<div id="progress-bar-row" class="progress-bar" data-percentage="20" data-right_bar="true"></div>

$("#progress-bar-row").uxprogressbar("change", {
    percentage : 100
});

If you add the eval class to an element its data-eval attribute (or html content) will be evaluated as a Javascript expression and replace its content.

<p class="eval">2+2</p>

Parses the value of two inputs with date and time to a timestamp value on form submit. Add the class utc to use UTC time zone.

<form>
    <div class="date-time utc">
        <input class="text-field date">2011-09-27</input >
        <input class="text-field time">11:11:37</input >
    </div>
</form>

<div class="calendar"></div>

<div class="calendar-range" data-start_name="Departure" data-end_name="Return"></div>

A table can be made editable by adding the class table-edit and a row as a template.

 <table class="table table-data table-edit" data-maximum_rows="5">
    <tbody>
        <tr class="template">
            <td>cell 1</td>
            <td>cell 2</td>
        </tr>
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
        </tr>
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
        </tr>
    </tbody>
</table>

$("body").uxnotification({
    title : "Notification Test",
    message : "Don't read this dummy text, it's a waste of your time.",
    timeout : 5000
});

<div class="header-notification">
    <span>This is a dummy notification</span>
    <a class="link link-close">Click to close</a>
</div>

<div class="button replacer" data-target="#replacer-target" data-no_auto="1">Replace</div>
<div id="replacer-target" class="replacer-target">Replaced</div>

<div id="changer-trigger" class="changer" data-section_count="2" data-timeout="2000">Change</div>
<div class="content-changer" data-trigger="#changer-triggerr">
    <div class="changer-panel">Section 1</div>
    <div class="changer-panel">Section 2</div>
</div>

This general link component does not perform much more than the default html a element. The main feature is that is possible to use smooth scrolling for an internal link. To use it you must set the data-duration attribute with the amount of milliseconds for the scrolling.

<a class="link link-blue" href="#link" data-duration="500" data-offset="-42">Scroll Link</a>

This component can also be used to make an AJAX request by setting data-ajax to true. The response handler should bind to this element's success and error events.

<a class="link link-blue" href="#link" data-ajax="true">AJAX Request</a>

<a class="link link-blue link-confirm" href="http://hive.pt" data-message="It's correct '?">Confirm Link</a>

<div id="window" class="window window-hide">
    <h1>Window Title</h1>
    <p>Window text with goes under the window title</p>
    <div class="window-buttons">
        <div class="right button button-red button-cancel close-button">Cancel</div>
        <div class="right button button-green button-confirm accept-button">Confirm</div>
    </div>
</div>

<div class="button" data-window_open="#window">Show Window</div>

$("#window").uxwindow("show");

This component is a window level slider that shows a sequence of panels and can be controlled using either a manual (arrow based) or automated approach.

<div id="slider" class="slider">
    <div class="slider-panel">First</div>
    <div class="slider-panel">Second</div>
    <div class="slider-panel">Third</div>
</div>

<a id="button-slider" class="link link-blue" href="#slider">Show Slider</a>

$("#slider").uxslider("show");

The slider supports the following methods:

For the key shortcuts to be active a div element under the body must be set with the shortcuts class. Only this way the keyboard shortcuts will be active.

<div class="key" data-key="69" data-url="#key"></div>

You can use this attribute to force an element to have a specific width.

<div data-width="200"></div>

To center an element on the current viewport you can use the uxcenter function. The function accepts the following parameters:

When communicating between the client side and the server side it's important to remaining dependent on the client's local data. The best way to do it is transferring a utc timestmap representing the specified time and then converting it to local data using the timestamp component.

<div class="timestamp">1317118297</div>

It's important to be able to convert a number base enumeration into a string that describes the value in the enumeration. For this a mapping mechanism is required, and that's exactly what this component archives the mapping function.

<div class="enumeration" data-enum="['car', 'bike', 'bus'']">2</div>

Being able to format number in the client side is god dam important when you're building an enterprise grade information system. Using the number formatter is possible to control the number of decimal places the separator for the decimal part the maginute separtor.

<div class="number" data-places="2" data-separator="," data-magnitude_separator=".">12345.6</div>

If a password field requires some king of verification for strength there's the password meter component for that. Just use the normal text-field component and associate the password meter using the data-target attribute.

<input id="password" type="password" class="text-field" />
<div class="password-meter" data-target="#password"></div>

<div class="rating" data-count="5" data-value="3"></div>

Tags are probable the simplest way to archive a good looking ui. Just use this and that and your're done.

<span class="tag">tag</span>

To add code highlighting to an element add the code class and the desired language class from Prism.

print("Hello World!")

<pre class="code language-python">print("Hello World!")</pre>

<div class="chart">
    <div class="bar bar-orange" data-percentage="11.3" data-linear="1">First</div>
    <div class="bar bar-blue" data-percentage="57.0" data-linear="1">Second</div>
    <div class="bar bar-green" data-percentage="84.6" data-linear="1">Third</div>
</div>

<ul class="hightlight-box">
    <li class="hightlight-box-item">
        <h3>Total</h3>
        <h1 class="number" data-magnitude_separator=",">688</h1>
    </li>
    <li class="hightlight-box-item green">
        <h3>Verified</h3>
        <h1 class="number" data-magnitude_separator=",">32</h1>
    </li>
    <li class="hightlight-box-item red">
        <h3>Conflicts</h3>
        <h1 class="number" data-magnitude_separator=",">656</h1>
    </li>
</ul>

<ul class="list">
    <li>
        <a>Element 1</a>
    </li>
    <li>
        <a>Element 2 <span class="link-expand">+</span></a>
        <ul class="list">
            <li>
                <a class="selected">Element 2.1</a>
            </li>
            <li>
                <a>Element 2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a>Element 3</a>
    </li>
</ul>

<ul class="scroll-list">
    <li>User 1</li>
    <li>User 2</li>
    <li>User 3</li>
    <li>User 4</li>
    <li>User 5</li>
    <li>User 6</li>
</ul>

<div class="panel-more" data-more="more" data-less="less">
    <h3>Content</h3>
</div>

<div class="side-panel">
    <p>Content</p>
    <a class="button button-cancel">Cancel</a>
</div>

<div class="tab-panel">
    <div class="block-tabs">
        <ul class="tabs-list tab-selectors">
            <li>
                <a class="tab-selector link active" href="#tab-home">Home</a>
            </li>
            <li>
                <a class="tab-selector link" href="#tab-profile">Profile</a>
            </li>
            <li>
                <a class="tab-selector link" href="#tab-messages">Messages</a>
            </li>
            <li>
                <a class="tab-selector link" href="#tab-settings">Settings</a>
            </li>
        </ul>
    </div>
    <div id="tab-home" class="tab active">Home</div>
    <div id="tab-profile" class="tab">Profile</div>
    <div id="tab-messages" class="tab">Messages</div>
    <div id="tab-settings" class="tab">Settings</div>
</div>

<a class="menu-link" data-menu="#example-menu">Menu</a>
<div id="example-menu" class="menu">
    <div class="menu-contents">
        Menu Contents
    </div>
</div>

If you need to guide the user through a process with multiple steps you can easily add a stack of panels with navigation and breadcrumbs.

<div class="wizard">
    <ul class="breadcrumbs">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
    <div class="panel-stack">
        <div class="panel"><h3>First Step</h3></div>
        <div class="panel"><h3>Second Step</h3></div>
        <div class="panel"><h3>Third Step</h3></div>
    </div>
    <div>
        <a class="button-previous">Previous</a>
        <a class="button-next">Next</a>
        <a class="button-finish">Finish</a>
    </div>
</div>

With this component you can have stackable panels that you can use, for example, to create a navigation menu with various submenus.

<div class="stack">
    <div class="stack-item">
        <a>Item 1</a>
    </div>
    <div class="stack-item">
        <a>Item 2</a>
    </div>
    <div class="stack-item">
        <a>Item 3</a>
    </div>
</div>

This component provides a togglable window level overlay (mask) to highlight other elements.

<div class="overlay"></div>

jQuery(".overlay:first").triggerHandler("toggle", [250]);

This component responds to the following events:

This component extends the overlay to be triggable by a key press event.

<div id="panel" class="overlay-panel" data-key="13" data-offset="0.20">
    <h1>Overlay Content</h1>
</div>

This is a togglable menu that pushes the contents of the page when it appears, gaining the user's attention. When the menu is visible the class menu-open is added to the bodyelement. This class should be used to style the other elements so that they react appropriately to the presentation of the menu.

<div class="side-menu"></div>

If you add the image class to an element you can specify an image to be presented when that element is clicked. If it also has the class lightbox-animated then there will be an animation.

<img class="image lightbox-animated"
    src="/static/libs/uxf/images/uxf-logo-64.png"
    data-lightbox_path="/static/libs/uxf/images/uxf-logo-128.png"
    data-lightbox_large_path="/static/libs/uxf/images/uxf-logo-256.png">

If you add the image-lazy class to an image it will only be loaded when visible on the viewport. The image url can be set with the src attribute or with data-url. When the image finishes loading the class loaded is added.

<img class="image-lazy" src="../static/images/banner.jpg">

To have an animated background image add the animation class and set a background image and the animation duration. The idea is that a sprite based background may be used as a key frame based animation source, note that the animation is controlled by animation-duration.

<div class="animation"
     style="height: 200px; animation-duration: 1000ms; background-image: url(../static/images/banner.jpg);">
</div>

<div class="slideshow" data-window="true">
    <ul class="items">
        <li class="item">
            <span data-name="name">UXF</span>
            <span data-name="image">//uxf.hive.pt/res/logo.png</span>
            <span data-name="url">http://uxf.hive.pt/</span>
            <span data-name="description">Simple client side framework for people who want fast results.</span>
        </li>
        <li class="item">
            <span data-name="name">Appier</span>
            <span data-name="image">//appier.hive.pt/res/logo.png</span>
            <span data-name="url">http://appier.hive.pt/</span>
            <span data-name="description">Joyful Python Web App development.</span>
        </li>
        <li class="item">
            <span data-name="name">Netius</span>
            <span data-name="image">//netius.hive.pt/res/logo.png</span>
            <span data-name="url">http://netius.hive.pt/</span>
            <span data-name="description">Fast and readable async non-blocking network apps.</span>
        </li>
    </ul>
    <div class="slideshow-details">
        <p data-name="description"></p>
    </div>
</div>

It's really nice to have embedded videos in your existent html source base, the single most anoying problem is that for each video service provider there is a different iframe code. The video component provides a simple way to overcome this problem, just set the html code of it with the url of the video and that's it. Currently supported services include: youtube, vimeo and dailymotion.

Additional configuration options are provided with data-width, data-height, ...

<div class="video">http//www.youtube.com/watch?v=4XpnKHJAok8</div>