SlideShare ist ein Scribd-Unternehmen logo
1 von 61
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)François Massart
 
Fosdem 2009 – improving drupal's page loading performance
Fosdem 2009 – improving drupal's page loading performanceFosdem 2009 – improving drupal's page loading performance
Fosdem 2009 – improving drupal's page loading performanceErup Enolc
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSSShay Howe
 
Accessible UIs with jQuery and Infusion
Accessible UIs with jQuery and InfusionAccessible UIs with jQuery and Infusion
Accessible UIs with jQuery and Infusioncolinbdclark
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopShay Howe
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignDebra Shapiro
 
WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSJer Clarke
 
Drupal By Design - Business Case for Drupal
Drupal By Design - Business Case for DrupalDrupal By Design - Business Case for Drupal
Drupal By Design - Business Case for DrupalGlenn Lim
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS WorkshopJulie Cameron
 
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than AccessibilityWAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility偉格 高
 
Modular HTML & CSS Workshop
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS WorkshopShay Howe
 
5 Common Mistakes You are Making on your Website
 5 Common Mistakes You are Making on your Website 5 Common Mistakes You are Making on your Website
5 Common Mistakes You are Making on your WebsiteAcquia
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopShay Howe
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 

Was ist angesagt? (20)

HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
Drupal Skils Lab 302Labs
Drupal Skils Lab 302Labs Drupal Skils Lab 302Labs
Drupal Skils Lab 302Labs
 
Fosdem 2009 – improving drupal's page loading performance
Fosdem 2009 – improving drupal's page loading performanceFosdem 2009 – improving drupal's page loading performance
Fosdem 2009 – improving drupal's page loading performance
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
 
Accessible UIs with jQuery and Infusion
Accessible UIs with jQuery and InfusionAccessible UIs with jQuery and Infusion
Accessible UIs with jQuery and Infusion
 
Drupal -Introduction to Drupal
Drupal -Introduction to DrupalDrupal -Introduction to Drupal
Drupal -Introduction to Drupal
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSS
 
Drupal By Design - Business Case for Drupal
Drupal By Design - Business Case for DrupalDrupal By Design - Business Case for Drupal
Drupal By Design - Business Case for Drupal
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS Workshop
 
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than AccessibilityWAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
 
Modular HTML & CSS Workshop
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS Workshop
 
5 Common Mistakes You are Making on your Website
 5 Common Mistakes You are Making on your Website 5 Common Mistakes You are Making on your Website
5 Common Mistakes You are Making on your Website
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo Workshop
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 

Ähnlich wie Bootstrap for Extension Developers JWC 2012

Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap IntroductionAndrea Tarr
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Acquia
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 FundamentalLanh Le
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry
 
Freelancer Weapons of mass productivity
Freelancer Weapons of mass productivityFreelancer Weapons of mass productivity
Freelancer Weapons of mass productivityGregg Coppen
 
Using Open Atrium in Your Organization
Using Open Atrium in Your OrganizationUsing Open Atrium in Your Organization
Using Open Atrium in Your OrganizationPhase2
 
Collaborating with the Community
Collaborating with the CommunityCollaborating with the Community
Collaborating with the Communitytinacallahan
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?glen_a_smith
 
DrupalCon Austin - Absolute Beginner's Guide to Drupal
DrupalCon Austin - Absolute Beginner's Guide to DrupalDrupalCon Austin - Absolute Beginner's Guide to Drupal
DrupalCon Austin - Absolute Beginner's Guide to DrupalRod Martin
 
Drupal content editing ux
Drupal content editing uxDrupal content editing ux
Drupal content editing uxSergei Sorokin
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondSpark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondAngela Byron
 
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalAbsolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalRod Martin
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Acquia
 
Drupal 8 - Build Week Update
Drupal 8 - Build Week UpdateDrupal 8 - Build Week Update
Drupal 8 - Build Week UpdateAngela Byron
 
Plain english guide to drupal 8 criticals
Plain english guide to drupal 8 criticalsPlain english guide to drupal 8 criticals
Plain english guide to drupal 8 criticalsAngela Byron
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an OverviewMatt Weaver
 

Ähnlich wie Bootstrap for Extension Developers JWC 2012 (20)

Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap Introduction
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 Fundamental
 
