0
BootstrapIntroductionAndrea TarrTarr ConsultingJune 2012
Outline• What problem is Joomla trying to solve with  Bootstrap?                                                      June...
The Problem• The need for a style sheet for HTML markup• Core extension are the current de facto style sheet              ...
What is Bootstrap?• A style guide for HTML markup• Basic set of CSS for layout                                            ...
How does it work?<!DOCTYPE html><html lang="en">                                                               June 2012 <...
Demonstration• http://twitter.github.com/bootstrap/• Download Bootstrap                                                   ...
Exploring Bootstrap• To see examples online  • http://twitter.github.com/bootstrap/                                       ...
Resources• Download basic bootstrap  • http://twitter.github.com/bootstrap/                                               ...
Upcoming SlideShare
Loading in...5
×

Bootstrap Introduction

3,451

Published on

Work is well underway for adding Bootstrap to Joomla for the series 3.x. This presentation gives an overview of the problems that Joomla is trying to solve by using Bootstrap and a brief introduction to what Bootstrap is and how it works.
Given at the June 2012 monthly meeting of the Joomla User Group New England.

Published in: Technology, Sports
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,451
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
105
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • twitter.github.com/bootstrapSave to jz
  • My Web SiteThis is a paragraph
  • Transcript of "Bootstrap Introduction"

    1. 1. BootstrapIntroductionAndrea TarrTarr ConsultingJune 2012
    2. 2. 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
    3. 3. 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 isnt 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. 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. 5. 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>
    6. 6. 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
    7. 7. 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
    8. 8. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×