Introduction to Twitter’sBootstrap   by @julienrenaux @eBay
What is Bootstrap?   UI framework (set of JavaScript, CSS, and images)   Open Source project   Supports HTML5 and CSS3...
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...
Bootstrap Features: Grid System   Examples
Bootstrap Features: Components (CSS)   Buttons:   Tabs:   Breadcrumb:   Pagination:   Alerts:   Progress bar:
Bootstrap Features: JavaScript
Bootstrap Features: Customization   CSS Components
Bootstrap Features: Customization   JavaScript (JQuery)   JavaScript (Mootools)    http://anutron.github.com/mootools-bo...
Bootstrap Features: Customization   CSS variables (Less)                          http://lesscss.org
Bootstrap Features: Customization
Bootstrap Features: Customization
Bootstrap Features: Customization
Why using Bootstrap?: Great Features   Grid System   Dozens of CSS components   JavaScript plugins   Web-based Customi...
Why using Bootstrap?: Live mockups
Why using Bootstrap?: Live mockups
Why using Bootstrap?: Live mockups
Why using Bootstrap?: Live mockups   Easy creation of proof of concept   Ability to gather alpha testers feedbacks early...
Why using Bootstrap?: Responsive Design   What is it?
Why using Bootstrap?: Responsive Design   Multi platform support (Mobile phones, Tablets,    laptops large screens)   10...
Why using Bootstrap?: Summary   Great Features   Responsive Design   Live mockups   Big community
Built with Bootstrap: Joomla 3.0
Built with Bootstrap: Viadeo
Built with Bootstrap: SlideShare   http://www.slideshare.net/julienrenaux
ThanksQuestions?   Bootstrap repository: http://github.com/twitter/bootstrap   Bootstrap showcase: http://twitter.github...
Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2
Upcoming SlideShare
Loading in...5
×

Introduction to Twitter's Bootstrap 2

13,548

Published on

Presentation I made @eBay Shanghai.
1. Bootstrap Features
2. Why using Bootstrap
3. Built with Bootstrap

Published in: Technology
3 Comments
12 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,548
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
770
Comments
3
Likes
12
Embeds 0
No embeds

No notes for slide
  • 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?
  • Introduction to Twitter's Bootstrap 2

    1. 1. Introduction to Twitter’sBootstrap by @julienrenaux @eBay
    2. 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. 3. What is Bootstrap? Creators Figures (November 2012)  39,912 star  9,808 fork  5,571 closed issues
    4. 4. Bootstrap Features: Grid System 960 Grid System http://960.gs/ Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem.com/
    5. 5. Bootstrap Features: Grid System Examples
    6. 6. Bootstrap Features: Components (CSS) Buttons: Tabs: Breadcrumb: Pagination: Alerts: Progress bar:
    7. 7. Bootstrap Features: JavaScript
    8. 8. Bootstrap Features: Customization CSS Components
    9. 9. Bootstrap Features: Customization JavaScript (JQuery) JavaScript (Mootools) http://anutron.github.com/mootools-bootstrap
    10. 10. Bootstrap Features: Customization CSS variables (Less)  http://lesscss.org
    11. 11. Bootstrap Features: Customization
    12. 12. Bootstrap Features: Customization
    13. 13. Bootstrap Features: Customization
    14. 14. Why using Bootstrap?: Great Features Grid System Dozens of CSS components JavaScript plugins Web-based Customizer
    15. 15. Why using Bootstrap?: Live mockups
    16. 16. Why using Bootstrap?: Live mockups
    17. 17. Why using Bootstrap?: Live mockups
    18. 18. 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)
    19. 19. Why using Bootstrap?: Responsive Design What is it?
    20. 20. Why using Bootstrap?: Responsive Design Multi platform support (Mobile phones, Tablets, laptops large screens) 100% CSS (using Media Types: @media)
    21. 21. Why using Bootstrap?: Summary Great Features Responsive Design Live mockups Big community
    22. 22. Built with Bootstrap: Joomla 3.0
    23. 23. Built with Bootstrap: Viadeo
    24. 24. Built with Bootstrap: SlideShare http://www.slideshare.net/julienrenaux
    25. 25. ThanksQuestions? Bootstrap repository: http://github.com/twitter/bootstrap Bootstrap showcase: http://twitter.github.com/bootstrap
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×