Scott Jehl, Designer / Developer

Design Reusable jQuery Components Like a Rockstar Professional

Scott Jehl, Designer / Developer

Hello.

A quick introduction...

Designer / Developerhttp://FilamentGroup.com

Founderhttp://WriteMaps.com

Scott Jehl http://ScottJehl.com

Also designer of the new jQuery Indentity:

...and website:

Filament Group is a design firm in Boston, MA. Although our business is based upon client work, we frequently contribute our UI and Code solutions to the jQuery / open source community.

• Make visualizations, components, and interactions more accessible

• Create elegant solutions for complex UI scenarios

• Find patterns for progressive enhancement in UI components

With jQuery, we’ve been able to

Making visualizations, components, and interactions more accessible.

Accessible Charting:

http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/

Creating elegant solutions for complex UI scenarios

“iPod” Hierarchical Menu:

http://filamentgroup.com/lab/

jquery_ipod_style_drilldown_menu

Date Range Picker:

http://www.filamentgroup.com/lab/jquery_interactive_date_range_picker_with_shortcuts/

Finding patterns for progressive enhancement in UI components.

Slider from Select Menus

http://www.filamentgroup.com/lab/progressive_enhancement_convert_select_box_to_accessible_jquery_ui_slider/

In Action!

A couple of quick demos

jQuery UI in a web application

UI Slider UI Draggable UI Sortable

Zoom tool for scaling sitemaps structures within the viewport

Print preview tool uses UI draggable for tiling print output of large sitemaps

Pages within a sitemap are enabled for sorting using UI sortable.

in

http://WriteMaps.com

Enhancing a form with jQuery UI

Demo page from : Test-Driven Progressive Enhancementby Scott Jehl, A List Apart Issue 268

http://alistapart.com/articles/testdriven

Demo page from : Test-Driven Progressive Enhancementby Scott Jehl, A List Apart Issue 268

http://alistapart.com/articles/testdriven

• Redesign the jQuery UI Component family (and beyond).

• Make existing components more reusable from a design perspective.

Project goals:

Redesigning the jQuery UI component family (and beyond)

Redesigning the jQuery UI component family

Redesigning the jQuery UI component family

Redesigning the jQuery UI component family

...and lots more:

...and lots more:

...and lots more:

...and lots more:

...and lots more:

Making jQuery UI components more reusable from a design perspective:

ThemeRoller

ThemeRoller is...

• A Web application that allows you to design custom themes for jQuery UI components.

• Great for design collaboration. Themes are saved by URL at all times for copying and bookmarking for future usage as a site expands.

• A CSS framework for creating reusable jQuery components

• http://ThemeRoller.com

Scalability (EMs).ui-datepicker { font-size: 30px; }

Themeability

UI Integration Demo:

http://capitolmusicfest.com

Extensibility

ThemeRollerReady

ThemeRollerThemeRollerReady

Extensibility

ThemeRoller

jquery-ui-themeroller.css

How TR-Ready WorksContainer Classes:

• .ui-component: Outermost wrapper div

• .ui-component-content: For content areas within a component.

How TR-Ready Works

• .ui-default-state: Default (clickable) state

• .ui-hover-state: Hover state

• .ui-active-state: Active state

State Classes:

Each state is built upon a few levers: background-color + texture, border-color, text-color, and icon-color.

How TR-Ready WorksIcon Classes:

TR includes a version of each icon for all states:

Icon class syntax: .ui-[ icon type ]-[direction]-[state]

For example:.ui-arrow-down-hover

How TR-Ready WorksHelper Classes:

• .ui-reset: provides styles for resetting margins, padding, list-style, etc

• .ui-hidden: hides elements

• .ui-accessible-hidden: hides elements through positioning

• .ui-clearfix: Common clearfix styles

Benefits of TR-Ready

• Easier integration into existing design environments

• HTML/CSS consistency across UI plugins

• Easier Mashups of multiple components

• Offload the design to the framework. More time for writing javascript!

• TR-Ready plugins on jQuery.com (Coming soon?)

Some Examples

A ThemeRoller-Ready Button:

<button type="submit" class="ui-default-state">Submit</button>HTML:

@import('jquery-ui-themeroller.smoothness.css'); /*ThemeRoller CSS*/button.ui-default-state { padding: .5em 1em; }

CSS:

$('.ui-default-state').hover( function(){ $(this).addClass('ui-hover-state'); }, function(){ $(this).removeClass('ui-hover-state'); } );

jQuery:

Some Examples

A ThemeRoller-Ready Menu:

<div id="jumpMenu" class="ui-component"> <a href="#menuContain" id="trigger"class="ui-default-state">

<span class="ui-arrow-down-default">Menu</span></a>

<div id="menuContain" class="ui-component-content" > <ul id="menu" class="ui-reset" > <li><a href="#">Nav Item</a></li> <li><a href="#">Nav Item</a></li> <li><a href="#">Nav Item</a></li> <li><a href="#">Nav Item</a></li> </ul> </div></div>

HTML:

When Integrating:

• Attempt to use CSS only for dimensional qualities (width, height, margin, padding, position, float)

• If you only need part of a class, use it and use specificity to override the styles you don’t need.

• Be careful not to overuse state classes as it can cause visual clutter. All clickables need not look like .ui-hover-default!

• Use your own judgement on whether a class is appropriate for a situation.

TR-Ready Documented at:

http://www.filamentgroup.com/lab/

Also will be added to docs soon...

One last thing...

ThemeRoller Developer Tool:

One last thing...

More infoMore info and slides available here:

http://www.filamentgroup.com/lab/

Thanks. Questions?

Scott Jehl, Designer / Developer