Introduction to Twitter's Bootstrap 2
•Download as PPTX, PDF•
15 likes•16,727 views
Presentation I made @eBay Shanghai. 1. Bootstrap Features 2. Why using Bootstrap 3. Built with Bootstrap
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Introduction to Twitter's Bootstrap 2
Similar to Introduction to Twitter's Bootstrap 2 (20)
Recently uploaded
Recently uploaded (20)
Introduction to Twitter's Bootstrap 2
- 1. Introduction to Twitter’s Bootstrap by @julienrenaux @eBay
- 2. What is Bootstrap? UI framework (set of JavaScript, CSS, and images) Open Source project Supports HTML5 and CSS3 Supported by all major browsers (even IE7!!!) Released in August 2011
- 3. What is Bootstrap? Creators Figures (November 2012) 39,912 star 9,808 fork 5,571 closed issues
- 5. Bootstrap Features: Grid System 960 Grid System http://960.gs/ Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem.com/
- 6. Bootstrap Features: Grid System Examples
- 7. Bootstrap Features: Components (CSS) Buttons: Tabs: Breadcrumb: Pagination: Alerts: Progress bar:
- 9. Bootstrap Features: Customization CSS Components
- 10. Bootstrap Features: Customization JavaScript (JQuery) JavaScript (Mootools) http://anutron.github.com/mootools-bootstrap
- 11. Bootstrap Features: Customization CSS variables (Less) http://lesscss.org
- 16. Why using Bootstrap?: Great Features Grid System Dozens of CSS components JavaScript plugins Web-based Customizer
- 17. Why using Bootstrap?: Live mockups
- 18. Why using Bootstrap?: Live mockups
- 19. Why using Bootstrap?: Live mockups
- 20. 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)
- 21. Why using Bootstrap?: Responsive Design What is it?
- 22. Why using Bootstrap?: Responsive Design Multi platform support (Mobile phones, Tablets, laptops large screens) 100% CSS (using Media Types: @media)
- 23. Why using Bootstrap?: Summary Great Features Responsive Design Live mockups Big community
- 25. Built with Bootstrap: Joomla 3.0
- 26. Built with Bootstrap: Viadeo
- 27. Built with Bootstrap: SlideShare http://www.slideshare.net/julienrenaux
- 28. Thanks Questions? Bootstrap repository: http://github.com/twitter/bootstrap Bootstrap showcase: http://twitter.github.com/bootstrap
Editor's Notes
- My name is Julien, I am a Software Engineer @eBay and I am here to present an introduction to Twitter’s Bootstrap.
- 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 .
- 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.
- Same for the JavaScript plugins. For Mootools fans you can find a Mootools version here: http://anutron.github.com/mootools-bootstrap
- 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
- http://bootswatch.com
- http://bootswatch.com
- Now I will explain why using Bootstrap is a good choice.
- 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
- 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.
- 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.
- 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?