DrupalCon 2011 Highlight
DrupalCon 2011 HighlightDrupalCon 2011 Highlight
DrupalCon 2011 Highlight
 
Django
DjangoDjango
Django
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
 
Django Documentation
Django DocumentationDjango Documentation
Django Documentation
 
Freelancer Weapons of mass productivity
Freelancer Weapons of mass productivityFreelancer Weapons of mass productivity
Freelancer Weapons of mass productivity
 
Using Open Atrium in Your Organization
Using Open Atrium in Your OrganizationUsing Open Atrium in Your Organization
Using Open Atrium in Your Organization
 
Collaborating with the Community
Collaborating with the CommunityCollaborating with the Community
Collaborating with the Community
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?
 
DrupalCon Austin - Absolute Beginner's Guide to Drupal
DrupalCon Austin - Absolute Beginner's Guide to DrupalDrupalCon Austin - Absolute Beginner's Guide to Drupal
DrupalCon Austin - Absolute Beginner's Guide to Drupal
 
Drupal content editing ux
Drupal content editing uxDrupal content editing ux
Drupal content editing ux
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondSpark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
 
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalAbsolute Beginners Guide to Drupal
Absolute Beginners Guide to Drupal
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
 
Drupal 8 - Build Week Update
Drupal 8 - Build Week UpdateDrupal 8 - Build Week Update
Drupal 8 - Build Week Update
 
Plain english guide to drupal 8 criticals
Plain english guide to drupal 8 criticalsPlain english guide to drupal 8 criticals
Plain english guide to drupal 8 criticals
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
 
Open Social
Open Social Open Social
Open Social
 

Mehr von Andrea Tarr

Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Andrea Tarr
 
The State of Joomla - J and Beyond 2013
The State of Joomla - J and Beyond 2013The State of Joomla - J and Beyond 2013
The State of Joomla - J and Beyond 2013Andrea Tarr
 
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS PreprocessorAndrea Tarr
 
Bootstrap & Joomla UI
Bootstrap & Joomla UIBootstrap & Joomla UI
Bootstrap & Joomla UIAndrea Tarr
 
PHP for HTML Gurus - J and Beyond 2012
PHP for HTML Gurus - J and Beyond 2012PHP for HTML Gurus - J and Beyond 2012
PHP for HTML Gurus - J and Beyond 2012Andrea Tarr
 
Where is Joomla going and how do we get there? J and Beyond 2012
Where is Joomla going and how do we get there? J and Beyond 2012Where is Joomla going and how do we get there? J and Beyond 2012
Where is Joomla going and how do we get there? J and Beyond 2012Andrea Tarr
 
Choosing Great Joomla Extensions
Choosing Great Joomla ExtensionsChoosing Great Joomla Extensions
Choosing Great Joomla ExtensionsAndrea Tarr
 

Mehr von Andrea Tarr (7)

Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013
 
The State of Joomla - J and Beyond 2013
The State of Joomla - J and Beyond 2013The State of Joomla - J and Beyond 2013
The State of Joomla - J and Beyond 2013
 
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS Preprocessor
 
Bootstrap & Joomla UI
Bootstrap & Joomla UIBootstrap & Joomla UI
Bootstrap & Joomla UI
 
PHP for HTML Gurus - J and Beyond 2012
PHP for HTML Gurus - J and Beyond 2012PHP for HTML Gurus - J and Beyond 2012
PHP for HTML Gurus - J and Beyond 2012
 
Where is Joomla going and how do we get there? J and Beyond 2012
Where is Joomla going and how do we get there? J and Beyond 2012Where is Joomla going and how do we get there? J and Beyond 2012
Where is Joomla going and how do we get there? J and Beyond 2012
 
Choosing Great Joomla Extensions
Choosing Great Joomla ExtensionsChoosing Great Joomla Extensions
Choosing Great Joomla Extensions
 

Kürzlich hochgeladen

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 

Kürzlich hochgeladen (20)

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 

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

Hinweis der Redaktion

  1. twitter.github.com/bootstrapSave to jz
  2. 1170 &amp; 764
  3. 1170 &amp; 764
  4. 1170 &amp; 764
  5. mention .hidden-phone class on elements and table columns to improve phone UX
  6. Adding &quot;adminlist&quot;