Sexy dashboards with bootstrap

A presentation at Devopsdays Austin in April 2013 in Austin, TX, USA by Karthik Gaekwad

Slide 1

Slide 1

Yo! Sexy Dashboards! Karthik Gaekwad @iteration1

Slide 2

Slide 2

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

Slide 3

Slide 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

Slide 4

Slide 4

Slide 5

Slide 5

I’d rather be screaming

Slide 6

Slide 6

Then I saw the light

Slide 7

Slide 7

Twitter Bootstrap

Slide 8

Slide 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”

Slide 9

Slide 9

Free Trivia! You’re in good hands

Slide 10

Slide 10

Goodbye pixel issues Hello 12x12 grid

Slide 11

Slide 11

The grid is responsive

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

Top 3 Tips Use Font Awesome for icons

Slide 18

Slide 18

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

Slide 19

Slide 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.

Slide 20

Slide 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-badasslist-of-twitter-bootstrap-resources)