KEMBAR78
Bootstrap Introduction | PPTX
Bootstrap
Introduction
Andrea Tarr
Tarr Consulting
June 2012
Outline
• What problem is Joomla trying to solve with
  Bootstrap?




                                                      June 2012
• What is Bootstrap?
• How does it work?




                                                 New England • Andrea Tarr
                                                Bootstrap Introduction • JUG
• How will it work with Joomla?




                                                            2
The Problem
• The need for a style sheet for HTML markup
• Core extension are the current de facto style sheet




                                                              June 2012
• 3pd & custom extensions make up what they need
  that isn't in core – and they all do it differently




                                                         New England • Andrea Tarr
                                                        Bootstrap Introduction • JUG
• Templates have to code for specific extensions to
  maintain the look and feel of the web site
• Result is that many extensions look like iframes
  unrelated to the site




                                                                    3
What is Bootstrap?
• A style guide for HTML markup
• Basic set of CSS for layout




                                                             June 2012
• CSS styles for UI elements such as menus & buttons
• CSS styles for responsive design




                                                        New England • Andrea Tarr
                                                       Bootstrap Introduction • JUG
• Integrated JavaScript widgets (jQuery) for UI
  elements such as accordions, cara
• A set of icons that can be used
• Minified versions of the CSS & JS available



                                                                   4
How does it work?
<!DOCTYPE html>
<html lang="en">




                                                               June 2012
 <head>
  <title>My Web Site</title>
  <!-- Bootstrap -->




                                                          New England • Andrea Tarr
                                                         Bootstrap Introduction • JUG
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap.min.js"></script>
 </head>
 <body>
  <h1>My Web Site</h1>
  <p>This is a paragraph</p>
 </body>                                                             5
</html>
Demonstration
• http://twitter.github.com/bootstrap/
• Download Bootstrap




                                                             June 2012
• Save bootstrap.zip
• Unzip and rename folder if you want




                                                        New England • Andrea Tarr
                                                       Bootstrap Introduction • JUG
• Add an index.html file
• Add bootstrap CSS and JavaScript
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>



                                                                   6
Exploring Bootstrap
• To see examples online
  • http://twitter.github.com/bootstrap/




                                                 June 2012
• To download to your computer
  • Download with docs –or-




                                            New England • Andrea Tarr
                                           Bootstrap Introduction • JUG
  • https://github.com/twitter/bootstrap




                                                       7
Resources
• Download basic bootstrap
  • http://twitter.github.com/bootstrap/




                                                                    June 2012
• The full bootstrap source
  • https://github.com/twitter/bootstrap




                                                               New England • Andrea Tarr
                                                              Bootstrap Introduction • JUG
• Tutorials
  • http://webdesign.tutsplus.com/series/twitter-bootstrap-
    101/
• Tutorials on YouTube
  • http://www.youtube.com/watch?v=DgwtRpf60xI
• Joomla with Bootstrap
  • https://github.com/Joomla3-Admin-template/joomla-
    cms/tree/template                                                     8

Bootstrap Introduction

  • 1.
  • 2.
    Outline • What problemis Joomla trying to solve with Bootstrap? June 2012 • What is Bootstrap? • How does it work? New England • Andrea Tarr Bootstrap Introduction • JUG • How will it work with Joomla? 2
  • 3.
    The Problem • Theneed for a style sheet for HTML markup • Core extension are the current de facto style sheet June 2012 • 3pd & custom extensions make up what they need that isn't in core – and they all do it differently New England • Andrea Tarr Bootstrap Introduction • JUG • Templates have to code for specific extensions to maintain the look and feel of the web site • Result is that many extensions look like iframes unrelated to the site 3
  • 4.
    What is Bootstrap? •A style guide for HTML markup • Basic set of CSS for layout June 2012 • CSS styles for UI elements such as menus & buttons • CSS styles for responsive design New England • Andrea Tarr Bootstrap Introduction • JUG • Integrated JavaScript widgets (jQuery) for UI elements such as accordions, cara • A set of icons that can be used • Minified versions of the CSS & JS available 4
  • 5.
    How does itwork? <!DOCTYPE html> <html lang="en"> June 2012 <head> <title>My Web Site</title> <!-- Bootstrap --> New England • Andrea Tarr Bootstrap Introduction • JUG <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>My Web Site</h1> <p>This is a paragraph</p> </body> 5 </html>
  • 6.
    Demonstration • http://twitter.github.com/bootstrap/ • DownloadBootstrap June 2012 • Save bootstrap.zip • Unzip and rename folder if you want New England • Andrea Tarr Bootstrap Introduction • JUG • Add an index.html file • Add bootstrap CSS and JavaScript <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script> 6
  • 7.
    Exploring Bootstrap • Tosee examples online • http://twitter.github.com/bootstrap/ June 2012 • To download to your computer • Download with docs –or- New England • Andrea Tarr Bootstrap Introduction • JUG • https://github.com/twitter/bootstrap 7
  • 8.
    Resources • Download basicbootstrap • http://twitter.github.com/bootstrap/ June 2012 • The full bootstrap source • https://github.com/twitter/bootstrap New England • Andrea Tarr Bootstrap Introduction • JUG • Tutorials • http://webdesign.tutsplus.com/series/twitter-bootstrap- 101/ • Tutorials on YouTube • http://www.youtube.com/watch?v=DgwtRpf60xI • Joomla with Bootstrap • https://github.com/Joomla3-Admin-template/joomla- cms/tree/template 8

Editor's Notes

  • #6 twitter.github.com/bootstrapSave to jz
  • #7 My Web SiteThis is a paragraph