sexy dashboards with bootstrap
DESCRIPTION
Building html dashboards quickly with twitter bootstrap. An ignite talk that I gave at DevOpsDays Austin 2013.TRANSCRIPT
Yo! Sexy Dashboards!Karthik Gaekwad
@iteration1
Mo Money Mo Problems
• It is ridiculously hard to find front end web developers in ATX today
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
I’d rather be screaming
Then I saw the light
Twitter Bootstrap
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”
Free Trivia!
You’re in good hands
Hello 12x12 grid
Goodbye pixel issues
The grid is responsive
EVERYBODY GETS BASE CSS!!!
YOU GET CSS! YOU GET CSS!Fundamental HTML elements styled and enhanced with extensible classes.
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.
Dozens of reusable components for navigation, alerts, popovers, and more.
It’s like a awesome buffet of components
JQuery plugins rolled in
All the best ones, to make your life easier!
Top 3 TipsUse an online editor- it’s not crappy
Top 3 TipsUse Font Awesome for icons
Top 3 TipsUse bootsnipp for ideas (HTML snippets + design advice)
ENDIf 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.
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)