SEXY HTML with Bootstrap Karthik Gaekwad iteration1 ACUG March 2013 Tuesday, March 19, 13
A presentation at Devopsdays Austin in March 2013 in Austin, TX, USA by Karthik Gaekwad
SEXY HTML with Bootstrap Karthik Gaekwad iteration1 ACUG 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
Open Tuesday, March 19, 13 SOAP API’s External Authenticated REST Internal Everyone has API’s
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 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!!!!!!
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 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-oftwitter-bootstrap-resources Better icons: http://fortawesome.github.com/Font-Awesome/ Tuesday, March 19, 13
Questions Tuesday, March 19, 13
