Please note this currently is a WIP. Bower does not point to version 3.0.0. The dist folder may not be versioned, nor up to date. Please build via grunt before using.
#Fuel UX
Fuel UX extends Bootstrap 3 with additional lightweight JavaScript controls. It is actively maintained by members of ExactTarget, a salesforce.com company, with the support and involvement of the community.
All functionality is covered by the live documentation and unit tests.
- Quick start
- Documentation
- Bugs and feature requests
- Compiling CSS and JavaScript
- Issues and feature requests
- Contributing
- Philosophy and authors
- Copyright and license
-
Install with Bower:
bower install fuelux -
Use AMD (such as RequireJS) to reference the FuelUX folder in your paths configuration, wherever it is located:
require.config({ paths: { 'fuelux': 'http://www.fuelcdn.com/fuelux/3.0.0/' //... } });
-
List any individual fuelux controls needed as dependencies within your application modules (eg. checkbox):
define(function(require) { var checkbox = require('fuelux/checkbox'); //... });
-
Use FuelUX in your HTML within the fuelux wrapper class (eg. checkbox):
<body class="fuelux"> <!-- .... --> <div class="checkbox"> <label class="checkbox-custom"> <input id="chk1" checked="checked" class="checked" type="checkbox" value=""> Custom appearance checkbox checked at page load (#chk1) </label> </div> <!-- .... --> </body>
View live documentation and demos on GitHub pages.
| TravisCI | SauceLabs | Node modules | Browser Support |
|---|---|---|---|
 |
 |
 |
Fuel UX can be obtained one of three ways:
-
Best way: Install with a dependency manager:
Using Bower:
bower install fueluxUpdate with
bower update fuelux.Using Volo:
volo add fueluxUpdate with
volo add -f fuelux.This ensures you get all the dependencies.
-
Another good way: Clone the Git repository:
git clone https://github.com/ExactTarget/fuelux/Cloning the repository ensures you can apply future updates to FuelUX easily, but requires to you manage its dependencies on your own.
-
Also an option: Download a .zip archive of the latest release (needthis) or request files from the FuelUX CDN.
Note: Using FuelUX in this way can make updating to future releases difficult. This approach is not recommended.
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 things, as it just won't work without them.
A download of FuelUX provides the following directories and files, which are grouped according to file type:
fuelux/
├── css/
│ ├── fuelux.css
│ ├── fuelux.min.css
├── js/
│ ├── fuelux.js
│ └── fuelux.min.js
└── fonts/
├── fuelux.eot
├── fuelux.svg
├── fuelux.ttf
└── fuelux.woff
We provide compiled CSS and JS (like fuelux.*), as well as compiled and minified CSS and JS (like fuelux.min.*) in the dist folder.
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': 'http://www.fuelcdn.com/fuelux/3.0.0/'
//...
}
});Then list any individual fuelux controls needed as dependencies within your application modules:
define(function(require) {
var spinbox = require('fuelux/spinbox');
//...
});For your convenience when you are using AMD, you can just use fuelux/all instead of listing each module individually, but this is not recommended.
Fuel UX also supports placing components in their own <script> tags. Be sure to put modules in the correct order if loading them in this method (although this order is a secret known only to 29th level wizards/enchantresses and 11th degree JS ninjas).
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 questions tagged FuelUX in the ExactTarget Developer Community and search FuelUX tagged questions on StackOverflow.
You can also visit UserVoice community and post a comment or suggest features. We will maintain of backlog of feature we are considering developing in a backlog.
Documentation for v2.6.x has been made available for the time being at (need link) while folks transition to Bootstrap 3. Previous releases and their documentation are also available for download. (need link)
FuelUX is lightweight to give you a fast dependable foundation to build upon. It uses Grunt with convenient methods for working with the library. It's how we compile our code, run tests, and more. To use it, install the required dependencies as directed, and then run some Grunt tasks.
From the command line:
- Install
grunt-cliglobally withnpm install -g grunt-cli. - Navigate to the root
/bootstrapdirectory, then runnpm install. npm will look at package.json and automatically install the necessary local dependencies listed there.
When completed, you'll be able to run the various Grunt commands provided from the command line.
Unfamiliar with npm? Don't have node installed? npm stands for node packaged modules and is a way to manage development dependencies through node.js. Download and install node.js before proceeding.
Run grunt to run tests locally and compile the CSS and JavaScript into dist. Uses Less and UglifyJS.
Runs JSHint, HTML validation, and QUnit tests headlessly in PhantomJS. grunt releasetest uses multiple versions of jQuery.
This is a convenience method for watching source files and automatically building them when you save. To compile only CSS without running unit tests, use grunt servecss.
grünt saucelabs and grunt trickysauce can be run locally instead of through TravisCI, but require the FuelUX Saucelabs API key file which is not public at this time.
Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun npm install.
Before writing code, we suggest you search for issues or create a new one to confirm where your contribution fits into our roadmap.
Take care to maintain the existing coding style: tabs, clarity over brevity, declarative markup, semicolons, etc. Please review the ExactTarget JavaScript style guide if you have any questions. Be sure to add unit tests for any new or changed functionality. Lint and test your code using grunt.
Read more about contributing to FuelUX
Please do not edit files in the dist directory as they are generated via grunt. You'll find source code in the respective js, less, and fonts directory.
While grunt can run the included unit tests via PhantomJS, this isn't a substitute for running tests across a variety of browsers and environments. Please be sure to 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.
##Philosophy and authors
Our aim is to provide a suite of related but independent projects that help web developers integrate, manage, and customize quality libraries and utilities to more efficiently develop, maintain, test, and distribute their projects. Any improvements or fixes we make to the open source projects, we use will be contributed upstream if they are useful to the rest of the community.
| Project Maintainers (a-z) | |
|---|---|
| Stephen James |   |
| Kevin Parkerson | |
| Major Contributors | |
|---|---|
| Matt Beard | |
| Bryan Kohlmeier | |
| Dustin McCormick | |
| Christopher McCulloh | |
| Scott Plumlee | |
| Marvin Pribble | |
| Ryan Moore | |
| Steven Rogers | |
| Alex Vernacchia (current) | |
| David Waltz (current) | |
| Original Author | |
|---|---|
| Adam Alexander | |
And thank you to all those that have submitted issues and contributed to this library.
Copyright © 2014 ExactTarget, a salesforce.com company.
Licensed under the MIT License (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the COPYING file.
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.