Quick Start

This will get you from nothing to done in no time flat (it assumes use of the Fuel UX CDN). To use a downloaded version and for more detailed documentation see the further sections below.

  1. Add the fueluxclass to a page wrapper (usually either <html> tag or <body> tag)
  2. <body class="fuelux">
  3. Include the CSS on your page somewhere:
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="//www.fuelcdn.com/fuelux/3.13.0/css/fuelux.min.css" rel="stylesheet">
  4. Include the JS on your page somewhere:
    <!-- jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//www.fuelcdn.com/fuelux/3.13.0/js/fuelux.min.js"></script>
    (or AMD):
    <script src="//cdn.jsdelivr.net/requirejs/2.1.11/require.js"></script>
    <script>
      requirejs.config({
        paths: {
          'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',
          'fuelux': '//www.fuelcdn.com/fuelux/3.13.0/js/fuelux.min',
          'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery',
          // Moment.js is optional
          'moment': '//cdn.jsdelivr.net/momentjs/2.6.0/lang-all.min'
        },
        // Bootstrap is a "browser globals" script :-(
        shim: { 'bootstrap': { deps: ['jquery'] } }
      });
      // Require all.js or include individual files as needed
      require(['jquery', 'bootstrap', 'fuelux'], function($){});
    </script>
  5. Proceed with the awesome

Get Fuel UX

Currently v3.13.0

Use the Fuel UX CDN

The quickest, easiest, most magical way to get Fuel UX is to let us host it for you from our CDN!

This will require you to manage your own dependencies. If that scares you, you could use bower to have that taken care of for you.

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.13.0/css/fuelux.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="//www.fuelcdn.com/fuelux/3.13.0/js/fuelux.min.js"></script>
    

Install with Bower or Volo

If you use a dependency manager to manage your front-end code, this method may be right for you. This method ensures you receive all the dependencies you might need, such as jQuery, Bootstap, moment.js (for extended date support), and requireJS (for AMD support).

Using Bower:

bower install fuelux

Update with bower update fuelux.

Using Volo:

volo add fuelux

Update with volo add -f fuelux.

Fork You

Fork on Github

