Bootstrap & Joomla UI
Upcoming SlideShare
Loading in...5
×
 

Bootstrap & Joomla UI

on

  • 5,824 views

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

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.

Statistics

Views

Total Views
5,824
Views on SlideShare
5,814
Embed Views
10

Actions

Likes
3
Downloads
55
Comments
0

2 Embeds 10

https://twitter.com 9
http://www.cms-in-a-box.de 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Bootstrap & Joomla UI Bootstrap & Joomla UI Presentation Transcript

  • 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: Bootstrap & Joomla UI 4
  • BootstrapConsistencyCSS layout stylesCSS UI elementsCSS responsive stylesIntegrated JavaScriptFull set of iconsApril 13, 2013 JDNE: Bootstrap & Joomla UI 5
  • BootstrapFast & FlexibleMinified CSSMinified JavaScriptCSS preprocessor, LESSApril 13, 2013 JDNE: Bootstrap & Joomla UI 6
  • 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.js"></script>April 13, 2013 JDNE: Bootstrap & Joomla UI 9
  • 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
  • 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, 2013 JDNE: Bootstrap & Joomla UI 13
  • Grid System - Static<div class="row"> <div class="span4"> ...</div> <div class="offset2 span6">...</div></div>April 13, 2013 JDNE: Bootstrap & Joomla UI 14
  • Grid System - Fluid .spanx.row-fluid .offsetxApril 13, 2013 JDNE: Bootstrap & Joomla UI 15
  • 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
  • <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
  • Responsive classes.hidden-phone.visible-phone.hidden-tablet.visible-tablet.hidden-desktop.visible-desktopApril 13, 2013 JDNE: Bootstrap & Joomla UI 18
  • 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 21
  • <tr> classes.success .warning.error .infoApril 13, 2013 JDNE: Bootstrap & Joomla UI 22
  • .btn.btn-primary.btn-info.btn-success.btn-warning.btn-danger.btn-inverse.btn-link April 13, 2013 JDNE: Bootstrap & Joomla UI 23
  • 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-101Video Tutorialyoutube.com/watch?v=DgwtRpf60xIApril 13, 2013 JDNE: Bootstrap & Joomla UI 25
  • Bootstrapin JoomlaApril 13, 2013 JDNE: Bootstrap & Joomla UI 26
  • 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
  • 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.cssbootstrap-rtl.cssApril 13, 2013 JDNE: Bootstrap & Joomla UI 29
  • 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->direction=$doc->direction;JHtml::_(bootstrap.loadCss,true, $this->direction); ?>April 13, 2013 JDNE: Bootstrap & Joomla UI 32
  • 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
  • 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 UI 35
  • Be safe: use the sameversionExtensions may needcomponents so includethemChange variables to suitDownload and include asnormal CSS filesApril 13, 2013 JDNE: Bootstrap & Joomla UI 36
  • 3. Create template.cssfile from JoomlaBootstrap LESS filesCome to my LESS talkthis afternoonApril 13, 2013 JDNE: Bootstrap & Joomla UI 37
  • Questions?April 13, 2013 JDNE: Bootstrap & Joomla UI 38