bootstrap your app
DESCRIPTION
Speaker: Joe Rinehart Somehow I've gained a reputation for applications that users think look good and are easy to use. I think my code's sometimes pretty, but please don't ask me to center something in CSS or Photoshop my way to fame and fortune. Recently, all the credit really goes to Twitter's Bootstrap UI library. Join me for a bit as I take you through the basics of integrating Bootstrap into a Grails application, its semantics, the "whoa, that just works!" controls it provides, where to find nice add-ons such as Bootstrappish icons, and how you can leverage the Grails framework to make your Bootstrapped life even easier.TRANSCRIPT
![Page 1: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/1.jpg)
BOOTSTRAP YOUR APP JOE RINEHART
BOOZ | ALLEN | HAMILTON
Photo: AJ Cann
![Page 2: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/2.jpg)
I. INTRODUCTION
IN WHICH I’LL WHINE.
![Page 3: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/3.jpg)
WHAT ARE WE TALKING ABOUT? Photo: milos milosevic
![Page 4: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/4.jpg)
WHO AM I?
![Page 5: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/5.jpg)
![Page 6: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/6.jpg)
APPS? NO BETTER.
![Page 7: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/7.jpg)
![Page 8: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/8.jpg)
![Page 9: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/9.jpg)
OH, SURE, STANDARDS.
Photo: JohnONolan
Me
![Page 10: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/10.jpg)
APIS DESIGNED FOR PRODUCTIVITY
Photo: Brian Gaid
![Page 11: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/11.jpg)
THIS IS GOOD
> Book.findAllByAuthor(“David Adams”)!
![Page 12: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/12.jpg)
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]-->!
![Page 13: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/13.jpg)
TOOLS MADE BY THEIR USERS Us Them
Photo: Stefan
![Page 14: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/14.jpg)
WAT?
Photo: Stefan
.form-control:focus Vs.
.form-control:[disabled]
![Page 15: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/15.jpg)
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; }
![Page 16: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/16.jpg)
II. OUR HERO
A BRIEF INTRODUCTION
![Page 17: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/17.jpg)
THANKS, TWITTER.
![Page 18: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/18.jpg)
THANKS, TWITTER.
![Page 19: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/19.jpg)
THANKS, TWITTER.
![Page 20: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/20.jpg)
THANKS, TWITTER.
![Page 21: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/21.jpg)
LET’S TAKE A TOUR…
![Page 22: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/22.jpg)
…SEE, IT’S HOW IT SHOULD BE!
![Page 23: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/23.jpg)
III. GETTING STARTED
THIS IS THE HARDEST PART.
![Page 24: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/24.jpg)
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.
![Page 25: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/25.jpg)
DOWNLOADING BOOTSTRAP 1. Download from GetBootstrap.org 2. Unzip file 3. Open index.html
4. Mutter “wtf?”
![Page 26: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/26.jpg)
OH, DIST!
![Page 27: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/27.jpg)
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>!
![Page 28: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/28.jpg)
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]à!
![Page 29: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/29.jpg)
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>
![Page 30: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/30.jpg)
ROLL YOUR OWN.
![Page 31: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/31.jpg)
IV. LAYOUT
PREREQUISITES AND BASIC DESIGN
![Page 32: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/32.jpg)
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.
![Page 33: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/33.jpg)
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 .
![Page 34: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/34.jpg)
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
![Page 35: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/35.jpg)
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
![Page 36: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/36.jpg)
BOOTSTRAP == 12 COLUMN GRID
This smells like tables to me…
![Page 37: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/37.jpg)
BOOTSTRAP == 12 COLUMN GRID
…but it works on mobile!
![Page 38: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/38.jpg)
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.
![Page 39: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/39.jpg)
BOOTSTRAP == TABLES
1. Borders 2. Stripes 3. Semantic backgrounds
4. Mobile display
![Page 40: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/40.jpg)
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
![Page 41: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/41.jpg)
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
![Page 42: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/42.jpg)
BOOTSTRAP == RESPONSIVE
1. CSS classes can control visibility of content across device sizes
2. Similarly, you can control print/screen visibility
![Page 43: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/43.jpg)
V. COMPONENTS
FROM PAGE TO APPLICATION
![Page 44: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/44.jpg)
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
![Page 45: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/45.jpg)
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
![Page 46: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/46.jpg)
JAVASCRIPT COMPONENTS 1. Transitions (fades) 2. Modal windows 3. Carousels
4. “Aware” navigation
5. …and so on.
![Page 47: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/47.jpg)
VI. CUSTOMIZATION
YOUR WAY, RIGHT AWAY
![Page 48: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/48.jpg)
THREE ROUTES • You can clone Bootstrap on GitHub, using Recess to
compile the CSS • You can use a form (recommended!) • You can override
![Page 49: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/49.jpg)
ADD-ONS 1. jQuery UI Bootstrap Theme – Datepicker, autocomplete,
overlay, sliders. Easiest to Google for it. 2. Plugins are everywhere, but…
![Page 50: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/50.jpg)
DON’T GO CRAZY.
![Page 51: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/51.jpg)
VI. CONCLUSIONS
I’M STILL NOT A DESIGNER
![Page 52: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/52.jpg)
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
![Page 53: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/53.jpg)
THINK MOBILE
![Page 54: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/54.jpg)
KEEP IT SIMPLE
![Page 55: Bootstrap Your App](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c7ae014a79592e4b8b4583/html5/thumbnails/55.jpg)
SEARCH FOR PURPOSE