If you need to make some customizations, this is your best option. It will allow you to merge in future changes from upstream (that's us!) without overwriting your awesomeness.

git clone https://github.com/ExactTarget/fuelux/

Just the Files, Ma'am

Download Zipped Fuel UX Download Entire Source

Templates

No AMD/UMD Template

This template utlizes CDNs, but no AMD.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fuel UX Basic Template (Globals)</title>
    <!-- CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="//www.fuelcdn.com/fuelux/3.13.0/css/fuelux.min.css" rel="stylesheet">
  </head>
  <body class="fuelux">
    <!-- Checkbox example -->
    <div class="checkbox">
      <label class="checkbox-custom" data-initialize="checkbox">
        <input class="sr-only" data-toggle="#hereKittyKitty" type="checkbox" value="option1">
        <span class="checkbox-label">I love kittens!</span>
      </label>
    </div>
    <div id="hereKittyKitty" class="alert bg-info">Great. Meow, too!</div>

    <!-- jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//www.fuelcdn.com/fuelux/3.13.0/js/fuelux.min.js"></script>
  </body>
</html>

AMD/UMD Template

This template utlizes CDNs and AMD modules (with a manager such as require.js) and bundling for production:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fuel UX Basic Template (AMD)</title>
    <!-- CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="//www.fuelcdn.com/fuelux/3.13.0/css/fuelux.min.css" rel="stylesheet">
    <!-- Require.js - AMD loader -->
    <script src="//cdn.jsdelivr.net/requirejs/2.1.11/require.js"></script>
    <script>
      requirejs.config({
        paths: {
          'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',
          'fuelux': '//www.fuelcdn.com/fuelux/3.13.0/js/fuelux.min',
          'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery',
          // Moment.js is optional
          'moment': '//cdn.jsdelivr.net/momentjs/2.6.0/lang-all.min'
        },
        // Bootstrap is a "browser globals" script :-(
        shim: { 'bootstrap': { deps: ['jquery'] } }
      });
      // Require all.js or include individual files as needed
      require(['jquery', 'bootstrap', 'fuelux'], function($){});
    </script>
  </head>
  <body class="fuelux">
    <!-- Checkbox example -->
    <div class="checkbox">
      <label class="checkbox-custom" data-initialize="checkbox">
        <input class="sr-only" type="checkbox" value="option1" data-toggle="#hereKittyKitty">
        <span class="checkbox-label">I love kittens.</span>
      </label>
    </div>
    <div id="hereKittyKitty" class="alert bg-info">Great. Meow, too!</div>
  </body>
</html>

AMD/UMD Template, no CDN

This template does not utilize CDNs. It does utilize AMD modules (with a manager such as require.js) and bundling for production. Your setup will probably be different (This is a sample taken from fuelux-boilerplate project):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fuel UX Basic Template (AMD) No CDN</title>

    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="bower_components/fuelux/dist/css/fuelux.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/main.min.css">

    <script src="bower_components/requirejs/require.js"></script>
    <script>
      (function () {
        require.config({
          config: {
            moment: {
              noGlobal: true
            }
          },
          paths: {
            jquery: 'bower_components/jquery-1.11.0/dist/jquery.min',
            bootstrap: 'bower_components/bootstrap/dist/js/bootstrap.min',
            fuelux: 'bower_components/fuelux/js',//Proper UMD/AMD to enable you to get just what you need (goes w/line 33)
            // fuelux: 'bower_components/fuelux/dist/js/fuelux.min',//just grab it all (goes w/line 34)
            moment: 'bower_components/moment/min/moment-with-langs.min', // comment out if you dont want momentjs to be default
            underscore: 'bower_components/underscore/underscore'
          },
          shim: { 'bootstrap': { deps: ['jquery'] } }
        });
        require(['fuelux/checkbox']);//get just what you need (goes w/line 26)
        // require(['fuelux']);//just grab it all (goes w/line 27)
      })();
    </script>
  </head>
  <body class="fuelux">
    <label class="checkbox-custom checkbox-inline" data-initialize="checkbox"  id="confirmation">
      <input class="sr-only" type="checkbox" value="Should load in a 6 wide column, offset by 3 col widths"> <span class="checkbox-label">It worked</span>
    </label>
  </body>
</html>

UMD/AMD Support

If you use AMD (such as RequireJS), we recommend only loading the controls you need (e.g.- fuelux/checkbox).

  1. Reference the Fuel UX directory in your paths configuration, wherever it is located:
    require.config({
            paths: {
                'fuelux': '//www.fuelcdn.com/fuelux/3.13.0/js/fuelux.min.js'
                //...
            }
        });
        
  2. List individual fuelux controls needed as dependencies within your application modules:
    define(function(require) {
        var spinbox = require('fuelux/spinbox');
        //...
    });
    

    In instances where you require every module from fuel ux, you can use fuelux/all instead of listing each module individually.

    Fuel UX also supports placing components in their own <script> tags. Be sure to check component dependencies in the controls documentation and put modules in the correct order if you load them in this method. Errors will appear in the console if you have not loaded dependencies correctly.

    The following components have dependencies:

CommonJS Support

If you use a CommonJS build system (such as Webpack or Browserify), we recommend only loading the controls you need. You can also load all the controls by including the npm package.

Working with Browserify

This should work out of the box with Browserify.

Working with webpack

  1. Install imports-loader for webpack
    npm install --save-dev imports-loader
  2. Add rule to webpack configuration
    {
      test: /fuelux\/js\/.*\.js$/,
      use: ['imports-loader?define=>false']
    }
  3. Include individual modules or fuelux lib where needed
    // include where you need to
    require('fuelux/js/checkbox')
    // or
    require('fuelux')

Migrating from v2.x to v3.x

Interested in migrating from an older version of Fuel UX to v3.x? Check out our migration guide.

Bugs and feature requests

Have a bug or a feature request? Please first review the open issues, then search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

You can visit Code@ for general information and search Fuel UX tagged questions on StackOverflow.

Previous releases

While we will still maintain the 2.6.x version (bug fixes only), it’s deprecated. The Fuel UX 2.x documentation has moved and a legacy branch has been created. We'll leave the Fuel UX 2.x branch up and available for the foreseeable future.

Contributing

Stay up to date on the development of Fuel UX and reach out to others in the community with these helpful resources.

  • Before writing code, we suggest you search for issues or create a new one to confirm where your contribution fits into our roadmap.
  • In lieu of a formal style guide, take care to maintain the existing coding style, including the following:
    • tabs
    • clarity over brevity
    • declarative markup
    • semicolons
    Be sure to add unit tests for any new or changed functionality. Lint and test your code using grunt.
  • Read more about contributing to Fuel UX
  • Please do not edit files in the dist directory, as we generate those files via grunt. Find source code in the respective js, less, and fonts directory.
  • While grunt can run the included unit tests via PhantomJS, ensure that you run tests across a variety of browsers and environments. View the test page at http://localhost:8000/test/ in as many of the browsers listed in sauce_browsers.yml as you can before contributing.

Browser and device support

Fuel UX is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional renderings of Fuel UX controls.

Supported browsers

The ExactTarget Marketing Cloud supports the latest versions of the following browsers and platforms. On Windows, we additionally support Internet Explorer, versions 8 through 11. Review more specific support information below:

Chrome Firefox Internet Explorer Opera Safari
Android Supported Not Supported N/A Not Supported N/A
iOS Supported N/A Not Supported Supported
Mac OS X Supported Supported Supported Supported
Windows Supported Supported Supported Supported Not Supported

While Fuel UX should look and behave well in Chromium and Chrome for Linux and Firefox for Linux, Fuel UX does not officially support these browsers.

Internet Explorer 8 and 9

While Fuel UX supports Internet Explorer 8 and 9, please be aware that these browsers do not fully support some CSS3 properties and HTML5 elements. In addition, Internet Explorer 8 requires the use of fixed-width columns and containers due to its lack of media-query support. You may try using Modernizr or conditional comments like <!--[if IE 8]> to style fixed-width containers.

Visit Can I use... for details on browser support of CSS3 and HTML5 features.