Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sexy HTML with Twitter Bootstrap

6,238 views

Published on

Using Twitter Bootstrap to design your HTML based application/site.

Published in: Technology
  • Be the first to comment

Sexy HTML with Twitter Bootstrap

  1. 1. SEXY HTML with Bootstrap Karthik Gaekwad iteration1 ACUG March 2013Tuesday, March 19, 13
  2. 2. My background Senior Web Software Engineer @MentorEmbedded Previously @NI I develop cloud based applications and API’s 9 years experience with webapps, API’s and UI’sTuesday, March 19, 13
  3. 3. A picture is worth a 1000 wordsTuesday, March 19, 13
  4. 4. Everyone has API’s Authenticated Internal REST External API’s SOAP OpenTuesday, March 19, 13
  5. 5. Tuesday, March 19, 13
  6. 6. It is a challenge for non front end engineers to create good looking HTML apps for their API’s.Tuesday, March 19, 13
  7. 7. This looks TERRIBLE Why can’t I center this in Internet Explorer Inline CSS? heading? This doesn’t work on What IDE do I use? my iphone Where do I start? Is there a book I can read? Why can’t I center this Javascript text!!!!!! frameworks? What is that even mean?Tuesday, March 19, 13
  8. 8. I can’t do this. I need a front end engineer.Tuesday, March 19, 13
  9. 9. You can cheat your way through this...Tuesday, March 19, 13
  10. 10. Twitter Bootstrap “Sleek, intuitive, and powerful front-end framework for faster and easier web development.” http://twitter.github.com/bootstrap/Tuesday, March 19, 13
  11. 11. Intro: Twitter Bootstrap Free collection of tools to create HTML, CSS, JS sites and apps. The most popular project in GitHub. Provides the basic scaffolding. Base CSS for all common HTML components. Basic site components. Javascript plugins (jQuery).Tuesday, March 19, 13
  12. 12. Step 1: Pick a theme Bootstrap comes with a regular theme. http://bootswatch.com/ has a bunch of them. https://wrapbootstrap.com/ if you’re looking to spend some serious cash.Tuesday, March 19, 13
  13. 13. Step 2: Design your site Hardcore? Use a text editor/Aptana Studio to write the HTML. Not Hardcore? Design Resources: Bootsnipp (http://bootsnipp.com/) Online Editors: Divshot (http://www.divshot.com/) Jetstrap (http://jetstrap.com/)Tuesday, March 19, 13
  14. 14. Step 3: Integrate with your API’s/data Server side/Client side/whatever... And you’re doneTuesday, March 19, 13
  15. 15. Other frameworks Bootstrap isn’t the only one in this space. It is the most popular one Foundation: http://foundation.zurb.com/ Make your own conclusions: http:// responsive.vermilion.com/compare.phpTuesday, March 19, 13
  16. 16. Other resources Bootstrap Hero: http://www.bootstraphero.com/the-big-badass-list-of- twitter-bootstrap-resources Better icons: http://fortawesome.github.com/Font-Awesome/Tuesday, March 19, 13
  17. 17. QuestionsTuesday, March 19, 13

×