Embed Size (px)
DESCRIPTION
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.
Citation preview
Bootstrap IntroductionAndrea TarrTarr ConsultingJune 2012
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
Outline• What problem is Joomla trying to solve with
Bootstrap?• What is Bootstrap?• How does it work?• How will it work with Joomla?
2
June 2
01
2
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
The Problem• The need for a style sheet for HTML markup• Core extension are the current de facto style
sheet• 3pd & custom extensions make up what they
need that isn't in core – and they all do it differently
• 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
June 2
01
2
3
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
What is Bootstrap?• A style guide for HTML markup• Basic set of CSS for layout• CSS styles for UI elements such as menus &
buttons• CSS styles for responsive design• 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
June 2
01
2
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
How does it work?<!DOCTYPE html><html lang="en"> <head> <title>My Web Site</title> <!-- Bootstrap --> <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></html>
June 2
01
2
5
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
Demonstration• http://twitter.github.com/bootstrap/• Download Bootstrap• Save bootstrap.zip• Unzip and rename folder if you want• 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>
June 2
01
2
6
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
Exploring Bootstrap• To see examples online• http://twitter.github.com/bootstrap/
• To download to your computer• Download with docs –or-• https://github.com/twitter/bootstrap
June 2
01
2
7
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
Resources• Download basic bootstrap• http://twitter.github.com/bootstrap/
• The full bootstrap source• https://github.com/twitter/bootstrap
• 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
June 2
01
2
