Home / Fuel UX / Fuel UX - Getting Started

Fuel UX - Getting Started

3720 points
jmeketa's picture

Overview

Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls for your web application. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests. Check out the CODE@ Fuel UX Overview page!

Requirements

Twitter Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include this doctype at the beginning of all your projects.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Available Codebase

The Fuel UX codebase repository is available on Github at this link if you wish to include that repository in your web project for modification or custom usage. You can also contribute to the codebase if you so choose.

Referencing Externally

The CODE@ Developer Center provides examples for leveraging the controls utilizing the full codebase from Github as well as referencing the necessary includes directly in your HTML pages. This process includes combination of Cascading Style Sheets (CSS) and JavaScript (JS).

  1. Include the Fuel UX style for the whole page or use <div class="fuelux"> where needed depending on any styling issues that may result. The example below applies the styling to the entire page.

    <!DOCTYPE html>
    <html lang="en" class="fuelux">

  2. Place the following code in the HTML page's head tag (<head>) for easiest use (you can place this code in the body as well). The example below references the IMH theme. To use the default Fuel UX theme, change the three fuelux.exacttargetapps.com file references below by replacing "fuelux-imh" directory with "fuelux" directory as shown in themes section on Fuel UX page.

    <link href="http://www.fuelcdn.com/fuelux-imh/2.4.0/css/fuelux.css" rel="stylesheet" />
    <link href="http://www.fuelcdn.com/fuelux-imh/2.4.0/css/fuelux-responsive.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.fuelcdn.com/fuelux-imh/2.4.0/loader.min.js" type="text/javascript"></script> <script type="text/javascript">
    $(function () { // code in this callback // function guaranteed to // run after dom is ready }); </script>

  3. Implement the controls as needed. Samples of ExactTarget built controls are linked below. Twitter Bootstrap samples are available at the Twitter Bootstrap site. Some will include additional javascript and others will not.

    Controls

    • Checkbox - Customized look and feel for checkbox element
    • Combobox - Combines input and dropdown for easy and flexible data selection
    • Datagrid - Renders data in a table with paging, sorting, and searching
    • Pillbox - Easily manage selected items with color-coded text labels
    • Radio - Customized look and feel for radio button element.
    • Search - Combines input and button for integrated search interaction
    • Select - Extends button dropdown with additional functionality for setting and retrieving the selected item.
    • Spinner - Provides convenient numeric input with increment and decrement buttons
    • Tree - Provides a visual display of hierarchical node data.
    • Wizard - Easily define a multi-step process that needs to be completed in a specific order

Twitter Bootstrap Components

Since Fuel UX leverages Twitter Bootstrap, Twitter Bootstrap styles, components, and plugins are available for use as well. These are just some of the components within Twitter Bootstrap:

Product Group: