My name is Julien, I am a Software Engineer @eBay and I am here to present an introduction to Twitter’s Bootstrap.
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
If you want to implement you application with a left navigation here is the HTML required.You also can nest your columns within columns.
Here is a list of some of the CSS component available. There are dozens of them available with bootstrap.
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.
Bootstrap provides a web-based customizer that allow you to generate a CSS file based on your specific needs.
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.
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
Now I will explain why using Bootstrap is a good choice.
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
Here is what a mockup could look like when using Bootstrap.
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.
It is the ability to resize the content of your web page to any device and screen size.
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.
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.
Viadeo (the biggest LinkedIn competitor) they do not make it too obvious but they are based on Bootstrap.
I would like to thanks April for the invitation. Questions?
Introduction to Twitter's Bootstrap 2
Introduction to Twitter’sBootstrap by @julienrenaux @eBay
What is Bootstrap? Creators Figures (November 2012) 39,912 star 9,808 fork 5,571 closed issues
Bootstrap Features: Grid System 960 Grid System http://960.gs/ Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem.com/
Why using Bootstrap?: Live mockups Easy creation of proof of concept Ability to gather alpha testers feedbacks early in the project without doing any code (Agile) HTML scaffolding ready to use by developers (copy – past)
Why using Bootstrap?: Responsive Design What is it?
Why using Bootstrap?: Responsive Design Multi platform support (Mobile phones, Tablets, laptops large screens) 100% CSS (using Media Types: @media)
Why using Bootstrap?: Summary Great Features Responsive Design Live mockups Big community