This document discusses using Twitter Bootstrap to create HTML applications and interfaces for APIs. It provides an introduction to Bootstrap, outlines basic steps for using it which include choosing a theme, designing the site, and integrating it with APIs. Alternatives to Bootstrap like Foundation are also mentioned. The document aims to help non-front end engineers easily create good looking HTML interfaces for their APIs using Bootstrap.

1. SEXY HTML with Bootstrap
Karthik Gaekwad
iteration1
ACUG March 2013
Tuesday, March 19, 13

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’s
Tuesday, March 19, 13

3. A picture is worth a 1000 words
Tuesday, March 19, 13

4. Everyone has API’s
Authenticated
Internal
REST
External
API’s
SOAP
Open
Tuesday, March 19, 13

5. Tuesday, March 19, 13

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. 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. I can’t do this.
I need a front end
engineer.
Tuesday, March 19, 13

9. You can cheat your
way through this...
Tuesday, March 19, 13

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. 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. 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. 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. Step 3: Integrate with your
API’s/data
Server side/Client side/whatever...
And you’re done
Tuesday, March 19, 13

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.php
Tuesday, March 19, 13

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. Questions
Tuesday, March 19, 13