Bootstrapping Joomla 3.0

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


BootstrapExtended BootstrapIcomoon Font IconsjQuery & jQuery UIChosen Select Boxes

‣ Standard UI/UX‣ Modern Tools‣ Continuously Improved‣ Available Everywhere‣ Frontend & Backend



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...


How Templates Use LESS


accordion alerts

JUI

breadcrumbs Buttonscarousel dropdownsforms grid layoutsmodals navbar tables

template.less

@import/lessvariables.lessicomoon.less

1 template.css for everything!



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



ADMIN BEST PRACTICES: CPANEL LAYOUT

SPAN2 SPAN6 SPAN4

BOOTSTRAP GRIDADMIN MODULES

SUBMENU ON LEFT



ADMIN BEST PRACTICES: LIST LAYOUT

SPAN2 SPAN10

BOOTSTRAP GRIDLEFT FILTERS



ADMIN BEST PRACTICES: EDIT LAYOUTBOOTSTRAP GRID

COMMON PARAMSON RIGHT

SPAN2SPAN10

Advanced Params In Tabs



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



Admin Best PracticesToolbar

Use .btn-success for NEW in 1st position

Use .btn-success for SAVE (Apply) in 1st position



Admin Best PracticesNav LIst VS TAbs

Subnav is in the vertical left navposition

Tabs are for in-page content



Admin Best PracticesBootstrap Responsive Utility Classes

.hidden-phone

(Liberally) apply this class to all elements you’d like to hide on phones



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



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



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


http://kyleledbetter.com/jui/icons

http://kyleledbetter.com/jui/icons


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?





THANK YOU! LET’S GET TO WORK!

KYLE LEDBETTERPRINCIPAL USABILITY ENGINEEREBAY, INC.

ROUNDTABLE SESSION


Technology

Bootstrapping Joomla 3.0