Sexy HTML with Twitter Bootstrap
Upcoming SlideShare
Loading in...5
×
 

Sexy HTML with Twitter Bootstrap

on

  • 4,624 views

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

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

Statistics

Views

Total Views
4,624
Views on SlideShare
4,624
Embed Views
0

Actions

Likes
0
Downloads
28
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sexy HTML with Twitter Bootstrap Sexy HTML with Twitter Bootstrap Presentation Transcript

  • SEXY HTML with Bootstrap Karthik Gaekwad iteration1 ACUG March 2013Tuesday, March 19, 13
  • 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
  • A picture is worth a 1000 wordsTuesday, March 19, 13
  • Everyone has API’s Authenticated Internal REST External API’s SOAP OpenTuesday, March 19, 13
  • Tuesday, March 19, 13
  • It is a challenge for non front end engineers to create good looking HTML apps for their API’s.Tuesday, March 19, 13
  • 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
  • I can’t do this. I need a front end engineer.Tuesday, March 19, 13
  • You can cheat your way through this...Tuesday, March 19, 13
  • Twitter Bootstrap “Sleek, intuitive, and powerful front-end framework for faster and easier web development.” http://twitter.github.com/bootstrap/Tuesday, March 19, 13
  • 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
  • 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
  • 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
  • Step 3: Integrate with your API’s/data Server side/Client side/whatever... And you’re doneTuesday, March 19, 13
  • 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
  • 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
  • QuestionsTuesday, March 19, 13