Bootstrap for Extension Developers JWC 2012

  • 2,785 views
Uploaded on

How to take advantage of the bootstrap framework in your Joomla 3.x extension so you can leave the designing to the designers.

How to take advantage of the bootstrap framework in your Joomla 3.x extension so you can leave the designing to the designers.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,785
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
83
Comments
3
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • twitter.github.com/bootstrapSave to jz
  • 1170 & 764
  • 1170 & 764
  • 1170 & 764
  • mention .hidden-phone class on elements and table columns to improve phone UX
  • Adding "adminlist"

Transcript

  • 1. Bootstrap forExtensionDevelopersAndrea TarrMetaScale / Sears HoldingsNovember 2012
  • 2. Outline• Introduction to November 2012 Bootstrap• Using Bootstrap in Joomla Developers • Andrea Tarr • extensions Joomla World Conference Bootstrap for Extension• Examples in Joomla 2
  • 3. Bootstrap Introduction• What problem is Joomla trying to solve? November 2012• What is Bootstrap?• How does it work?• Exploring Bootstrap Joomla World Conference • Bootstrap for Developers • Andrea Tarr 3
  • 4. The Problem• The need for a consistent style sheet for extensions November 2012• Core extension are the current de facto style sheet• 3pd & custom extensions make up what they need that isnt in core – and they all do it differently• Templates have to code for specific extensions to Joomla World Conference • Bootstrap for Developers • maintain the look and feel of the web site• Result is that many extensions look like iframes unrelated to the site Andrea Tarr• This is the case in both the frontend and the backend 4
  • 5. What is Bootstrap?• Basic set of CSS for layout November 2012• CSS styles for UI elements such as menus & buttons• CSS styles for responsive design• Integrated JavaScript widgets (jQuery) for UI elements such as accordions Joomla World Conference • Bootstrap for Developers •• A set of icons that can be used• Minified versions of the CSS & JS available• Includes the ability to use LESS files to create the CSS Andrea Tarr• Can work with different HTML markup• Has docs showing HTML code, but the better code is in the actual examples folder 5
  • 6. How does it work?<!DOCTYPE html> November 2012<html lang="en"> <head> <title>My Web Site</title> <!-- Bootstrap --> Joomla World Conference • <link href="css/bootstrap.min.css" rel="stylesheet"> Bootstrap for Developers • <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> Andrea Tarr <body> <h1>My Web Site</h1> <p>This is a paragraph</p> </body> 6</html>
  • 7. Exploring Bootstrap• To see examples online November 2012 • http://twitter.github.com/bootstrap/• To download Bootstrap to your computer • Download button at twitter.github.com/bootstrap • Full source at https://github.com/twitter/bootstrap Joomla World Conference • Bootstrap for Developers • • Call the docs folder in browser• To see mockup examples for Joomla • http://kyleledbetter.com/jui Andrea Tarr 7
  • 8. Using Bootstrap inJoomla Extensions• CSS Class names have changed November 2012• jQuery is available• Grid System• Classes Joomla World Conference •• Navigation Bootstrap for Developers •• Tables• Forms Andrea Tarr 8
  • 9. Grid System - Static November 2012 Joomla World Conference • Bootstrap for Developers •<div class="row"> Andrea Tarr <div class="span4">...</div> <div class="offset2 span6">...</div></div> 9
  • 10. Grid System – Static Nesting• Children add up to the parent November 2012<div class="row"> <div class="span4"> <div class="row"> Joomla World Conference • <div class="span1">...</div> Bootstrap for Developers • <div class="span3">...</div> </div> Andrea Tarr </div> <div class="offset2 span6">...</div></div> 10
  • 11. Grid System - Fluid November 2012 Joomla World Conference • Bootstrap for Developers •<div class="row-fluid"> Andrea Tarr <div class="span4">...</div> <div class="offset2 span6">...</div></div> 11
  • 12. Grid System – Fluid Nesting• Children add up to 12 November 2012<div class="row-fluid"> <div class="span4"> <div class="row-fluid"> Joomla World Conference • <div class="span3">...</div> Bootstrap for Developers • <div class="span9">...</div> </div> Andrea Tarr </div> <div class="offset2 span6">...</div></div> 12
  • 13. Grid System in Joomla• Backend leftnav/list views November 2012 • span2/span10 • Example: Article Manager• Backend edit views Andrea Tarr Bootstrap for Developers • Joomla World Conference • • span10/span2 • Example: Article Edit• Dashboards • span2/span6/span4 • Example: Control Panel 13
  • 14. Responsive classes Bootstrap for Developers • Joomla World Conference • November 201214 Andrea Tarr
  • 15. Special Text Designations<p class="muted">Fusce dapibus, mauris nibh.</p> November 2012<p class="text-warning">Etiam porta euismod.</p><p class="text-error">Donec auctor fringilla.</p><p class="text-info">Aenean eu leo quam. </p> Joomla World Conference •<p class="text-success">Duis erat porttitor ligula.</p> Bootstrap for Developers • Andrea Tarr 15
  • 16. Other Useful Classes• <div class="pull-right">...</div> November 2012• <div class="pull-left">...</div>• Clear with clearfix class• (JUI) Hide labels with element-invisible class Joomla World Conference • Bootstrap for Developers • Andrea Tarr 16
  • 17. TablesAll Tables November 2012• <table class="table">Additional table classes to add Joomla World Conference •• .table-striped Bootstrap for Developers •• .table-condensed• .table-border Andrea Tarr• .table-hoverStandard Admin tables• class="adminlist table table-striped" 17
  • 18. • • • • .info .error .success .warning Tables: Row Classes Bootstrap for Developers • Joomla World Conference • November 201218 Andrea Tarr
  • 19. Forms• Bootstrap standard with left-adjusted, label above November 2012• Optional classes for different types of forms• Inline form • .form-inline• Horizontal form (normal Joomla backend) Joomla World Conference • Bootstrap for Developers • • .form-horizontal • wrap label/control in .control-group • .control-label on label Andrea Tarr • wrap controls in .controls • wrap multiple actions in .form-actions to show horizontally• Use input types 19
  • 20. Forms: Radio/Checkbox• Add class .radio or .checkbox on the label for the November 2012 control• Use the type of radio or checkbox on the input• To display radio/checkbox label inline • Add class .inline to the label Joomla World Conference • Bootstrap for Developers • Andrea Tarr 20
  • 21. Yes/No Radio Button XML<field November 2012name="link_titles"type="radio"class="btn-group" Joomla World Conference •label="JGLOBAL_LINKED_TITLES_LABEL" Bootstrap for Developers •description="JGLOBAL_LINKED_TITLES_DESC"labelclass="control-label"> <option value="">JGLOBAL_USE_GLOBAL</option> Andrea Tarr <optionvalue="0">JNO</option> <option value="1">JYES</option></field> 21
  • 22. Forms: Addons• To add text or a button before or after the input November 2012<div class="input-prepend"> Joomla World Conference • Bootstrap for Developers • <span class="add-on">@</span> <input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> Andrea Tarr</div><div class="input-append"> <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> 22</div>
  • 23. Forms: Addon Buttons• Use button with class .btn instead of the span to November 2012 attach a button to a control Joomla World Conference • Bootstrap for Developers •<div class="input-append"> <input class="span2" id="appendedInputButton" Andrea Tarr size="16" type="text"> <button class="btn" type="button">Go!</button></div> 23
  • 24. Forms: Sizing• Add class to inputs for relative sizing November 2012 • .input-mini • .input-small • .input-medium • .input-large Joomla World Conference • Bootstrap for Developers • • .input-xlarge • .input-xxlarge• You can also use the span classes Andrea Tarr • .span1, .span4, .span6, etc. • If using multiple spans on multiple lines, wrap each row in .control-row. 24
  • 25. Forms: Misc• To make an input read only November 2012 • Add the disabled attribute (not a class) • <input id="thisInput" type="text" disabled placeholder="Disabled input here...">• Show read only text as if it is a form element Joomla World Conference • Bootstrap for Developers • • .uneditable-input • <span class="input-xlarge uneditable-input">Some value here</span Andrea Tarr• Help text • .help-inline • .help-block • <input type="text"><span class="help-inline">Inline help 25 text</span>
  • 26. Buttons Bootstrap for Developers • Joomla World Conference • November 201226 Andrea Tarr
  • 27. Buttons: Sizing• Optional: Add a sizing button class November 2012• .btn-large• .btn-small• .btn-mini Joomla World Conference •• .btn-block Bootstrap for Developers • Andrea Tarr 27
  • 28. ml#navs Navigation • http://twitter.github.com/bootstrap/components.ht Bootstrap for Developers • Joomla World Conference • November 201228 Andrea Tarr
  • 29. Examples in Joomla• Some changes November 2012• Manager Example • Chosen select dropdowns • Sidebar • Filters Joomla World Conference • Bootstrap for Developers • • Sorting • Drag & Drop• Edit Example Andrea Tarr • Tabbing Content 29
  • 30. Administrator Changes• JHtml::_(behavior.tooltip); becomes November 2012 JHtml::_(bootstrap.tooltip);• For dropdowns, useJHtml::_(formbehavior.chosen, select); Joomla World Conference • Bootstrap for Developers • Andrea Tarr 30
  • 31. Manager Example Bootstrap for Developers • Joomla World Conference • November 201231 Andrea Tarr
  • 32. Set up the Managerdefined(_JEXEC) or die; November 2012JHtml::addIncludePath(JPATH_COMPONENT./helpers/html);JHtml::_(bootstrap.tooltip); Joomla World Conference • Bootstrap for Developers •JHtml::_(behavior.multiselect);JHtml::_(formbehavior.chosen, select); Andrea Tarr$user = JFactory::getUser();$userId = $user->get(id); 32
  • 33. Drag & Drop Ordering$listOrder = $this->escape($this->state->get(list.ordering)); November 2012$listDirn = $this->escape($this->state->get(list.direction));$canOrder = $user->authorise(core.edit.state, com_mycomponent.category);$saveOrder = $listOrder == a.ordering; Joomla World Conference • Bootstrap for Developers •if ($saveOrder) { $saveOrderingUrl = index.php?option=com_mycomponent &task=mycomponent.saveOrderAjax&tmpl=component; Andrea Tarr JHtml::_(sortablelist.sortable, mycomponentList, adminForm, strtolower($listDirn), $saveOrderingUrl);}$sortFields = $this->getSortFields(); 33
  • 34. Sorting: Script<script type="text/javascript"> November 2012 Joomla.orderTable = function() { table = document.getElementById("sortTable"); direction = document.getElementById("directionTable"); order = table.options[table.selectedIndex].value; Joomla World Conference • Bootstrap for Developers • if (order != <?php echo $listOrder; ?>) { dirn = asc; } else { Andrea Tarr dirn = direction.options[direction.selectedIndex].value; } Joomla.tableOrdering(order, dirn, ); } 34</script>
  • 35. Sidebar & Start Main Div<form action="url here" method="post" name="adminForm" November 2012id="adminForm"><!-- if there is is a side bar, display the sidebar as span2 andstart the main-container as span10. Otherwise, just start themain-container, which will default to the the full span12. --> Joomla World Conference • Bootstrap for Developers •<?php if(!empty( $this->sidebar)): ?> <div id="j-sidebar-container" class="span2"> <?php echo $this->sidebar; ?> </div> Andrea Tarr <div id="j-main-container" class="span10"><?php else : ?> <div id="j-main-container"><?php endif;?> 35
  • 36. Searching<!-- The main container for the component starts with the Search & November 2012Sorting across the top (Orange should be JText strings) --><div id="filter-bar" class="btn-toolbar"> <div class="filter-search btn-group pull-left"> <label for="filter_search" class="element-invisible">Search</label> <input type="text" name="filter_search" id="filter_search" Joomla World Conference •placeholder="Search" value="<?php echo $this->escape($this->state- Bootstrap for Developers •>get(filter.search)); ?>" title="Search" /> </div> <div class="btn-group pull-left"> Andrea Tarr <button class="btn hasTooltip" type="submit" title="Submit"><iclass="icon-search"></i></button> <button class="btn hasTooltip" type="button" title="Clear"onclick="document.id(filter_search).value=;this.form.submit();"><iclass="icon-remove"></i></button> 36 </div>
  • 37. Sort Filter & Display #<div class="btn-group pull-right hidden-phone"> November 2012 <label for="limit" class="element-invisible">Label</label> <?php echo $this->pagination->getLimitBox(); ?></div><div class="btn-group pull-right hidden-phone"> Joomla World Conference • <label for="directionTable" class="element-invisible">Label</label> Bootstrap for Developers • <select name="directionTable" id="directionTable" class="input-medium" onchange="Joomla.orderTable()"> <option value="">Order desc</option> Andrea Tarr <option value="asc" <?php if ($listDirn == asc) echoselected="selected"; ?>>Asc</option> <option value="desc" <?php if ($listDirn == desc) echoselected="selected"; ?>>Desc</option> </select> 37</div>
  • 38. Sort Filter & Display #<div class="btn-group pull-right"> November 2012 <label for="sortTable" class="element-invisible">Sortby</label> <select name="sortTable" id="sortTable"class="input-medium" onchange="Joomla.orderTable()"> Joomla World Conference • Bootstrap for Developers • <option value="">Sort by..</option> <?php echoJHtml::_(select.options, $sortFields, value, text, $listOrder);?> </select> Andrea Tarr</div></div><!-- End Filter bar --><div class="clearfix"> </div> 38
  • 39. Manager Table• <table class="adminlist"> becomes November 2012<table class="table table-striped" id="xxxxxxList">• Use class="adminlist table table-striped" if you want backward compatibility• If you want to hide columns on a phone add class Joomla World Conference • Bootstrap for Developers • hidden-phone Andrea Tarr 39
  • 40. Order Field: Field<tr class="row<?php echo $i % 2; ?>" sortable-group-id="<?php echo November 2012$item->catid?>"><td class="order nowrap center hidden-phone"><?php if ($canChange) : $disableClassName = ; $disabledLabel = ; Joomla World Conference • if (!$saveOrder) : Bootstrap for Developers • $disabledLabel = JText::_(JORDERINGDISABLED); $disableClassName = inactive tip-top; endif; ?> Andrea Tarr (do something here if you can edit and reorder)<?php else : ?> <span class="sortable-handler inactive" > <i class="icon-menu"></i> </span> 40<?php endif; ?></td>
  • 41. Doing the something<span class="sortable-handler hasTooltip <?php echo November 2012$disableClassName?>" title="<?php echo $disabledLabel?>"> <i class="icon-menu"></i></span> Joomla World Conference • Bootstrap for Developers •<input type="text" style="display:none" name="order[]" size="5" value="<?php echo $item->ordering;?>" Andrea Tarr class="width-20 text-area-order " /> 41
  • 42. Batch Modal Sub-layout$published = $this->state->get(filter.state); November 2012?><div class="modal hide fade" id="collapseModal"> <div class="modal-header"> <button type="button" role="presentation" Joomla World Conference • Bootstrap for Developers •class="close" data-dismiss="modal">x</button> <h3><?php echoJText::_(COM_MYCOMPONENT_BATCH_OPTIONS);?></h3> Andrea Tarr </div> <div class="modal-body"> (form control-groups go here) 42 </div>
  • 43. Modal footer<div class="modal-footer"> November 2012 <button class="btn" type="button" onclick ="document.id(batch-category-id).value =;document.id(batch-access).value =;document.id(batch-language-id).value Joomla World Conference • =" data-dismiss="modal"> Bootstrap for Developers • <?php echo JText::_(JCANCEL); ?> </button> <button class="btn btn-primary" type="submit" Andrea Tarr onclick="Joomla.submitbutton(mycomponent.batch);"> <?php echo JText::_(JGLOBAL_BATCH_PROCESS); ?> </button></div> 43</div><!-- End collapseModal -->
  • 44. Creating $sidebar inview.html.php$this->addToolbar(); November 2012$this->sidebar = JHtmlSidebar::render();parent::display($tpl); Joomla World Conference • Bootstrap for Developers • Andrea Tarr 44
  • 45. Example Edit Screen Bootstrap for Developers • Joomla World Conference • November 201245 Andrea Tarr
  • 46. Overview• Simplified example of an edit form in the backend November 2012• Set up as tabbed content in a span10 section on the left with a span2 sidebar that remains constant on the right. Joomla World Conference • Bootstrap for Developers • Andrea Tarr 46
  • 47. Set up the form<!--simplified edit layout --> November 2012<form action="url here" method="post"name="adminForm" id="mycomponent-form"class="form-validate"> <div class="row-fluid"> Joomla World Conference • Bootstrap for Developers • <!-- Begin Main --> <div class="span10 form-horizontal"> Andrea Tarr <fieldset> 47
  • 48. List the tab navigation<!-- List of Tabs --> November 2012<ul class="nav nav-tabs"> <li class="active"><a href="#details" data-toggle="tab">Details</a></li> <li><a href="#publishing" data- Joomla World Conference • Bootstrap for Developers •toggle="tab">Publishing</a></li> <li>...</li></ul> Andrea Tarr 48
  • 49. List Content in Each Tab<div class="tab-content"> November 2012 <div class="tab-pane active" id="details"> <div class="control-group"> <div class="control-label"><?php echo $this->form->getLabel(title); ?></div> <div class="controls"><?php echo $this->form->getInput(title); ?></div> </div> <div class="control-group"> <div class="control-label"><?php echo $this->form->getLabel(url); ?></div> Joomla World Conference • Bootstrap for Developers • <div class="controls"><?php echo $this->form->getInput(url); ?></div> </div> <div class="control-group"> ... </div> Andrea Tarr </div> <div class="tab-pane" id="publishing"> ... </div> 49 additional tab-pane divs ....
  • 50. Tab Content in sub-layouts<?php echo $this->loadTemplate(params); ?> November 2012<?php echo $this->loadTemplate(metadata); ?> Joomla World Conference • Bootstrap for Developers • Andrea Tarr 50
  • 51. Hidden inputs and end divs <input type="hidden" name="task" value="" /> November 2012 <?php echo JHtml::_(form.token); ?></div><!-- end tab-content --></div><!-- end span10 --> Joomla World Conference • Bootstrap for Developers • Andrea Tarr 51
  • 52. Right sidebar<!-- Begin Sidebar --> November 2012<div class="span2"> <h4>Details</h4> <hr /> Joomla World Conference • <fieldset class="form-vertical"> Bootstrap for Developers • Andrea Tarr 52
  • 53. Form Controls Groups<div class="control-group"> November 2012 <div class="controls"> <?php echo $this->form->getValue(title); ?> </div></div><div class="control-group"> Joomla World Conference • <div class="control-label"> Bootstrap for Developers • <?php echo $this->form->getLabel(state); ?> </div> <div class="controls"> Andrea Tarr <?php echo $this->form->getInput(state); ?> </div></div><div class="control-group"> ... 53</div>
  • 54. </form> </fieldset> </div><!-- End Sidebar --> End the sidebar & form Bootstrap for Developers • Joomla World Conference • November 201254 Andrea Tarr
  • 55. Detail on using sub-layoutsfor tab contents• You can use sub-layouts for tab pane content November 2012• Examples: edit_metadata & edit_params• Add a foreach loop to the tab navigation• Add a load to the layouts in the tab content Joomla World Conference • Bootstrap for Developers • Andrea Tarr 55
  • 56. Tab Nav <li> Loop<?php November 2012$fieldSets = $this->form->getFieldsets(params);foreach ($fieldSets as $name => $fieldSet) : ?> <li> <a href="#params-<?php echo $name;?>" data-toggle= "tab"><?php echo JText::_($fieldSet->label);?></a> </li> Joomla World Conference • Bootstrap for Developers •<?php endforeach; ?><?php$fieldSets = $this->form->getFieldsets(metadata);foreach ($fieldSets as $name => $fieldSet) : ?> Andrea Tarr <li> <a href="#metadata-<?php echo $name;?>" data-toggle= "tab"><?php echo JText::_($fieldSet->label);?></a> </li><?php endforeach; ?> 56
  • 57. Sub-layout tab pane<div class="tab-pane" id="publishing"> November 2012 ...</div> Joomla World Conference •<?php echo $this->loadTemplate(params); ?> Bootstrap for Developers •<?php echo $this->loadTemplate(metadata); ?> Andrea Tarr 57
  • 58. Sub-layout<?php November 2012$fieldSets = $this->form->getFieldsets(params);foreach ($fieldSets as $name => $fieldSet) :?> <div class="tab-pane" id="params-<?php echo $name;?>"> <?php if (isset($fieldSet->description) && trim($fieldSet->description)) : echo <p class="alert alert-info">.$this->escape(JText::_($fieldSet-> description)).</p>; Joomla World Conference • Bootstrap for Developers • endif; ?> <?php foreach ($this->form->getFieldset($name) as $field) : ?> <div class="control-group"> <div class="control-label"><?php echo $field->label; ?></div> Andrea Tarr <div class="controls"><?php echo $field->input; ?></div> </div> <?php endforeach; ?> </div><!-- end tab-pane --><?php endforeach; ?> 58
  • 59. Resources• Download basic bootstrap November 2012 • http://twitter.github.com/bootstrap/• The full bootstrap source • https://github.com/twitter/bootstrap• Tutorials Joomla World Conference • Bootstrap for Developers • • http://webdesign.tutsplus.com/series/twitter-bootstrap- 101/• Tutorials on YouTube Andrea Tarr • http://www.youtube.com/watch?v=DgwtRpf60xI• Joomla JUI • http://kyleledbetter.com/jui 59
  • 60. Questions ? Bootstrap for Developers • Joomla World Conference • November 201260 Andrea Tarr
  • 61. Credits • Background photo by the_tahoe_guy Bootstrap for Developers • Joomla World Conference • November 201261 Andrea Tarr