0
Twitter BootstrapBy – Rajesh Bhansali – bhansali.rajesh.n@gmail.com
INTRODUCTION – By nerds, for nerds• Twitter Bootstrap is used to speed up the  development of new websites and web applica...
ORIGIN – When it began• Bootstrap was released in August 2011 by Twitter• It is developed by Mark Otto @mdo and Jacob  Tho...
POPULARITY – Bootstrap is widely accepted• On Github ,Bootstrap is the most popular starred and  popular forked repositori...
BUILT WITH BOOTSTRAP – Used by the best• Toyota.com - Needs no introduction• Appster – Fastest growing mobile firm in Aust...
PACKAGE – What’s included in Bootstrap?• Scaffolding: Global styles for the body to reset type and  background, link style...
WHAT ITS NOT – Make no mistake• Don’t mistake it to be a tool to make a browser support  HTML5• There is incomplete suppor...
GET STARTED – Lets do something with it• Using ready made examples available to us on the  Bootstrap website we will now t...
DRAWBACK – Be careful with fonts• One obvious drawback of using Bootstrap is that it  provides fixed font sizes(pixels) in...
RESOURCES – Few resources to look atFew Bootstrap resources to look at:• https://wrapbootstrap.com/  Make money from your ...
DECIDE – Using Bootstrap is a great choice• Is free! Saves you time & money. Implementation is  easy.• Simple and powerful...
Thank you!
Upcoming SlideShare
Loading in...5
×

Twitter bootstrap presentation

6,887

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,887
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
279
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Twitter bootstrap presentation"

  1. 1. Twitter BootstrapBy – Rajesh Bhansali – bhansali.rajesh.n@gmail.com
  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• Toyota.com - 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="//html5shim.googlecode.com/svn/trunk/html5.js"></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:• https://wrapbootstrap.com/ Make money from your Bootstrap developments• http://bootswatch.com/ Download easy to install CSS files to replace the original• http://jumpstartui.com/ Ready made design themes• http://stylebootstrap.info/ Interactive Bootstrap customization• http://320press.com/wpbs/ 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!
  1. A particular slide catching your eye?

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

×