#CNX14 Fuel UX - Introduction to a robust UI library

Track: Developers

#CNX14

#CNX14

Next-generation interfaces with Fuel UX 3

Stephen M. James Sr. Front End Engineer, UX Architecture @tweetllama

Track: Developers

#CNX14

Track: Developers

#CNX14

So what is this Fuel UX?!

Track: Developers

#CNX14

Screenshot description here. Container resizes as needed

PLACEHOLDER SCREEN A robust UI library

Track: Developers

#CNX14

And part of the new front-end stack…

What is Fuel UX?

we use.

Track: Developers

#CNX14

Track: Developers

#CNX14

So what is so great about Fuel UX?!

Track: Developers

#CNX14

It’s built on top of Bootstrap 3

+! =!MOAR FABULOUS!

What is so great about Fuel UX?

Track: Developers

#CNX14

It’s documented.!• Quick-start boilerplate!• Sample method buttons!• Extensive live

documentation!

What is so great about Fuel UX?

Track: Developers

#CNX14

It’s open source & maintained.

…and quite popular!!

Track: Developers

#CNX14

So… lots of bugs squashed!

What is so great about Fuel UX?

Track: Developers

#CNX14

It's minimally themed and easy to extend styling.

What is so great about Fuel UX?

Track: Developers

#CNX14

It’s got everywhere JavaScript.

AMD, CommonJS, or plain-old browser globals What is so great about Fuel UX?

Track: Developers

#CNX14

It’s got no images: all font icons, all the time

What is so great about Fuel UX?

Track: Developers

#CNX14

Track: Developers

#CNX14

Some things to remember Fuel UX!

Track: Developers

#CNX14

• These are jQuery based JavaScript controls, so try to use JavaScript when interacting with them.!

• There's no re-initialization with options on the SAME markup. $().destroy things first.!

Some things to remember with Fuel UX

Track: Developers

#CNX14

Track: Developers

#CNX14

Moving forward with Fuel UX!

Track: Developers

#CNX14

Moving forward with Fuel UX

•  More code examples!•  Community contributions!•  Quick-start layouts !•  Theo theme tokenizer!•  Additional controls!

What’s next?!

Track: Developers

#CNX14

Get started today with Fuel UX!•  Fuel UX on Github!

•  https://github.com/ExactTarget/fuelux!•  Fuel UX Documentation!

•  http://exacttarget.github.io/fuelux/!•  Marketing Cloud Theme!

•  https://github.com/ExactTarget/fuelux-mctheme/!

Track: Developers

#CNX14

Get help with Fuel UX!• Create an issue on Github if you think it is a bug!• Ask a `fuelux` tagged question on StackOverflow.!

Track: Developers

#CNX14

Appendix A: Upgrading from Fuel UX 2.x!•  First convert your project to Bootstrap 3!•  Fuel UX 3 is not backwards compatible with v2.x!•  Not bundling with any other repos (use a dependency manager)!•  All the benefits and trappings of Bootstrap 3!•  Most JavaScript methods remain the same from Fuel UX 2.x!•  Events are namespaced [eventname].fu.[controlname]For more information visit: http://exacttarget.github.io/fuelux/migration.html

Track: Developers

#CNX14

Appendix B: Upgrading to Bootstrap 3!•  Migrate your html: Guides and "best effort" convertors!

•  Official migration guide http://getbootstrap.com/migration/!•  Bootply's Migration guide & convertor!

•  http://www.bootply.com/bootstrap-3-migration-guide!•  http://upgrade-bootstrap.bootply.com/!

•  http://twitterbootstrapmigrator.w3masters.nl/!•  http://code.divshot.com/bootstrap3_upgrader/!

•  Start from scratch!•  http://www.bootply.com/!

Track: Developers

#CNX14 Any Questions?

Download slide deck at Slideshare.net/InteractiveLlama/cnx14-fuelux