0
Bootstrapping JOOMLA 3.0                                      Best Practices & Standards                                  ...
@kyleledbetter       JOOMLA WORLD CONFERENCE 2012                                             JOOMLA 3.0 UX               ...
JUI a Joomla SDK         ‣     Standard UI/UX          Bootstrap         ‣     Modern Tools            Extended Bootstrap ...
YOU CAN BUILD ANYTHING ON BOOTSTRAP         FOR REALS. ANYTHING. TRUST ME.         ‣     ADMIN GUI                  ‣   ON...
How Templates Use LESS             template.less                               JUI         @import                        ...
If you need custom styles Use LESS        Use Custom Styles Sparingly!                          Use “Global” Bootstrap Var...
ADMIN BEST PRACTICES: CPANEL LAYOUT      BOOTSTRAP GRID      ADMIN MODULES      SUBMENU ON LEFT                           ...
ADMIN BEST PRACTICES: LIST LAYOUT      BOOTSTRAP GRID      LEFT FILTERS                                      SPAN2   SPAN1...
ADMIN BEST PRACTICES: EDIT LAYOUT      BOOTSTRAP GRID      COMMON PARAMS      ON RIGHT      Advanced Params      In Tabs  ...
ADMIN BEST PRACTICES: Special Note on Layouts      If You Use The      System Submenu:      Use Nested      Bootstrap Grid...
Admin Best Practices       Toolbar                             Use .btn-success for NEW in 1st position                   ...
Admin Best Practices       Nav LIst VS TAbs      Subnav is in the                Tabs are for      vertical left nav      ...
Admin Best Practices       Bootstrap Responsive Utility Classes                                 .hidden-phone             ...
Admin Best Practices       Radio Toggle Button groups                                                          Use For:   ...
Admin Best Practices       Chosen Select JavaScript                   JHtml::_(formbehavior.chosen, select);            Ad...
ICOMOON FONT ICONS       SHIPPED WITH JOOMLA 3.0       MARKUP:       NATIVE BOOTSTRAP STYLE                          <i cl...
Frontend (Site) Best Practices      The Frontend UI Can Have Much More Variation                                  Strive T...
JOOMLA WORLD CONFERENCE 2012   BOOTSTRAPPING 3.0Tuesday, December 4, 12
THANK YOU! LET’S GET TO WORK!                                      ROUNDTABLE SESSION                                     ...
Upcoming SlideShare
Loading in...5
×

Bootstrapping Joomla 3.0

8,239

Published on

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

Published in: Technology
2 Comments
8 Likes
Statistics
Notes
  • Great slide. We are currently trying to adopt with JUI3.0 for our extension. Seems it will need to give less time for design while developing joomla extension.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Much of this presentation was conversations not shown in slides, here's a link to the video http://www.youtube.com/watch?v=OXEx5wMF4fo&feature=youtu.be
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,239
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
112
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Bootstrapping Joomla 3.0"

  1. 1. Bootstrapping JOOMLA 3.0 Best Practices & Standards KYLE LEDBETTER PRINCIPAL USABILITY ENGINEER EBAY, INC. JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0Tuesday, December 4, 12
  2. 2. @kyleledbetter JOOMLA WORLD CONFERENCE 2012 JOOMLA 3.0 UX photo copyright Monty KsyckiTuesday, December 4, 12
  3. 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.0Tuesday, December 4, 12
  4. 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.0Tuesday, December 4, 12
  5. 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.0Tuesday, December 4, 12
  6. 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.0Tuesday, December 4, 12
  7. 7. ADMIN BEST PRACTICES: CPANEL LAYOUT BOOTSTRAP GRID ADMIN MODULES SUBMENU ON LEFT SPAN2 SPAN6 SPAN4 JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0Tuesday, December 4, 12
  8. 8. ADMIN BEST PRACTICES: LIST LAYOUT BOOTSTRAP GRID LEFT FILTERS SPAN2 SPAN10 JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0Tuesday, December 4, 12
  9. 9. ADMIN BEST PRACTICES: EDIT LAYOUT BOOTSTRAP GRID COMMON PARAMS ON RIGHT Advanced Params In Tabs SPAN10 SPAN2 JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0Tuesday, December 4, 12
  10. 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.0Tuesday, December 4, 12
  11. 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.0Tuesday, December 4, 12
  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.0Tuesday, December 4, 12
  13. 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.0Tuesday, December 4, 12
  14. 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.0Tuesday, December 4, 12
  15. 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.0Tuesday, December 4, 12
  16. 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.0Tuesday, December 4, 12
  17. 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.0Tuesday, December 4, 12
  18. 18. JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0Tuesday, December 4, 12
  19. 19. THANK YOU! LET’S GET TO WORK! ROUNDTABLE SESSION KYLE LEDBETTER PRINCIPAL USABILITY ENGINEER EBAY, INC. JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0Tuesday, December 4, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×