0
Bootstrap   & Joomla UI        Andrea Tarr  MetaScale /Sears HoldingsJoomla Day New England 2013
The ProblemUsing BootstrapBootstrap in JoomlaApril 13, 2013   JDNE: Bootstrap & Joomla UI   2
The ProblemApril 13, 2013   JDNE: Bootstrap & Joomla UI   3
Not everything is in coreExtensions make up UITemplates must be codedfor specific extensionsPatchworkApril 13, 2013   JDNE...
BootstrapConsistencyCSS layout stylesCSS UI elementsCSS responsive stylesIntegrated JavaScriptFull set of iconsApril 13, 2...
BootstrapFast & FlexibleMinified CSSMinified JavaScriptCSS preprocessor, LESSApril 13, 2013   JDNE: Bootstrap & Joomla UI ...
UsingBootstrapApril 13, 2013   JDNE: Bootstrap & Joomla UI   7
Download the CSS &JavaScript filesCall the files plus jQueryin your programApril 13, 2013   JDNE: Bootstrap & Joomla UI   8
<link href="css/bootstrap.min.css"rel="stylesheet"><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.j...
Notice we used CSS &JavaScipt files.No LESS files.LESS is used to helpcreate Bootstrap CSSfiles but isnt need to useBootst...
DocumentationExamples & Downloadshttp://twitter.github.com/bootstrapApril 13, 2013   JDNE: Bootstrap & Joomla UI   11
Full Source(Includes .LESS files)http://github.com/twitter/bootstrapApril 13, 2013   JDNE: Bootstrap & Joomla UI   12
Grid System - Static                                      .spanx.row                                      .offsetxApril 13...
Grid System - Static<div class="row">  <div class="span4">     ...</div>  <div class="offset2     span6">...</div></div>Ap...
Grid System - Fluid                                     .spanx.row-fluid                                     .offsetxApril...
Grid System - Fluid<div class="row-fluid">  <div class="span4">     ...</div>  <div class="offset2     span6">...</div></d...
<div class="row-fluid"> <div class="span4">  <div class="row-fluid">    <div class="span3">...</div>    <div class="span9"...
Responsive classes.hidden-phone.visible-phone.hidden-tablet.visible-tablet.hidden-desktop.visible-desktopApril 13, 2013   ...
Text classes.muted.text-warning.text-error.text-info.text-successApril 13, 2013   JDNE: Bootstrap & Joomla UI   19
Useful classes.pull-right.pull-left.clearfix.element-invisible (JUI)April 13, 2013   JDNE: Bootstrap & Joomla UI   20
<table> classes.table.table-striped.table-condensed.table-border.table-hoverApril 13, 2013   JDNE: Bootstrap & Joomla UI  ...
<tr> classes.success                                  .warning.error                                    .infoApril 13, 201...
.btn.btn-primary.btn-info.btn-success.btn-warning.btn-danger.btn-inverse.btn-link	April 13, 2013   JDNE: Bootstrap & Jooml...
Size is optional.btn-large.btn-small.btn-mini<div> size.btn-blockApril 13, 2013   JDNE: Bootstrap & Joomla UI   24
Downloadstwitter.github.com/bootstrapgithub.com/twitter/bootstrapTutorialwebdesign.tutsplus.com/series/twitter-bootstrap-1...
Bootstrapin JoomlaApril 13, 2013   JDNE: Bootstrap & Joomla UI   26
Three Options1.  Use Bootstrap files in    Joomla2.  Download customized    Bootstrap files3.  Create template.css    file...
1. Use Bootstrap files inJoomlamedia jui   css   fonts   img   js   lessApril 13, 2013   JDNE: Bootstrap & Joomla UI   28
media/jui/cssbootstrap.cssbootstrap.min.cssbootstrap-responsive.cssbootstrap-responsive.min.cssbootstrap-extended.cssboots...
media/jui/csschosen-sprite.pngchosen.cssicomoon.csssortablelist.cssApril 13, 2013   JDNE: Bootstrap & Joomla UI   30
Load CSS automatically<?phpJHtml::_(bootstrap.loadCss);?>April 13, 2013   JDNE: Bootstrap & Joomla UI   31
Load main CSS filesJHtml::_(bootstrap.loadCss);Main CSS files plus RTL files<?php$doc=JFactory::getDocument();$this->direc...
Only RTL fileIf you loaded Bootstrap CSSseparately or its included inyour template.css file as inoptions 2&3.<?php$doc=JFa...
Load JavaScript<?phpJHtml::_(bootstrap.framework);?>April 13, 2013   JDNE: Bootstrap & Joomla UI   34
2. Download customizedBootstrap fileshttp://twitter.github.com/bootstrapCustomizeApril 13, 2013   JDNE: Bootstrap & Joomla...
Be safe: use the sameversionExtensions may needcomponents so includethemChange variables to suitDownload and include asnor...
3. Create template.cssfile from JoomlaBootstrap LESS filesCome to my LESS talkthis afternoonApril 13, 2013   JDNE: Bootstr...
Questions?April 13, 2013   JDNE: Bootstrap & Joomla UI   38
Upcoming SlideShare
Loading in...5
×

