SlideShare a Scribd company logo

Bootstrap for Extension Developers JWC 2012

Download as PPTX, PDF
Andrea Tarr, profile picture
Andrea Tarr

The document discusses the use of Bootstrap in Joomla extensions, highlighting its role in providing a consistent style sheet to address various formatting issues that arise with third-party and custom extensions. It covers Bootstrap's features, including CSS for layout, responsive design, and integrated JavaScript widgets, along with practical examples for implementing Bootstrap within Joomla's framework. Key areas such as grid systems, form handling, and navigation are detailed, emphasizing improvements to the user interface and overall site coherence.

Technology
1 of 61
Downloaded 92 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
Bootstrap for Extension Developers Andrea Tarr MetaScale / Sears Holdings November 2012
Outline • Introduction to November 2012 Bootstrap • Using Bootstrap in Joomla Developers • Andrea Tarr • extensions Joomla World Conference Bootstrap for Extension • Examples in Joomla 2
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
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 isn't 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
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
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>
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
Using Bootstrap in Joomla 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
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
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
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
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
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
Responsive classes Bootstrap for Developers • Joomla World Conference • November 2012 14 Andrea Tarr
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
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
Tables All 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-hover Standard Admin tables • class="adminlist table table-striped" 17
• • • • .info .error .success .warning Tables: Row Classes Bootstrap for Developers • Joomla World Conference • November 2012 18 Andrea Tarr
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
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
Yes/No Radio Button XML <field November 2012 name="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
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>
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
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
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>
Buttons Bootstrap for Developers • Joomla World Conference • November 2012 26 Andrea Tarr
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
ml#navs Navigation • http://twitter.github.com/bootstrap/components.ht Bootstrap for Developers • Joomla World Conference • November 2012 28 Andrea Tarr
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
Administrator Changes • JHtml::_('behavior.tooltip'); becomes November 2012 JHtml::_('bootstrap.tooltip'); • For dropdowns, use JHtml::_('formbehavior.chosen', 'select'); Joomla World Conference • Bootstrap for Developers • Andrea Tarr 30
Manager Example Bootstrap for Developers • Joomla World Conference • November 2012 31 Andrea Tarr
Set up the Manager defined('_JEXEC') or die; November 2012 JHtml::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
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
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>
Sidebar & Start Main Div <form action="url here" method="post" name="adminForm" November 2012 id="adminForm"> <!-- if there is is a side bar, display the sidebar as span2 and start the main-container as span10. Otherwise, just start the main-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
Searching <!-- The main container for the component starts with the Search & November 2012 Sorting 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"><i class="icon-search"></i></button> <button class="btn hasTooltip" type="button" title="Clear" onclick="document.id('filter_search').value='';this.form.submit();"><i class="icon-remove"></i></button> 36 </div>
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') echo 'selected="selected"'; ?>>Asc</option> <option value="desc" <?php if ($listDirn == 'desc') echo 'selected="selected"'; ?>>Desc</option> </select> 37 </div>
Sort Filter & Display # <div class="btn-group pull-right"> November 2012 <label for="sortTable" class="element-invisible">Sort by</label> <select name="sortTable" id="sortTable" class="input-medium" onchange="Joomla.orderTable()"> Joomla World Conference • Bootstrap for Developers • <option value="">Sort by..</option> <?php echo JHtml::_('select.options', $sortFields, 'value', 'text', $listOrder);?> </select> Andrea Tarr </div> </div><!-- End Filter bar --> <div class="clearfix"> </div> 38
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
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>
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
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 echo JText::_('COM_MYCOMPONENT_BATCH_OPTIONS');?> </h3> Andrea Tarr </div> <div class="modal-body"> (form control-groups go here) 42 </div>
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 -->
Creating $sidebar in view.html.php $this->addToolbar(); November 2012 $this->sidebar = JHtmlSidebar::render(); parent::display($tpl); Joomla World Conference • Bootstrap for Developers • Andrea Tarr 44
Example Edit Screen Bootstrap for Developers • Joomla World Conference • November 2012 45 Andrea Tarr
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
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
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
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 ....
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
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
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
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>
</form> </fieldset> </div><!-- End Sidebar --> End the sidebar & form Bootstrap for Developers • Joomla World Conference • November 2012 54 Andrea Tarr
Detail on using sub-layouts for 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
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
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
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
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
Questions ? Bootstrap for Developers • Joomla World Conference • November 2012 60 Andrea Tarr
Credits • Background photo by the_tahoe_guy Bootstrap for Developers • Joomla World Conference • November 2012 61 Andrea Tarr

More Related Content

PPTX
Bootstrap: the full overview
Gill Cleeren
 
PDF
Future-proof styling in Drupal (8)
Hajas Tamás
 
PDF
Be nice to your designers
Pai-Cheng Tao
 
