Fuel UX Adam Alexander, ExactTarget @adamalex 

Fuel UX • Web UI control library for consistent cross-browser UI • Established 2010 with AMD modules and solid design patterns • AMD = asynchronous module definition (pioneered by RequireJS) • Version 2 moved from jQuery UI to Twitter Bootstrap • Uses Grunt and RequireJS for unit tests, build, optimization, packaging • Open source (MIT license) as of October 2012 

Fuel UX includes Bootstrap • Scaffolding, grid system, basic layouts • Normalized CSS, typography, code, buttons, icons • Rich CSS tabs, pills, navigation, alerts, progress bars • JavaScript modal, popover, content collapse, carousel, more • Uses LESS for CSS, easy to customize with variables • Allows for a complete “style guide” for any web site 

Fuel UX adds additional JS controls • Combobox combines input and dropdown for easy and flexible data selection • Datagrid renders data in a table with paging, sorting, and searching • Pillbox manages selected items with color-coded text labels • Search combines input and button for integrated search interaction • Spinner provides convenient numeric input with increment and decrement buttons 

Fuel UX 2.2 adds more JS controls • Checkbox consistent UI cross-platform and cross-browser • Radio consistent UI cross-platform and cross-browser • Select consistent UI cross-platform and cross-browser • Tree renders data in an expandable tree structure • Wizard supports step-by-step navigation and content switching 

Fuel UX is quality open source • Live documentation combines documentation and example code • Unit tests cover all functionality, automated with Travis CI • GitHub issues are monitored and fixed • Pull requests are accepted • Roadmap is on UserVoice for voting on new features • Contributions are welcome 

Fuel UX project demo • Live Documentation • GitHub project walkthrough • Customization 

Markup-driven UI • Fuel UX follows conventions from Bootstrap • Most JS controls can be auto-instantiated from markup • Drop markup on page, control just works • The markup can be verbose (example) 

Fuel UX is modular • Fuel UX is a core standalone library • Basic markup method fits some use cases and developer preferences • Or, use with Handlebars • Or, use with other template libraries • Or, wrap with a JavaScript API to generate markup using code • Fuel UX supports these use cases and more, semantically versioned 

ExactTarget is hiring top JavaScript engineers • Impressed with Fuel UX? • Enjoy this type of frontend development and research? • Like Node.js? We use it a lot and will be using it even more • Contact [email protected] or @adamalex on Twitter 

Questions? Adam Alexander, ExactTarget [email protected] @adamalex