Bootstrapping Joomla 3.0
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Bootstrapping Joomla 3.0

on

  • 8,828 views

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

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

Statistics

Views

Total Views
8,828
Views on SlideShare
8,818
Embed Views
10

Actions

Likes
7
Downloads
97
Comments
2

4 Embeds 10

https://twitter.com 7
http://twitter.com 1
http://pinterest.com 1
http://autodemolizionimediati.it 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Bootstrapping Joomla 3.0 Presentation Transcript

  • 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. @kyleledbetter JOOMLA WORLD CONFERENCE 2012 JOOMLA 3.0 UX photo copyright Monty KsyckiTuesday, 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.0Tuesday, 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.0Tuesday, 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.0Tuesday, 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.0Tuesday, 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.0Tuesday, December 4, 12
  • 8. ADMIN BEST PRACTICES: LIST LAYOUT BOOTSTRAP GRID LEFT FILTERS SPAN2 SPAN10 JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0Tuesday, 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.0Tuesday, 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.0Tuesday, 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.0Tuesday, 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.0Tuesday, 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.0Tuesday, 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.0Tuesday, 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.0Tuesday, 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.0Tuesday, 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.0Tuesday, December 4, 12
  • 18. JOOMLA WORLD CONFERENCE 2012 BOOTSTRAPPING 3.0Tuesday, 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.0Tuesday, December 4, 12