Fuel UX – extends Bootstrap with additional lightweight JavaScript controls for your web applications.

Jan 27, 2015 | Bootstrap, UI/UX Designs & Layout, Utilities & Plug-ins | 1 comment

Fuel UX extends Bootstrap with additional lightweight JavaScript controls for your web applications.

Ignite your Bootstrap project today.

Include Fuel UX controls in your next web project knowing it’s solidly optimized and easy to upgrade.

Fuel UX is open source. It’s hosted, developed, and maintained on GitHub. It provides controls, extensions and online drag & drop form builder.

50 Must-have plugins for extending Twitter Bootstrap | Tutorialzine

Fuel UX is an incredible collection of enhancements to Twitter Bootstrap. All the controls are clean and lightweight, and they fit naturally into the bootstrap look and feel. The collection includes controls like datagrids, custom select boxes, spinners, trees, multi-step form wizards and more

Fuel UX

// // <!– –>

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)
<body class="fuelux">
  1. Include the CSS on your page somewhere:
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"><link href="//www.fuelcdn.com/fuelux/3.5.0/css/fuelux.min.css" rel="stylesheet">
  2. 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.2.0/js/bootstrap.min.js"></script><script src="//www.fuelcdn.com/fuelux/3.5.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.2.0/js/bootstrap.min',      'fuelux': '//www.fuelcdn.com/fuelux/3.5.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>
  3. Proceed with the awesome

Get Fuel UX

Currently v3.5.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.5.0/css/fuelux.min.css">    <!-- Latest compiled and minified JavaScript -->    <script src="//www.fuelcdn.com/fuelux/3.5.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/

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.2.0/css/bootstrap.min.css" rel="stylesheet">    <link href="//www.fuelcdn.com/fuelux/3.5.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.2.0/js/bootstrap.min.js"></script>    <script src="//www.fuelcdn.com/fuelux/3.5.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.2.0/css/bootstrap.min.css" rel="stylesheet">    <link href="//www.fuelcdn.com/fuelux/3.5.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.2.0/js/bootstrap.min',          'fuelux': '//www.fuelcdn.com/fuelux/3.5.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.5.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:

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:

ChromeFirefoxInternet ExplorerOperaSafari
AndroidSupportedNot SupportedN/ANot SupportedN/A
iOSSupportedN/ANot SupportedSupported
Mac OS XSupportedSupportedSupportedSupported
WindowsSupportedSupportedSupportedSupportedNot 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.

 

FORM BUILDER: http://getfuelux.com/formbuilder.html

Website: http://getfuelux.com

 

Thanks for reading,
NabeelShahid.com

 

1 Comment

  1. and side effects
    and side effects on February 11, 2015 at 4:51 am

    Heya i’m for the first time here. I came across this board and I find It truly useful & it helped me out a lot.
    I hope to give something back and help others like you aided me.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *