Introduction to Twitter's Bootstrap 2

Editor's Notes

• #2: My name is Julien, I am a Software Engineer @eBay and I am here to present an introduction to Twitter’s Bootstrap.
• #3: Bootstrap is what we call a UI framework. It contains a set of JavaScript, CSS, and images that helps you create quick, clean and highly usable applications .
• #6: Bootstrap is using a grid system base on 12 columns. What is a grid system? A grid system is a way to create a solid foundation to build your project on.If you want your web application to have a left navigation you could design your HTML using row number 3If you do not want any navigation and you want your content to be as wide as possible then you could use row number 5This grid design was popularized by 960 grid system http://960.gs and BluePrint http://www.blueprintcss.org
• #7: If you want to implement you application with a left navigation here is the HTML required.You also can nest your columns within columns.
• #8: Here is a list of some of the CSS component available. There are dozens of them available with bootstrap.
• #9: Bootstrap gives life to its UI by using Jquery plugins. Here are some examples of great Elements. Once again you have access dozens of them for free.
• #10: Bootstrap provides a web-based customizer that allow you to generate a CSS file based on your specific needs.
• #11: Same for the JavaScript plugins. For Mootools fans you can find a Mootools version here: http://anutron.github.com/mootools-bootstrap
• #12: Bootstrap also provides a way to generate a completely unique version of the CSS using LESS. I will not be talking about Less, all you need to know for now is that it compiles a LESS version of your CSS where you can define variables and nest CSS selectors.If you want more information please check http://lesscss.org/ out.
• #13: Now that you know about LESS, it is easily understandable that we can create totally different visuals based on the same HTML. Here are some good example
• #14: http://bootswatch.com
• #15: http://bootswatch.com
• #16: Now I will explain why using Bootstrap is a good choice.
• #17: Bootstrap has great features. We have just reviewed some of them and I am sure you already feel the potential this project has.Let’s summarize it. Bootstrap:Has Grid System => Allow you to create you web application scaffoldingContains dozens of CSS components => Allow you to create great UIIs powered by JavaScript plugins => Gives life to the CSS UICan be customized by using a web based customizer
• #18: Bootstrap is good to create live mockups (prototypes) Here is how mockups used to look like. I am sure some of you here are still using Balsamiqmockups, it a great tool but beside having a proof of concept you cannot do much with it. http://www.balsamiq.com/products/mockups
• #19: Here is what a mockup could look like when using Bootstrap.
• #21: Easy creation of proof of concept => To answer the question Is it doable?Gather early Feedbacks => To answer the questions: Is it good? Is it Viable? In your project you want to know as early as possible if a idea is not viable or not. If it is not good you want to fail fast (Agile kind of approach)One you have done all the research and the tests you can guide the execution of more sophisticated designs and larger engineering efforts.
• #22: It is the ability to resize the content of your web page to any device and screen size.
• #23: Bootstrap handle responsive design very well and it is a pretty neat feature to have nowadays with all the Mobile phones, Tablets, laptops and big screens we have available.Something also good to notice is that this responsive design is CSS driven. It used to be handle by JavaScript in some ancient time.
• #24: Great Features => Dozens of state of the art featuresResponsive Design => Feat all screensLive mockups => Go Agile!Big community => It is really important for a open source project. Bootstrap has bright future ahead.
• #26: Bootstrap is today widely used in the Web. It exists hundreds of templates for famous CMS like Joomla, WordPress and Drupal. One month ago Joomla surprised everybody by using Bootstrap for their latest version 3.0. For those who are interested in Joomla, you will also notice this change is a little revolution in itself. Joomla did not only switch to Bootstrap but also switch to Jquery… As Jquery is more popular and widely used across the web, I think as a Joomla fan that this change was necessary to attract a new community of developers that will give Joomla a brighter future.
• #27: Viadeo (the biggest LinkedIn competitor) they do not make it too obvious but they are based on Bootstrap.
• #29: I would like to thanks April for the invitation. Questions?