sexy dashboards with bootstrap

20
Yo! Sexy Dashboards! Karthik Gaekwad @iteration1

Upload: karthik-gaekwad

Post on 20-May-2015

4.672 views

Category:

Technology


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Sexy dashboards with bootstrap

Yo! Sexy Dashboards!Karthik Gaekwad

@iteration1

Page 2: Sexy dashboards with bootstrap

Mo Money Mo Problems

• It is ridiculously hard to find front end web developers in ATX today

Page 3: Sexy dashboards with bootstrap

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

Page 4: Sexy dashboards with bootstrap
Page 5: Sexy dashboards with bootstrap

I’d rather be screaming

Page 6: Sexy dashboards with bootstrap

Then I saw the light

Page 7: Sexy dashboards with bootstrap

Twitter Bootstrap

Page 8: Sexy dashboards with 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”

Page 9: Sexy dashboards with bootstrap

Free Trivia!

You’re in good hands

Page 10: Sexy dashboards with bootstrap

Hello 12x12 grid

Goodbye pixel issues

Page 11: Sexy dashboards with bootstrap

The grid is responsive

Page 12: Sexy dashboards with bootstrap

EVERYBODY GETS BASE CSS!!!

YOU GET CSS! YOU GET CSS!Fundamental HTML elements styled and enhanced with extensible classes.

Page 13: Sexy dashboards with bootstrap

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.

Page 14: Sexy dashboards with bootstrap

Dozens of reusable components for navigation, alerts, popovers, and more.

It’s like a awesome buffet of components

Page 15: Sexy dashboards with bootstrap

JQuery plugins rolled in

All the best ones, to make your life easier!

Page 16: Sexy dashboards with bootstrap

Top 3 TipsUse an online editor- it’s not crappy

Page 17: Sexy dashboards with bootstrap

Top 3 TipsUse Font Awesome for icons

Page 18: Sexy dashboards with bootstrap

Top 3 TipsUse bootsnipp for ideas (HTML snippets + design advice)

Page 19: Sexy dashboards with bootstrap

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.