Skip to content

Instantly share code, notes, and snippets.

@chriscorwin

chriscorwin/readme.md

Last active August 29, 2015 14:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chriscorwin/11296525 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chriscorwin/11296525 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md

#FuelUX

FuelUX extends Bootstrap 3 with additional lightweight JavaScript controls. It is 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.

Table of contents

Quick start

FuelUX can be obtained one of three ways:

  1. Best way: Install with Bower:

    bower install fuelux

    This ensures you get all the dependencies. You can then use bower update fuelux to keep it up to date in the future. You're welcome.

  2. Second best way: Clone the Git repository:

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

    Obtaining this way ensure you can apply future updates to FuelUX easily, but require to you manage the dependencies on your own.

  3. Least desirable way in the universe: Download a .zip archive of the latest release.

    Grabbing FuelUX in this way may seem easist now, but it will make integrating future updates (bug fixes!) nearly impossible.

    Trust us, you do not want to do it this way.

Dependencies

FuelUX is dependent upon Bootstrap 3 and jQuery.

If you install it 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.

What's included

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

For the most common assets, we provide compiled CSS and JS (like fuelux.css), as well as compiled and minified CSS and JS (like fuelux.min.css).

Customizing and building

If you end up modifying the .less or .js files, you'll need to re-compile it all. We've made documentation on how to get starting customizing and building FuelUX. Instructions on building are available here.

We also provide an icon font (documentation on using the icons is available here).

If cloning the repo, compiled FuelUX files for production use are located in /dist/.

Documentation

Live docs and demos

View live documentation and demos on GitHub pages.

JavaScript Controls

  • Checkbox - consistent cross-browser cross-platform look and feel for checkbox elements
  • Combobox - combines input and dropdown for flexible data selection
  • Datepicker - combines input and dropdown to select a date
  • Infinite Scroll - Load content when reaching a set amount of content read or with a call to action
  • Intelligent Dropdown - Dropdown that decide whether it should be placed above or below the clicked element as well as force position.
  • Loader - fully css-driven loading animation for visual indication of wait times
  • Pillbox - manage tags with color-coded text labels
  • Radio - consistent cross-browser cross-platform look and feel for radio elements
  • Repeater - A scrollable, sortable, searchable interface for data (replaces datagrid)
  • Repeater Views - Use the provided views to customize a list of data or write your own
  • Scheduler - composite form control to quickly schedule events with support for moment.js
  • Search - input for integrated search
  • Selectlist - extends button dropdown with the ability to set and retrieve the selected item
  • Spinbox - provides convenient numeric input with increment and decrement buttons
  • Tree - renders data in a tree, supporting caching and optional multi-selection
  • Wizard - displays a multi-step process to be completed in a specific order

UMD/AMD Support

In a hurry? Counting characters over bytes? fuelux/all can be loaded to bring in all FuelUX controls via AMD. Though we recommend only loading the controls, you need. 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');
    //...
});

On a side note, FuelUX now supports placing components in their own <script> tags. Be sure to put modules in the correct order if loading them in this method.

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.

ExactTarget Developer Community

View FuelUX documentation on Code@

Previous releases

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)

Compiling CSS and JavaScript

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 commands.

Install Grunt

From the command line:

  1. Install grunt-cli globally with npm install -g grunt-cli.
  2. Navigate to the root /bootstrap directory, then run npm 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? That's a-okay. npm stands for node packaged modules and is a way to manage development dependencies through node.js. Download and install node.js before proceeding.

Grunt commands to start with

Build - grunt

Run grunt to run tests locally and compile the CSS and JavaScript into /dist. Uses Less and UglifyJS.

Tests - grunt test

Runs JSHint and QUnit tests headlessly in PhantomJS (used for CI).

Watch - grunt watch

This is a convenience method for watching just Less files and automatically building them whenever you save.

Troubleshooting dependencies

Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun npm install.

Issues and Feature Requests

The issue tracker is the preferred channel for bug reports, features requests and submitting pull requests.

You can visit questions tagged FuelUX in our ExactTarget Developer Community.

You can also visit UserVoice community and post a comment or suggest features. We will maintain of backlog of feature we are considering adding in a backlog.

Contributing

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: tabs, clarity over conciseness, semicolons, etc. 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.

The FuelUX Philosophy

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.

##Authors

Adam Alexander

Matt Beard

Bryan Kohlmeier

Kevin Parkerson

Stephen James

Christopher McCulloh

David Waltz

Dustin McCormick

Alex Vernacchia

Scott Plumlee

Marvin Pribble

Ryan Moore

Steven Rogers

And thank you to all those that have submitted issues and contributed to this library.

Acknowledgements

We are grateful to the maintainers, contributors, and sponsors of the following technologies which make FuelUX possible:

  • jQuery (Library for DOM, events, animation, and AJAX)

  • Twitter Bootstrap (UI components and interactions)

  • LESS (Stylesheet definition and management)

  • RequireJS and bower (Tools for managing client JavaScript)

  • grunt (Build tool for JavaScript projects)

Copyright and license

Copyright © 2014 ExactTarget.

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.

githalytics.com alpha

Build Status

Build Status Selenium Test Status devDependency Status

Selenium Test Status

Selenium Test Status

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment