Bootstrap & Joomla UI

  • Published on
    28-Jan-2015

  • View
    104

  • Download
    0

Embed Size (px)

DESCRIPTION

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.

Transcript

  • 1. Bootstrap & Joomla UIAndrea TarrMetaScale /Sears HoldingsJoomla Day New England 2013

2. The ProblemUsing BootstrapBootstrap in JoomlaApril 13, 2013 JDNE: Bootstrap & Joomla UI 2 3. The ProblemApril 13, 2013 JDNE: Bootstrap & Joomla UI 3 4. Not everything is in coreExtensions make up UITemplates must be codedfor specific extensionsPatchworkApril 13, 2013 JDNE: Bootstrap & Joomla UI 4 5. BootstrapConsistencyCSS layout stylesCSS UI elementsCSS responsive stylesIntegrated JavaScriptFull set of iconsApril 13, 2013 JDNE: Bootstrap & Joomla UI 5 6. BootstrapFast & FlexibleMinified CSSMinified JavaScriptCSS preprocessor, LESSApril 13, 2013 JDNE: Bootstrap & Joomla UI 6 7. UsingBootstrapApril 13, 2013 JDNE: Bootstrap & Joomla UI 7 8. Download the CSS &JavaScript filesCall the files plus jQueryin your programApril 13, 2013 JDNE: Bootstrap & Joomla UI 8 9. April 13, 2013 JDNE: Bootstrap & Joomla UI 9 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. DocumentationExamples & Downloadshttp://twitter.github.com/bootstrapApril 13, 2013 JDNE: Bootstrap & Joomla UI 11 12. Full Source(Includes .LESS files)http://github.com/twitter/bootstrapApril 13, 2013 JDNE: Bootstrap & Joomla UI 12 13. Grid System - Static.spanx.row.offsetxApril 13, 2013 JDNE: Bootstrap & Joomla UI 13 14. Grid System - Static

...
...

April 13, 2013 JDNE: Bootstrap & Joomla UI 14 15. Grid System - Fluid .spanx.row-fluid .offsetxApril 13, 2013 JDNE: Bootstrap & Joomla UI15 16. Grid System - Fluid

...
...

April 13, 2013 JDNE: Bootstrap & Joomla UI 16 17.

...
...
...

April 13, 2013 JDNE: Bootstrap & Joomla UI 17 18. Responsive classes.hidden-phone.visible-phone.hidden-tablet.visible-tablet.hidden-desktop.visible-desktopApril 13, 2013 JDNE: Bootstrap & Joomla UI 18 19. Text classes.muted.text-warning.text-error.text-info.text-successApril 13, 2013 JDNE: Bootstrap & Joomla UI 19 20. Useful classes.pull-right.pull-left.clearfix.element-invisible (JUI)April 13, 2013 JDNE: Bootstrap & Joomla UI 20 21. classes.table.table-striped.table-condensed.table-border.table-hoverApril 13, 2013 JDNE: Bootstrap & Joomla UI 21 22. classes.success.warning.error.infoApril 13, 2013 JDNE: Bootstrap & Joomla UI 22 23. .btn.btn-primary.btn-info.btn-success.btn-warning.btn-danger.btn-inverse.btn-linkApril 13, 2013 JDNE: Bootstrap & Joomla UI 23 24. Size is optional.btn-large.btn-small.btn-mini

size.btn-blockApril 13, 2013 JDNE: Bootstrap & Joomla UI 24 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. Bootstrapin JoomlaApril 13, 2013 JDNE: Bootstrap & Joomla UI 26 27. Three Options1. Use Bootstrap files inJoomla2. Download customizedBootstrap files3. Create template.cssfile from JoomlaBootstrap LESS filesApril 13, 2013 JDNE: Bootstrap & Joomla UI 27 28. 1. Use Bootstrap files inJoomlamedia jui css fonts img js lessApril 13, 2013 JDNE: Bootstrap & Joomla UI 28 29. media/jui/cssbootstrap.cssbootstrap.min.cssbootstrap-responsive.cssbootstrap-responsive.min.cssbootstrap-extended.cssbootstrap-rtl.cssApril 13, 2013 JDNE: Bootstrap & Joomla UI 29 30. media/jui/csschosen-sprite.pngchosen.cssicomoon.csssortablelist.cssApril 13, 2013 JDNE: Bootstrap & Joomla UI 30 31. Load CSS automaticallyApril 13, 2013 JDNE: Bootstrap & Joomla UI 31 32. Load main CSS filesJHtml::_(bootstrap.loadCss);Main CSS files plus RTL filesApril 13, 2013 JDNE: Bootstrap & Joomla UI 32 33. Only RTL fileIf you loaded Bootstrap CSSseparately or its included inyour template.css file as inoptions 2&3.April 13, 2013 JDNE: Bootstrap & Joomla UI 33 34. Load JavaScriptApril 13, 2013 JDNE: Bootstrap & Joomla UI 34 35. 2. Download customizedBootstrap fileshttp://twitter.github.com/bootstrapCustomizeApril 13, 2013 JDNE: Bootstrap & Joomla UI 35 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. 3. Create template.cssfile from JoomlaBootstrap LESS filesCome to my LESS talkthis afternoonApril 13, 2013 JDNE: Bootstrap & Joomla UI 37 38. Questions?April 13, 2013 JDNE: Bootstrap & Joomla UI 38

Recommended

View more >