bootstrap your app
Post on 27-Jan-2015
111 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
<!--[if IE]><![if gte IE 7]><![endif]-->!
<p>This is shown in downlevel browsers and IE7 or later.</p>!
<!--[if IE]><![endif]><![endif]-->!
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.
THANKS, TWITTER.
THANKS, TWITTER.
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">!
<!-- Bootstrap -->!
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">!
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->!
<!--[if lt IE 9]>!
<script src="../../assets/js/html5shiv.js"></script>!
<script src="../../assets/js/respond.min.js"></script>!
<![endif]-->!
</head>!
<body>!
<h1>Hello, world!</h1>!
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->!
<script src="//code.jquery.com/jquery.js"></script>!
<!-- Include all compiled plugins (below), or include individual files as needed -->!
<script src="js/bootstrap.min.js"></script>!
</body>!
</html>!
GOTCHA! <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->!
<!--[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>!
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->!
<script src="//code.jquery.com/jquery.js"></script>!
<!-- Include all compiled plugins (below), or include individual files as needed -->!
<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 == 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
top related