#CNX14 Fuel UX - Introduction to a robust UI library
-
Upload
stephen-james -
Category
Software
-
view
337 -
download
5
description
Transcript of #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