Twitter bootstrap presentation


Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Twitter bootstrap presentation

  1. 1. Twitter BootstrapBy – Rajesh Bhansali –
  2. 2. INTRODUCTION – By nerds, for nerds• Twitter Bootstrap is used to speed up the development of new websites and web applications, and is open-sourced on GitHub. It utilizes LESS CSS and is compiled via Node.• With Bootstrap you can create HTML & CSS-based design templates that look and behave great in latest desktop, tablets & smartphone browsers by making use of responsive CSS.
  3. 3. ORIGIN – When it began• Bootstrap was released in August 2011 by Twitter• It is developed by Mark Otto @mdo and Jacob Thornton @fat at Twitter• Their idea was to develop a frontend UI framework to encourage consistency across internal tools and speed up the development of new websites.• The latest version of Bootstrap is 2.3.0
  4. 4. POPULARITY – Bootstrap is widely accepted• On Github ,Bootstrap is the most popular starred and popular forked repositories even leaving behind the likes of Nodejs, jQuery, HTML5-Boilerplate, Backbone to name a few• Some popular examples of websites built with Bootstrap available at visit the unofficial Tumblr, browse the examples• Joomla 3.0 uses Bootstrap• Themeforest is a very popular template provider. It has over 200 Bootstrap themes available for various CMSs such as Wordpress, Joomla and Drupal. Woothemes also uses Bootstrap
  5. 5. BUILT WITH BOOTSTRAP – Used by the best• - Needs no introduction• Appster – Fastest growing mobile firm in Australia• Quicklinkr - A home for all of your favorites• Open Cooks – Website for food lovers• Football Manager – Gaming website• Fleetio – Online vehicle management• Honest code –Create modern, accessible & searchable websites
  6. 6. PACKAGE – What’s included in Bootstrap?• Scaffolding: Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.• Base CSS: Styles for common HTML elements like typography, code, tables, forms, buttons & plus includes Glyphicons, icon set.• Components: Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.• Javascript plugins: Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.
  7. 7. WHAT ITS NOT – Make no mistake• Don’t mistake it to be a tool to make a browser support HTML5• There is incomplete support for HTML5 and CSS3 even though Bootstrap itself is compatible with all major browsers• Contains CSS3 styles for rounded corners, gradients & shadows.• You may include html5shiv to add basic support for HTML5 elements in older IE browsers <!--[if lt IE 9]> <script src="//"></script> <![endif]-->• Or use Modernizr in your project to detect browser features and create fallbacks for them including those of
  8. 8. GET STARTED – Lets do something with it• Using ready made examples available to us on the Bootstrap website we will now try to create a responsive fluid layout right from downloading it to customizing it for a project.• While doing this will also explore the original website, refer the original documentation and thereby get familiarized with it by going through some of the categories visible at the top of the Bootstrap documentation.• And also see how Open Cooks uses Bootstrap and explore a bit of it’s code.
  9. 9. DRAWBACK – Be careful with fonts• One obvious drawback of using Bootstrap is that it provides fixed font sizes(pixels) instead of relative font sizes(ems) which is results in a failure of accessibility guideline C14 (WCAG2.0)• The debate and explanation given by Mark Otto can be read here which is not completely convincing. In version 3.0 of Bootstrap we can expect fonts to be relatively defined.• For your projects where you make use of Bootstrap always prefer to override Bootstrap’s fixed font sizes and properties with relative units.
  10. 10. RESOURCES – Few resources to look atFew Bootstrap resources to look at:• Make money from your Bootstrap developments• Download easy to install CSS files to replace the original• Ready made design themes• Interactive Bootstrap customization• Ready made WordPress theme that has all the same features as Twitter’s Bootstrap.
  11. 11. DECIDE – Using Bootstrap is a great choice• Is free! Saves you time & money. Implementation is easy.• Simple and powerful grid system• Gives you free CSS styles such as animated buttons, icons, static navigation bars, and image thumbnails.• Inbuilt jQuery Plugins to add interactivity to websites• Best is you can make a responsive website for all devices• Being open sourced on GitHub anyone can contribute
  12. 12. Thank you!