My Joomla World Conference 2012 presentation on Bootstrap best practices in Joomla 3.0 components

1. Bootstrapping JOOMLA 3.0
Best Practices & Standards
KYLE LEDBETTER
PRINCIPAL USABILITY ENGINEER
EBAY, INC.
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

2. @kyleledbetter
JOOMLA WORLD CONFERENCE 2012 JOOMLA 3.0 UX
photo copyright Monty Ksycki
Tuesday, December 4, 12

3. JUI a Joomla SDK
‣ Standard UI/UX Bootstrap
‣ Modern Tools Extended Bootstrap
‣ Continuously Improved Icomoon Font Icons
‣ Available Everywhere jQuery & jQuery UI
Frontend & Backend
Chosen Select Boxes
‣
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

4. YOU CAN BUILD ANYTHING ON BOOTSTRAP
FOR REALS. ANYTHING. TRUST ME.
‣ ADMIN GUI ‣ ONLINE MAGAZINE ‣ SHOPPING CART
‣ MINIMAL BLOG ‣ TEXT EDITOR ‣ Calendar
‣ PROJECT MANAGER ‣ PHOTO GALLERY ‣ Search Engine
‣ SOCIAL NETWORK ‣ Forum ‣ COMPLEX WORKFLOW
I COULD GO ON...
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

5. How Templates Use LESS template.less
JUI @import
/less
accordion alerts
variables.less
breadcrumbs Buttons
carousel dropdowns icomoon.less
forms grid layouts
modals navbar tables
1 template.css for everything!
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

6. If you need custom styles Use LESS
Use Custom Styles Sparingly!
Use “Global” Bootstrap Variables & Mixins
Include Your LeSS Files WITH YOUR COMPONENT
Make Your CompileD CSS Optional
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

7. ADMIN BEST PRACTICES: CPANEL LAYOUT
BOOTSTRAP GRID
ADMIN MODULES
SUBMENU ON LEFT
SPAN2 SPAN6 SPAN4
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

8. ADMIN BEST PRACTICES: LIST LAYOUT
BOOTSTRAP GRID
LEFT FILTERS
SPAN2 SPAN10
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

9. ADMIN BEST PRACTICES: EDIT LAYOUT
BOOTSTRAP GRID
COMMON PARAMS
ON RIGHT
Advanced Params
In Tabs
SPAN10 SPAN2
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

10. ADMIN BEST PRACTICES: Special Note on Layouts
If You Use The
System Submenu:
Use Nested
Bootstrap Grid
Just as with the
Normal Grid,
Nested grid = 12
Spans = 12 Total SPAN8 SPAN4
SPAN2 = 12 SPAN10
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

11. Admin Best Practices
Toolbar
Use .btn-success for NEW in 1st position
Use .btn-success for SAVE (Apply) in 1st position
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

12. Admin Best Practices
Nav LIst VS TAbs
Subnav is in the Tabs are for
vertical left nav in-page
position content
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

13. Admin Best Practices
Bootstrap Responsive Utility Classes
.hidden-phone
(Liberally) apply
this class to all
elements you’d
like to hide on
phones
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

14. Admin Best Practices
Radio Toggle Button groups
Use For:
‣ Status
‣ Yes / No
.btn-group ‣ Show / Hide
Add this class to
a radio input
type in your
form .xml
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

15. Admin Best Practices
Chosen Select JavaScript
JHtml::_('formbehavior.chosen', 'select');
Add this behavior (optionally) to any
of your admin views.
JHtml::_('formbehavior.chosen', '.chzn-select');
You can also define a specific class
instead of targeting all selects
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

16. ICOMOON FONT ICONS
SHIPPED WITH JOOMLA 3.0
MARKUP:
NATIVE BOOTSTRAP STYLE
<i class="icon-home"></i>
NATIVE ICOMOON STYLE
<span aria-hidden="true" class="icon-home"></span>
Full list of icons at http://kyleledbetter.com/jui/icons
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

17. Frontend (Site) Best Practices
The Frontend UI Can Have Much More Variation
Strive To Be Creative With Markup
VS
Writing Tons of CSS You’ll Have to SupporT
Don’t Believe Me?
Let Me Show You Some Examples
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

18. JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12

19. THANK YOU! LET’S GET TO WORK!
ROUNDTABLE SESSION
KYLE LEDBETTER
PRINCIPAL USABILITY ENGINEER
EBAY, INC.
JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0
Tuesday, December 4, 12