Bootstrap & Joomla UI

5,964

Published on

One of Joomla's greatest strengths is all the great extensions that can be integrated to add functionality to your website. From the point of view of the designer, this has always been one of the biggest problems -- How to make all these different extensions look like they are on the same site.

Joomla UI, with the included Bootstrap, is a way that Joomla 3.x fixes that. It is a stylesheet of UI -- the markup, the CSS, and the JavaScript behaviors, that extension & template developers can share. When templates and developers use the same UI, your site will look united.

This presentation will be an introduction to Bootstrap and JUI, what it is, what it can do, and how it will affect templates in Joomla. This talk will continue in the session on LESS, the CSS pre-compiler, that is used with Bootstrap.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,964
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
64
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Why you want to be here
  • 789px and below, 978 to 789, default
  • These all have both the .btn plus the special class.
  • These all have both the .btn plus the special class.
  • 789px and below, 978 to 789, default
  • 789px and below, 978 to 789, default
  • Transcript of "Bootstrap & Joomla UI"

    1. 1. Bootstrap & Joomla UI Andrea Tarr MetaScale /Sears HoldingsJoomla Day New England 2013
    2. 2. The ProblemUsing BootstrapBootstrap in JoomlaApril 13, 2013 JDNE: Bootstrap & Joomla UI 2
    3. 3. The ProblemApril 13, 2013 JDNE: Bootstrap & Joomla UI 3
    4. 4. Not everything is in coreExtensions make up UITemplates must be codedfor specific extensionsPatchworkApril 13, 2013 JDNE: Bootstrap & Joomla UI 4
    5. 5. BootstrapConsistencyCSS layout stylesCSS UI elementsCSS responsive stylesIntegrated JavaScriptFull set of iconsApril 13, 2013 JDNE: Bootstrap & Joomla UI 5
    6. 6. BootstrapFast & FlexibleMinified CSSMinified JavaScriptCSS preprocessor, LESSApril 13, 2013 JDNE: Bootstrap & Joomla UI 6
    7. 7. UsingBootstrapApril 13, 2013 JDNE: Bootstrap & Joomla UI 7
    8. 8. Download the CSS &JavaScript filesCall the files plus jQueryin your programApril 13, 2013 JDNE: Bootstrap & Joomla UI 8
    9. 9. <link href="css/bootstrap.min.css"rel="stylesheet"><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script>April 13, 2013 JDNE: Bootstrap & Joomla UI 9
    10. 10. Notice we used CSS &JavaScipt files.No LESS files.LESS is used to helpcreate Bootstrap CSSfiles but isnt need to useBootstrap.April 13, 2013 JDNE: Bootstrap & Joomla UI 10
    11. 11. DocumentationExamples & Downloadshttp://twitter.github.com/bootstrapApril 13, 2013 JDNE: Bootstrap & Joomla UI 11
    12. 12. Full Source(Includes .LESS files)http://github.com/twitter/bootstrapApril 13, 2013 JDNE: Bootstrap & Joomla UI 12
    13. 13. Grid System - Static .spanx.row .offsetxApril 13, 2013 JDNE: Bootstrap & Joomla UI 13
    14. 14. Grid System - Static<div class="row"> <div class="span4"> ...</div> <div class="offset2 span6">...</div></div>April 13, 2013 JDNE: Bootstrap & Joomla UI 14
    15. 15. Grid System - Fluid .spanx.row-fluid .offsetxApril 13, 2013 JDNE: Bootstrap & Joomla UI 15
    16. 16. Grid System - Fluid<div class="row-fluid"> <div class="span4"> ...</div> <div class="offset2 span6">...</div></div>April 13, 2013 JDNE: Bootstrap & Joomla UI 16
    17. 17. <div class="row-fluid"> <div class="span4"> <div class="row-fluid"> <div class="span3">...</div> <div class="span9">...</div> </div> </div> <div class="offset2 span6">... </div></div>April 13, 2013 JDNE: Bootstrap & Joomla UI 17
    18. 18. Responsive classes.hidden-phone.visible-phone.hidden-tablet.visible-tablet.hidden-desktop.visible-desktopApril 13, 2013 JDNE: Bootstrap & Joomla UI 18
    19. 19. Text classes.muted.text-warning.text-error.text-info.text-successApril 13, 2013 JDNE: Bootstrap & Joomla UI 19
    20. 20. Useful classes.pull-right.pull-left.clearfix.element-invisible (JUI)April 13, 2013 JDNE: Bootstrap & Joomla UI 20
    21. 21. <table> classes.table.table-striped.table-condensed.table-border.table-hoverApril 13, 2013 JDNE: Bootstrap & Joomla UI 21
    22. 22. <tr> classes.success .warning.error .infoApril 13, 2013 JDNE: Bootstrap & Joomla UI 22
    23. 23. .btn.btn-primary.btn-info.btn-success.btn-warning.btn-danger.btn-inverse.btn-link April 13, 2013 JDNE: Bootstrap & Joomla UI 23
    24. 24. Size is optional.btn-large.btn-small.btn-mini<div> size.btn-blockApril 13, 2013 JDNE: Bootstrap & Joomla UI 24
    25. 25. Downloadstwitter.github.com/bootstrapgithub.com/twitter/bootstrapTutorialwebdesign.tutsplus.com/series/twitter-bootstrap-101Video Tutorialyoutube.com/watch?v=DgwtRpf60xIApril 13, 2013 JDNE: Bootstrap & Joomla UI 25
    26. 26. Bootstrapin JoomlaApril 13, 2013 JDNE: Bootstrap & Joomla UI 26
    27. 27. Three Options1.  Use Bootstrap files in Joomla2.  Download customized Bootstrap files3.  Create template.css file from Joomla Bootstrap LESS filesApril 13, 2013 JDNE: Bootstrap & Joomla UI 27
    28. 28. 1. Use Bootstrap files inJoomlamedia jui css fonts img js lessApril 13, 2013 JDNE: Bootstrap & Joomla UI 28
    29. 29. media/jui/cssbootstrap.cssbootstrap.min.cssbootstrap-responsive.cssbootstrap-responsive.min.cssbootstrap-extended.cssbootstrap-rtl.cssApril 13, 2013 JDNE: Bootstrap & Joomla UI 29
    30. 30. media/jui/csschosen-sprite.pngchosen.cssicomoon.csssortablelist.cssApril 13, 2013 JDNE: Bootstrap & Joomla UI 30
    31. 31. Load CSS automatically<?phpJHtml::_(bootstrap.loadCss);?>April 13, 2013 JDNE: Bootstrap & Joomla UI 31
    32. 32. Load main CSS filesJHtml::_(bootstrap.loadCss);Main CSS files plus RTL files<?php$doc=JFactory::getDocument();$this->direction=$doc->direction;JHtml::_(bootstrap.loadCss,true, $this->direction); ?>April 13, 2013 JDNE: Bootstrap & Joomla UI 32
    33. 33. Only RTL fileIf you loaded Bootstrap CSSseparately or its included inyour template.css file as inoptions 2&3.<?php$doc=JFactory::getDocument();$this->direction=$doc>direction;JHtml::_(bootstrap.loadCss,false, $this->direction); ?>April 13, 2013 JDNE: Bootstrap & Joomla UI 33
    34. 34. Load JavaScript<?phpJHtml::_(bootstrap.framework);?>April 13, 2013 JDNE: Bootstrap & Joomla UI 34
    35. 35. 2. Download customizedBootstrap fileshttp://twitter.github.com/bootstrapCustomizeApril 13, 2013 JDNE: Bootstrap & Joomla UI 35
    36. 36. Be safe: use the sameversionExtensions may needcomponents so includethemChange variables to suitDownload and include asnormal CSS filesApril 13, 2013 JDNE: Bootstrap & Joomla UI 36
    37. 37. 3. Create template.cssfile from JoomlaBootstrap LESS filesCome to my LESS talkthis afternoonApril 13, 2013 JDNE: Bootstrap & Joomla UI 37
    38. 38. Questions?April 13, 2013 JDNE: Bootstrap & Joomla UI 38
    1. A particular slide catching your eye?

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

    ×