Sexy HTML with Twitter Bootstrap

5,949 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,949
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×