Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap Your App

2,345 views

Published on

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.

Published in: Technology
  • Be the first to comment

Bootstrap Your App

  1. 1. BOOTSTRAP YOUR APP JOE RINEHART BOOZ | ALLEN | HAMILTON Photo: AJ Cann
  2. 2. I. INTRODUCTION IN WHICH I’LL WHINE.
  3. 3. WHAT ARE WE TALKING ABOUT? Photo: milos milosevic
  4. 4. WHO AM I?
  5. 5. APPS? NO BETTER.
  6. 6. OH, SURE, STANDARDS. Me Photo: JohnONolan
  7. 7. APIS DESIGNED FOR PRODUCTIVITY Photo: Brian Gaid
  8. 8. THIS IS GOOD > Book.findAllByAuthor(“David Adams”)!
  9. 9. 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]-->!
  10. 10. TOOLS MADE BY THEIR USERS Us Them Photo: Stefan
  11. 11. WAT? .form-control:focus Vs. .form-control:[disabled] Photo: Stefan
  12. 12. 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-inout 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
  13. 13. II. OUR HERO A BRIEF INTRODUCTION
  14. 14. THANKS, TWITTER.
  15. 15. THANKS, TWITTER.
  16. 16. THANKS, TWITTER.
  17. 17. THANKS, TWITTER.
  18. 18. LET’S TAKE A TOUR…
  19. 19. …SEE, IT’S HOW IT SHOULD BE!
  20. 20. III. GETTING STARTED THIS IS THE HARDEST PART.
  21. 21. 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.
  22. 22. DOWNLOADING BOOTSTRAP 1.  Download from GetBootstrap.org 2.  Unzip file 3.  Open index.html 4.  Mutter “wtf?”
  23. 23. OH, DIST!
  24. 24. 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>!
  25. 25. 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]à!
  26. 26. 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>
  27. 27. ROLL YOUR OWN.
  28. 28. IV. LAYOUT PREREQUISITES AND BASIC DESIGN
  29. 29. BOOTSTRAP == HTML5 Always start your documents with the html doctype! Some of Bootstrap relies on it, and IE will be shimmed to it. <DOCTYPE html> <html> <!– stuff. --> </html>
  30. 30. BOOTSTRAP == MOBILE Bootstrap 3 is mobile first, but needs a little meta nudging for proper touch-zoom . <DOCTYPE html> <html> <head> <meta name="viewport" content="width=devicewidth, initial-scale=1.0"> </head> </html>
  31. 31. 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
  32. 32. 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
  33. 33. BOOTSTRAP == 12 COLUMN GRID This smells like tables to me…
  34. 34. BOOTSTRAP == 12 COLUMN GRID …but it works on mobile!
  35. 35. 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.
  36. 36. BOOTSTRAP == TABLES 1.  Borders 2.  Stripes 3.  Semantic backgrounds 4.  Mobile display
  37. 37. 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
  38. 38. 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
  39. 39. BOOTSTRAP == RESPONSIVE 1.  CSS classes can control visibility of content across device sizes 2.  Similarly, you can control print/screen visibility
  40. 40. V. COMPONENTS FROM PAGE TO APPLICATION
  41. 41. 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
  42. 42. 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
  43. 43. JAVASCRIPT COMPONENTS 1.  Transitions (fades) 2.  Modal windows 3.  Carousels 4.  “Aware” navigation 5.  …and so on.
  44. 44. VI. CUSTOMIZATION YOUR WAY, RIGHT AWAY
  45. 45. THREE ROUTES •  You can clone Bootstrap on GitHub, using Recess to compile the CSS •  You can use a form (recommended!) •  You can override
  46. 46. ADD-ONS 1.  jQuery UI Bootstrap Theme – Datepicker, autocomplete, overlay, sliders. Easiest to Google for it. 2.  Plugins are everywhere, but…
  47. 47. DON’T GO CRAZY.
  48. 48. VI. CONCLUSIONS I’M STILL NOT A DESIGNER
  49. 49. 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
  50. 50. THINK MOBILE
  51. 51. KEEP IT SIMPLE
  52. 52. SEARCH FOR PURPOSE

×