Sexy dashboards with bootstrap

7,009 views

Published on

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

Published in: Technology, Design
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
7,009
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
27
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Sexy dashboards with bootstrap

  1. 1. Yo! Sexy Dashboards!Karthik Gaekwad@iteration1
  2. 2. Mo Money Mo Problems• It isridiculouslyhard to findfront end webdevelopers inATX today
  3. 3. I got problems man• I work on a lot of UI stuff because my 1stproject in my life was UI intensive.• But really, I like working with API’s more
  4. 4. I’d rather be screaming
  5. 5. Then I saw the light
  6. 6. TwitterBootstrap
  7. 7. Bootstrap• “Sleek, intuitive, and powerful front-endframework for faster and easier webdevelopment.”• Read: “No more praying to Baby Jesus fornicer looking frontends”
  8. 8. Free Trivia!You’re in goodhands
  9. 9. Hello 12x12 gridGoodbye pixel issues
  10. 10. The grid is responsive
  11. 11. EVERYBODY GETS BASE CSS!!!YOU GET CSS! YOU GET CSS!Fundamental HTML elements styled and enhanced with extensible classes.
  12. 12. Themes and Templates• THIS IS A SOLVEDPROBLEM!• Save your time:• http://bootswatch.com/has a bunch of them.• https://wrapbootstrap.com/ ifyou’re looking tospend some seriouscash.
  13. 13. Dozens of reusable components for navigation,alerts, popovers, and more.It’s like a awesome buffet of components
  14. 14. JQuery plugins rolled inAll the best ones,to make your life easier!
  15. 15. Top 3 TipsUse an online editor- it’s not crappy
  16. 16. Top 3 TipsUse Font Awesome for icons
  17. 17. Top 3 TipsUse bootsnipp for ideas (HTML snippets + design advice)
  18. 18. ENDIf you don’t know HTML, but yourmgmt loves dashboards and UI, checkout bootstrap to impress them withAWESOME UI’s, that can be built reallyfast.
  19. 19. 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)

×