SEXY HTML with BootstrapKarthik Gaekwad iteration1ACUG March 2013

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

Tuesday, March 19, 13

A picture is worth a 1000 words

Tuesday, March 19, 13

Everyone has API’sIn

tern

al

Exte

rnalAPI’s

Open

AuthenticatedSO

AP

REST

Tuesday, 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

Where do I start?

Why can’t I center this heading?

What IDE do I use?

Javascript frameworks? What is

that even mean?

This doesn’t work on my iphone

Inline CSS?

Why can’t I center this text!!!!!!

This looks TERRIBLE in Internet Explorer

Is there a book I can read?

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 BootstrapFree 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 siteHardcore?

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 done

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

Tuesday, 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

Questions

Tuesday, March 19, 13