Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fuel UX at IndyJS

Fuel UX at IndyJS

Introduced the group to Fuel UX and presented a concept for using Handlebars templates to streamline Fuel UX usage.

Fuel UX on GitHub:

https://github.com/ExactTarget/fuelux

Live documentation:

http://exacttarget.github.com/fuelux (current release)
https://dl.dropbox.com/u/2202802/fuelux2.2-pageswip/index.html (2.2 preview)

Fuel UX Roadmap:

http://fuelux.uservoice.com

Fuel UX Handlebars concept:

https://github.com/adamalex/fuelux-hbconcept
http://fuelux-hbconcept.cloudfoundry.com

Follow for Fuel UX updates:

https://twitter.com/adamalex
https://twitter.com/ETfuel

Adam Alexander

December 19, 2012
Tweet

More Decks by Adam Alexander

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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)
  7. 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
  8. 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