bootstrap your app

BOOTSTRAP YOUR APP JOE RINEHART

BOOZ | ALLEN | HAMILTON

Photo: AJ Cann

I. INTRODUCTION

IN WHICH I’LL WHINE.

WHAT ARE WE TALKING ABOUT? Photo: milos milosevic

WHO AM I?

APPS? NO BETTER.

OH, SURE, STANDARDS.

Photo: JohnONolan

Me

APIS DESIGNED FOR PRODUCTIVITY

Photo: Brian Gaid

THIS IS GOOD

> Book.findAllByAuthor(“David Adams”)!

THIS IS NOT

!

<p>This is shown in downlevel browsers and IE7 or later.</p>!

!

TOOLS MADE BY THEIR USERS Us Them

Photo: Stefan

WAT?

Photo: Stefan

.form-control:focus Vs.

.form-control:[disabled]

I NEED A HERO. .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in- out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }

II. OUR HERO

A BRIEF INTRODUCTION

THANKS, TWITTER.

LET’S TAKE A TOUR…

…SEE, IT’S HOW IT SHOULD BE!

III. GETTING STARTED

THIS IS THE HARDEST PART.

INSTALLATION PATHS 1.  There’s a plugin for that….but it’s outdated. 2.  You can use resources…but that adds dependencies. 3.  Or you can just be old school…which works everywhere.

DOWNLOADING BOOTSTRAP 1.  Download from GetBootstrap.org 2.  Unzip file 3.  Open index.html

4.  Mutter “wtf?”

OH, DIST!

USE THE TEMPLATE <!DOCTYPE html>!

<html>!

<head>!

<title>Bootstrap 101 Template</title>!

<meta name="viewport" content="width=device-width, initial-scale=1.0">!

!

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">!

!

!

</head>!

<body>!

<h1>Hello, world!</h1>!

!

<script src="//code.jquery.com/jquery.js"></script>!

!

<script src="js/bootstrap.min.js"></script>!

</body>!

</html>!

GOTCHA! !

<!--[if lt IE 9]>!

<script src="../../assets/js/html5shiv.js"></script>!

<script src="../../assets/js/respond.min.js"></script>!

<![endif]à!

AND JQUERY… <body>!

<h1>Hello, world!</h1>!

!

<script src="//code.jquery.com/jquery.js"></script>!

!

<script src="js/bootstrap.min.js"></script>!

</body>

ROLL YOUR OWN.

IV. LAYOUT

PREREQUISITES AND BASIC DESIGN

BOOTSTRAP == HTML5

<DOCTYPE html>

<html>

<!– stuff. -->

</html>

Always start your documents with the html doctype! Some of Bootstrap relies on it, and IE will be shimmed to it.

BOOTSTRAP == MOBILE

<DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-

width, initial-scale=1.0">

</head>

</html>

Bootstrap 3 is mobile first, but needs a little meta nudging for proper touch-zoom .

BOOTSTRAP == MODERN

Bootstrap makes a few design decisions for you, namely: 1.  It sets the default font to Helvetica Neue instead of Times

New Roman

2.  Links are only underlined on hover

3.  Pages have no margin

BOOTSTRAP == 12 COLUMN GRID

This smells like tables to me…

BOOTSTRAP == 12 COLUMN GRID

…but it works on mobile!

BOOTSTRAP == SEMANTICS

1.  Use semantic tags like <hN>, <strong>, <em>, <abbr>, <address>, and <blockquote>

2.  Use semantic Bootstrap classes to classify text: muted, success, warning, etc.

BOOTSTRAP == TABLES

1.  Borders 2.  Stripes 3.  Semantic backgrounds

4.  Mobile display

BOOTSTRAP == FORM LAYOUT

1.  Bootstrap makes it easy to do horizontal, vertical, and inline (one-row) forms

2.  Special classes make it simple to show “state,” such as error or warning

BOOTSTRAP == BUTTONS

1.  Bootstrap provides a set of semantic button classes in eye-candy colors

2.  Links can also be made into buttons, making it much easier to have consistent control bars on forms!

3.  Buttons can also be made to look like links while retaining button functionality

BOOTSTRAP == RESPONSIVE

1.  CSS classes can control visibility of content across device sizes

2.  Similarly, you can control print/screen visibility

V. COMPONENTS

FROM PAGE TO APPLICATION

MAJOR COMPONENTS 1.  Drop-down menus that work, use very simple HTML, and

don’t require you to much around in JavaScript 2.  Buttons turned into control bars 3.  Tab, pill, and group navigators

4.  A navigation bar that handles mobile collapsing

MINOR COMPONENTS 1.  A list-based breadcrumb 2.  List-based pagination with disabled/enabled/active states 3.  Attention-grabbing text labels

4.  Badges

5.  Alert/info/warning-style text blocks

6.  Panels and wells

JAVASCRIPT COMPONENTS 1.  Transitions (fades) 2.  Modal windows 3.  Carousels

4.  “Aware” navigation

5.  …and so on.

VI. CUSTOMIZATION

YOUR WAY, RIGHT AWAY

THREE ROUTES •  You can clone Bootstrap on GitHub, using Recess to

compile the CSS •  You can use a form (recommended!) •  You can override

ADD-ONS 1.  jQuery UI Bootstrap Theme – Datepicker, autocomplete,

overlay, sliders. Easiest to Google for it. 2.  Plugins are everywhere, but…

DON’T GO CRAZY.

VI. CONCLUSIONS

I’M STILL NOT A DESIGNER

BOOTSTRAP’S HELPED ME… 1.  …look good. 2.  …go mobile. 3.  …overcome my fear of CSS,

HTML, and Javascript. 4.  …think about user interfaces in

terms of three principles.

Photo: JD Hancock

THINK MOBILE

KEEP IT SIMPLE

SEARCH FOR PURPOSE

bootstrap your app

Technology