KEY
Intro to jQuery for Drupal
jhamiltoorion
 
KEY
2022 HTML5: The future is now
Gonzalo Cordero
 
PPT
Css
Sumit Gupta
 
PDF
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
ZIP
Html5 public
doodlemoonch
 
Bootstrap: the full overview
Gill Cleeren
 
Future-proof styling in Drupal (8)
Hajas Tamás
 
Be nice to your designers
Pai-Cheng Tao
 
Intro to jQuery for Drupal
jhamiltoorion
 
2022 HTML5: The future is now
Gonzalo Cordero
 
Css
Sumit Gupta
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
Html5 public
doodlemoonch
 

What's hot (20)

PDF
HTML5, just another presentation :)
François Massart
 
PPTX
Drupal Skils Lab 302Labs
Ahmad Mohamad Zain
 
KEY
Fosdem 2009 – improving drupal's page loading performance
Erup Enolc
 
PPT
Web design-workflow
Peter Kaizer
 
PPTX
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
PDF
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
 
PDF
Modular HTML & CSS
Shay Howe
 
PDF
Jquery News Packages
UC Berkeley Graduate School of Journalism
 
KEY
Accessible UIs with jQuery and Infusion
colinbdclark
 
PPT
Drupal -Introduction to Drupal
Vibrant Technologies & Computers
 
PDF
Modular HTML, CSS, & JS Workshop
Shay Howe
 
PDF
Responsive Web Design
Debra Shapiro
 
KEY
WordCamp NYC - DRY CSS
Jer Clarke
 
PDF
Drupal By Design - Business Case for Drupal
Glenn Lim
 
PDF
Intro to OOCSS Workshop
Julie Cameron
 
KEY
WAI-ARIA is More Than Accessibility
偉格 高
 
PDF
Modular HTML & CSS Workshop
Shay Howe
 
PPT
5 Common Mistakes You are Making on your Website
Acquia
 
PDF
Modular HTML & CSS Turbo Workshop
Shay Howe
 
PPTX
About Best friends - HTML, CSS and JS
Naga Harish M
 
HTML5, just another presentation :)
François Massart
 
Drupal Skils Lab 302Labs
Ahmad Mohamad Zain
 
Fosdem 2009 – improving drupal's page loading performance
Erup Enolc
 
Web design-workflow
Peter Kaizer
 
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
 
Modular HTML & CSS
Shay Howe
 
Jquery News Packages
UC Berkeley Graduate School of Journalism
 
Accessible UIs with jQuery and Infusion
colinbdclark
 
Drupal -Introduction to Drupal
Vibrant Technologies & Computers
 
Modular HTML, CSS, & JS Workshop
Shay Howe
 
Responsive Web Design
Debra Shapiro
 
WordCamp NYC - DRY CSS
Jer Clarke
 
Drupal By Design - Business Case for Drupal
Glenn Lim
 
Intro to OOCSS Workshop
Julie Cameron
 
WAI-ARIA is More Than Accessibility
偉格 高
 
Modular HTML & CSS Workshop
Shay Howe
 
5 Common Mistakes You are Making on your Website
Acquia
 
Modular HTML & CSS Turbo Workshop
Shay Howe
 
About Best friends - HTML, CSS and JS
Naga Harish M
 
Ad

Similar to Bootstrap for Extension Developers JWC 2012 (20)

PPTX
Bootstrap Introduction
Andrea Tarr
 
PDF
Bootstrap & Joomla UI
Andrea Tarr
 
PDF
Bootstrapping Joomla 3.0
Kyle Ledbetter
 
PPTX
Bootstrap code lab
Dhatri Misra
 
PPTX
Web development and web design with seo
Rajat Anand
 
PPTX
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
PDF
Bootstrap
Jadson Santos
 
PDF
The Ultimate Guide to Bootstrap for Beginners.pdf
webcooks Digital Academy
 
PPTX
Bootstrap [part 1]
Ghanshyam Patel
 
PDF
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
 
PPTX
Twitter bootstrap1
www.netgains.org
 
PDF
Introduction to Responsive Web Development
Nikhil Baby
 
PPTX
An introduction to bootstrap
Mind IT Systems
 
PDF
JoomlaDay Brazil 2014 Joomla! Template With Bootstrap 3
Saurabh Shah
 
PPTX
RWD - Bootstrap
Jasvinder Singh
 
PDF
Responsive Design and Bootstrap
MahmoudOHassouna
 
PPSX
Twitter Bootstrap
Vinayak Kulkarni
 
PPT
Bootstrap Part - 1
EPAM Systems
 
PPTX
Bootstrap - Basics
FirosK2
 
PPTX
Bootstrap PPT by Mukesh
Mukesh Kumar
 
Bootstrap Introduction
Andrea Tarr
 
