Sexy HTML with Twitter Bootstrap

A presentation at Devopsdays Austin in March 2013 in Austin, TX, USA by Karthik Gaekwad

Slide 1

Slide 1

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

Slide 2

Slide 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

Slide 3

Slide 3

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

Slide 4

Slide 4

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

Slide 5

Slide 5

Tuesday, March 19, 13

Slide 6

Slide 6

It is a challenge for non front end engineers to create good looking HTML apps for their API’s. Tuesday, March 19, 13

Slide 7

Slide 7

This looks TERRIBLE in Internet Explorer This doesn’t work on my iphone Inline CSS? Why can’t I center this heading? What IDE do I use? Where do I start? Is there a book I can read? Javascript frameworks? What is that even mean? Tuesday, March 19, 13 Why can’t I center this text!!!!!!

Slide 8

Slide 8

I can’t do this. I need a front end engineer. Tuesday, March 19, 13

Slide 9

Slide 9

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

Slide 10

Slide 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

Slide 11

Slide 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

Slide 12

Slide 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

Slide 13

Slide 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

Slide 14

Slide 14

Step 3: Integrate with your API’s/data Server side/Client side/whatever… And you’re done Tuesday, March 19, 13

Slide 15

Slide 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

Slide 16

Slide 16

Other resources Bootstrap Hero: http://www.bootstraphero.com/the-big-badass-list-oftwitter-bootstrap-resources Better icons: http://fortawesome.github.com/Font-Awesome/ Tuesday, March 19, 13

Slide 17

Slide 17

Questions Tuesday, March 19, 13