Archive Statement:

As of March 2019, this repository is read-only as Salesforce has archived the FuelUX open-source UI framework and will no longer be supported.

Salesforce has introduced a new programming model for the Lightning Component Framework called Lightning Web Components which you are encouraged to check out instead. This programming model is designed for building fast components using modern JavaScript and Web Standards.

• Sanity Checks
• Documentation
• Contributing
• Obtaining Fuel UX
  • NPM
  • Bower
  • Volo
  • Github
• Using
  • Required fuelux class
  • Required Dependencies
  • What's included
  • AMD support
• Bugs and Feature Requests
• Previous releases
• Community
• Philosophy
  • Copyright and License

Sanity Checks

Fuel UX

Fuel UX extends Bootstrap 3 with additional lightweight JavaScript controls. It is actively maintained by members of Salesforce Marketing Cloud, with the support and involvement of the community.

More thorough documentation and guides available at

Documentation

Fuel UX documentation is built with Jekyll and publicly hosted on GitHub Pages at . More details on setting up Jekyll and running docs locally can be found in our CONTRIBUTING.md documentation.

Contributing

Please read the CONTRIBUTING.md first.

Obtaining Fuel UX

NPM is the recommended method for obtaining Fuel UX.

npm install fuelux

You can also use on of the following methods:

• Bower bower install fuelux (update with bower update fuelux).
• Volo volo add fuelux (update with volo add -f fuelux).
• Clone via git git clone https://github.com/ExactTarget/fuelux/
  • Cloning the repository ensures you can apply future updates to Fuel UX easily, but requires to you manage its dependencies on your own.
• Download a .zip archive.

Using Fuel UX

Fuel UX can be used with an existing page via CDN or installed in a project.

Read the Getting started page for more detailed information on the framework contents, templates, examples, and more.

Required fuelux class

Add fuelux class to the portion of the page using Fuel UX, usually the body.

Required Dependencies

Fuel UX is dependent upon Bootstrap 3 and jQuery. If you installed by cloning the repo or by downloading a .zip archive, you'll also want to grab these dependencies, as it won't work without them.

• jQuery
• Bootstrap 3

For other methods of managing dependencies consider AMD support via require.

Ensure all the dependencies are included on the page (eg, such as using the CDN as shown below).

What's included

The code you want is in dist/. We provide compiled CSS and JS (like fuelux.*), as well as compiled and minified CSS and JS (like fuelux.min.*) in the dist folder. Icons are provided as fonts.

fuelux/
├── css/
│   ├── fuelux.css
│   ├── fuelux.min.css
├── js/
│   ├── fuelux.js
│   └── fuelux.min.js
└── fonts/
    ├── fuelux.eot
    ├── fuelux.svg
    ├── fuelux.ttf
    └── fuelux.woff

AMD support

We recommend only loading the controls you need (eg fuelux/checkbox).

If using AMD (such as RequireJS), reference the FuelUX directory in your paths configuration, wherever it is located:

require.config({
    paths: {
        'fuelux': 'https://www.fuelcdn.com/fuelux/3.17.1/'
        //...
    }
});

Then list any individual fuel ux 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 `