Building html dashboards quickly with twitter bootstrap. An ignite talk that I gave at DevOpsDays Austin 2013.

1. Yo! Sexy Dashboards!
Karthik Gaekwad
@iteration1

2. Mo Money Mo Problems
• It is
ridiculously
hard to find
front end web
developers in
ATX today

3. I got problems man
• I work on a lot of UI stuff because my 1st
project in my life was UI intensive.
• But really, I like working with API’s more

5. I’d rather be screaming

6. Then I saw the light

7. Twitter
Bootstrap

8. Bootstrap
• “Sleek, intuitive, and powerful front-end
framework for faster and easier web
development.”
• Read: “No more praying to Baby Jesus for
nicer looking frontends”

9. Free Trivia!
You’re in good
hands

10. Hello 12x12 grid
Goodbye pixel issues

11. The grid is responsive

12. EVERYBODY GETS BASE CSS!!!
YOU GET CSS! YOU GET CSS!
Fundamental HTML elements styled and enhanced with extensible classes.

13. Themes and Templates
• THIS IS A SOLVED
PROBLEM!
• Save your time:
• http://
bootswatch.com/
has a bunch of them.
• https://
wrapbootstrap.com/ if
you’re looking to
spend some serious
cash.

14. Dozens of reusable components for navigation,
alerts, popovers, and more.
It’s like a awesome buffet of components

15. JQuery plugins rolled in
All the best ones,
to make your life easier!

16. Top 3 Tips
Use an online editor- it’s not crappy

17. Top 3 Tips
Use Font Awesome for icons

18. Top 3 Tips
Use bootsnipp for ideas (HTML snippets + design advice)

19. END
If you don’t know HTML, but your
mgmt loves dashboards and UI, check
out bootstrap to impress them with
AWESOME UI’s, that can be built really
fast.

20. Check it out!
• Bootstrap: http://twitter.github.io/bootstrap/
getting-started.html
• Bootsnipp: http://bootsnipp.com/
• Online Editors:
• Divshot (http://www.divshot.com/)
• Jetstrap (https://jetstrap.com/)
• Bootstrap hero (http://
www.bootstraphero.com/the-big-badass-
list-of-twitter-bootstrap-resources)