#cnx14 fuel ux - introduction to a robust ui library
DESCRIPTION
Extends Twitter Bootstrap with additional lightweight JavaScript controls. Easy to install, customize, update, and optimize. All functionality covered by live documentation and unit tests. Learn more at http://getFuelUX.comTRANSCRIPT
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