Bootstrap Introduction
Upcoming SlideShare
Loading in...5
×
 

Bootstrap Introduction

on

  • 3,677 views

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 ...

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.

Statistics

Views

Total Views
3,677
Views on SlideShare
3,668
Embed Views
9

Actions

Likes
2
Downloads
77
Comments
0

1 Embed 9

http://us-w1.rockmelt.com 9

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • twitter.github.com/bootstrapSave to jz
  • My Web SiteThis is a paragraph

Bootstrap Introduction Bootstrap Introduction Presentation Transcript

  • BootstrapIntroductionAndrea TarrTarr ConsultingJune 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 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
  • 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