Bootstrap & Joomla UI
Andrea Tarr
 
Bootstrapping Joomla 3.0
Kyle Ledbetter
 
Bootstrap code lab
Dhatri Misra
 
Web development and web design with seo
Rajat Anand
 
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
Bootstrap
Jadson Santos
 
The Ultimate Guide to Bootstrap for Beginners.pdf
webcooks Digital Academy
 
Bootstrap [part 1]
Ghanshyam Patel
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
 
Twitter bootstrap1
www.netgains.org
 
Introduction to Responsive Web Development
Nikhil Baby
 
An introduction to bootstrap
Mind IT Systems
 
JoomlaDay Brazil 2014 Joomla! Template With Bootstrap 3
Saurabh Shah
 
RWD - Bootstrap
Jasvinder Singh
 
Responsive Design and Bootstrap
MahmoudOHassouna
 
Twitter Bootstrap
Vinayak Kulkarni
 
Bootstrap Part - 1
EPAM Systems
 
Bootstrap - Basics
FirosK2
 
Bootstrap PPT by Mukesh
Mukesh Kumar
 
Ad

More from Andrea Tarr (6)

PDF
Using LESS, the CSS Preprocessor: J and Beyond 2013
Andrea Tarr
 
PDF
The State of Joomla - J and Beyond 2013
Andrea Tarr
 
PDF
LESS, the CSS Preprocessor
Andrea Tarr
 
PPTX
PHP for HTML Gurus - J and Beyond 2012
Andrea Tarr
 
PPTX
Where is Joomla going and how do we get there? J and Beyond 2012
Andrea Tarr
 
PPTX
Choosing Great Joomla Extensions
Andrea Tarr
 
Using LESS, the CSS Preprocessor: J and Beyond 2013
Andrea Tarr
 
The State of Joomla - J and Beyond 2013
Andrea Tarr
 
LESS, the CSS Preprocessor
Andrea Tarr
 
PHP for HTML Gurus - J and Beyond 2012
Andrea Tarr
 
Where is Joomla going and how do we get there? J and Beyond 2012
Andrea Tarr
 
Choosing Great Joomla Extensions
Andrea Tarr
 

Recently uploaded (20)

PDF
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Chinchu40
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PPTX
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PDF
NewMind AI Weekly Chronicles - August'25-Week II
NewMind AI
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Chinchu40
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Teaching material agriculture food technology
LiaRayya
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
NewMind AI Weekly Chronicles - August'25-Week II
NewMind AI
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
Encapsulation theory and applications.pdf
gurumoop
 

Bootstrap for Extension Developers JWC 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 isn't 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 in Joomla 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 2012 14 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. Tables All 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-hover Standard Admin tables • class="adminlist table table-striped" 17
  • 18. • • • • .info .error .success .warning Tables: Row Classes Bootstrap for Developers • Joomla World Conference • November 2012 18 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 2012 name="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 2012 26 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 2012 28 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, use JHtml::_('formbehavior.chosen', 'select'); Joomla World Conference • Bootstrap for Developers • Andrea Tarr 30
  • 31. Manager Example Bootstrap for Developers • Joomla World Conference • November 2012 31 Andrea Tarr
  • 32. Set up the Manager defined('_JEXEC') or die; November 2012 JHtml::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 2012 id="adminForm"> <!-- if there is is a side bar, display the sidebar as span2 and start the main-container as span10. Otherwise, just start the main-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 2012 Sorting 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"><i class="icon-search"></i></button> <button class="btn hasTooltip" type="button" title="Clear" onclick="document.id('filter_search').value='';this.form.submit();"><i class="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') echo 'selected="selected"'; ?>>Asc</option> <option value="desc" <?php if ($listDirn == 'desc') echo 'selected="selected"'; ?>>Desc</option> </select> 37 </div>
  • 38. Sort Filter & Display # <div class="btn-group pull-right"> November 2012 <label for="sortTable" class="element-invisible">Sort by</label> <select name="sortTable" id="sortTable" class="input-medium" onchange="Joomla.orderTable()"> Joomla World Conference • Bootstrap for Developers • <option value="">Sort by..</option> <?php echo JHtml::_('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 echo JText::_('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 in view.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 2012 45 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 2012 54 Andrea Tarr
  • 55. Detail on using sub-layouts for 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 2012 60 Andrea Tarr
  • 61. Credits • Background photo by the_tahoe_guy Bootstrap for Developers • Joomla World Conference • November 2012 61 Andrea Tarr

Editor's Notes

  • #7: twitter.github.com/bootstrapSave to jz
  • #10: 1170 &amp; 764
  • #11: 1170 &amp; 764
  • #13: 1170 &amp; 764
  • #15: mention .hidden-phone class on elements and table columns to improve phone UX
  • #18: Adding &quot;adminlist&quot;