Upload
kyle-ledbetter
View
7.779
Download
0
Tags:
Embed Size (px)
DESCRIPTION
My Joomla World Conference 2012 presentation on Bootstrap best practices in Joomla 3.0 components
Citation preview
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
Bootstrapping JOOMLA 3.0
KYLE LEDBETTERPRINCIPAL USABILITY ENGINEEREBAY, INC.
Best Practices & Standards
Tuesday, December 4, 12
JOOMLA 3.0 UXJOOMLA WORLD CONFERENCE 2012
@kyleledbetter
photo copyright Monty KsyckiTuesday, December 4, 12
JUI a Joomla SDK
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
BootstrapExtended BootstrapIcomoon Font IconsjQuery & jQuery UIChosen Select Boxes
‣ Standard UI/UX‣ Modern Tools‣ Continuously Improved‣ Available Everywhere‣ Frontend & Backend
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
YOU CAN BUILD ANYTHING ON BOOTSTRAPFOR REALS. ANYTHING. TRUST ME.
‣ ADMIN GUI‣ MINIMAL BLOG‣ PROJECT MANAGER‣ SOCIAL NETWORK
‣ ONLINE MAGAZINE‣ TEXT EDITOR‣ PHOTO GALLERY‣ Forum
‣ SHOPPING CART‣ Calendar‣ Search Engine‣ COMPLEX WORKFLOW
I COULD GO ON...
Tuesday, December 4, 12
How Templates Use LESS
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
accordion alerts
JUI
breadcrumbs Buttonscarousel dropdownsforms grid layoutsmodals navbar tables
template.less
@import/lessvariables.lessicomoon.less
1 template.css for everything!
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
If you need custom styles Use LESS
Use “Global” Bootstrap Variables & Mixins
Use Custom Styles Sparingly!
Include Your LeSS Files WITH YOUR COMPONENT
Make Your CompileD CSS Optional
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
ADMIN BEST PRACTICES: CPANEL LAYOUT
SPAN2 SPAN6 SPAN4
BOOTSTRAP GRIDADMIN MODULES
SUBMENU ON LEFT
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
ADMIN BEST PRACTICES: LIST LAYOUT
SPAN2 SPAN10
BOOTSTRAP GRIDLEFT FILTERS
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
ADMIN BEST PRACTICES: EDIT LAYOUTBOOTSTRAP GRID
COMMON PARAMSON RIGHT
SPAN2SPAN10
Advanced Params In Tabs
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
ADMIN BEST PRACTICES: Special Note on LayoutsIf You Use TheSystem Submenu:Use Nested Bootstrap Grid
SPAN2 SPAN10SPAN8 SPAN4
Just as with the Normal Grid, Nested grid Spans = 12 Total
= 12
= 12
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
Admin Best PracticesToolbar
Use .btn-success for NEW in 1st position
Use .btn-success for SAVE (Apply) in 1st position
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
Admin Best PracticesNav LIst VS TAbs
Subnav is in the vertical left navposition
Tabs are for in-page content
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
Admin Best PracticesBootstrap Responsive Utility Classes
.hidden-phone
(Liberally) apply this class to all elements you’d like to hide on phones
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
Admin Best PracticesRadio Toggle Button groups
.btn-group
Add this class to a radio input type in your form .xml
Use For:‣ Status‣ Yes / No‣ Show / Hide
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
Admin Best PracticesChosen 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
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
ICOMOON FONT ICONSSHIPPED WITH JOOMLA 3.0
MARKUP:
<i class="icon-home"></i>
NATIVE BOOTSTRAP STYLE
<span aria-hidden="true" class="icon-home"></span>
NATIVE ICOMOON STYLE
Full list of icons at http://kyleledbetter.com/jui/icons
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
Frontend (Site) Best Practices
Strive To Be Creative With Markup
The Frontend UI Can Have Much More Variation
Writing Tons of CSS You’ll Have to SupporT
Let Me Show You Some Examples
VS
Don’t Believe Me?
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
Tuesday, December 4, 12
BOOTSTRAPPING 3.0JOOMLA WORLD CONFERENCE 2012
THANK YOU! LET’S GET TO WORK!
KYLE LEDBETTERPRINCIPAL USABILITY ENGINEEREBAY, INC.
ROUNDTABLE SESSION
Tuesday, December 4, 12