scott jehl, designer / developer - filament group€¦ · • html/css consistency across ui...
TRANSCRIPT
![Page 1: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/1.jpg)
Scott Jehl, Designer / Developer
![Page 2: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/2.jpg)
Design Reusable jQuery Components Like a Rockstar Professional
Scott Jehl, Designer / Developer
![Page 3: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/3.jpg)
Hello.
A quick introduction...
Designer / Developerhttp://FilamentGroup.com
Founderhttp://WriteMaps.com
Scott Jehl http://ScottJehl.com
![Page 4: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/4.jpg)
Also designer of the new jQuery Indentity:
![Page 5: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/5.jpg)
...and website:
![Page 6: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/6.jpg)
![Page 7: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/7.jpg)
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.
![Page 8: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/8.jpg)
![Page 9: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/9.jpg)
• 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
![Page 10: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/10.jpg)
Making visualizations, components, and interactions more accessible.
![Page 11: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/11.jpg)
Accessible Charting:
http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/
![Page 12: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/12.jpg)
Creating elegant solutions for complex UI scenarios
![Page 13: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/13.jpg)
“iPod” Hierarchical Menu:
http://filamentgroup.com/lab/
jquery_ipod_style_drilldown_menu
![Page 14: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/14.jpg)
Date Range Picker:
http://www.filamentgroup.com/lab/jquery_interactive_date_range_picker_with_shortcuts/
![Page 15: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/15.jpg)
Finding patterns for progressive enhancement in UI components.
![Page 16: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/16.jpg)
Slider from Select Menus
http://www.filamentgroup.com/lab/progressive_enhancement_convert_select_box_to_accessible_jquery_ui_slider/
![Page 17: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/17.jpg)
![Page 18: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/18.jpg)
In Action!
A couple of quick demos
![Page 19: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/19.jpg)
jQuery UI in a web application
![Page 20: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/20.jpg)
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
![Page 21: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/21.jpg)
Enhancing a form with jQuery UI
![Page 22: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/22.jpg)
Demo page from : Test-Driven Progressive Enhancementby Scott Jehl, A List Apart Issue 268
http://alistapart.com/articles/testdriven
![Page 23: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/23.jpg)
Demo page from : Test-Driven Progressive Enhancementby Scott Jehl, A List Apart Issue 268
http://alistapart.com/articles/testdriven
![Page 24: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/24.jpg)
![Page 25: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/25.jpg)
• Redesign the jQuery UI Component family (and beyond).
• Make existing components more reusable from a design perspective.
Project goals:
![Page 26: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/26.jpg)
Redesigning the jQuery UI component family (and beyond)
![Page 27: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/27.jpg)
Redesigning the jQuery UI component family
![Page 28: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/28.jpg)
Redesigning the jQuery UI component family
![Page 29: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/29.jpg)
Redesigning the jQuery UI component family
![Page 30: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/30.jpg)
...and lots more:
![Page 31: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/31.jpg)
...and lots more:
![Page 32: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/32.jpg)
...and lots more:
![Page 33: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/33.jpg)
...and lots more:
![Page 34: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/34.jpg)
...and lots more:
![Page 35: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/35.jpg)
Making jQuery UI components more reusable from a design perspective:
![Page 36: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/36.jpg)
ThemeRoller
![Page 37: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/37.jpg)
![Page 38: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/38.jpg)
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
![Page 39: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/39.jpg)
Scalability (EMs).ui-datepicker { font-size: 30px; }
![Page 40: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/40.jpg)
Themeability
![Page 41: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/41.jpg)
UI Integration Demo:
http://capitolmusicfest.com
![Page 42: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/42.jpg)
Extensibility
ThemeRollerReady
ThemeRollerThemeRollerReady
![Page 43: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/43.jpg)
Extensibility
ThemeRoller
jquery-ui-themeroller.css
![Page 44: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/44.jpg)
How TR-Ready WorksContainer Classes:
• .ui-component: Outermost wrapper div
• .ui-component-content: For content areas within a component.
![Page 45: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/45.jpg)
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.
![Page 46: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/46.jpg)
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
![Page 47: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/47.jpg)
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
![Page 48: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/48.jpg)
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?)
![Page 49: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/49.jpg)
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:
![Page 50: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/50.jpg)
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:
![Page 51: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/51.jpg)
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.
![Page 52: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/52.jpg)
TR-Ready Documented at:
http://www.filamentgroup.com/lab/
Also will be added to docs soon...
![Page 53: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/53.jpg)
One last thing...
![Page 54: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/54.jpg)
ThemeRoller Developer Tool:
One last thing...
![Page 55: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/55.jpg)
More infoMore info and slides available here:
http://www.filamentgroup.com/lab/
![Page 56: Scott Jehl, Designer / Developer - Filament Group€¦ · • HTML/CSS consistency across UI plugins • Easier Mashups of multiple components • Offload the design to the framework](https://reader036.vdocument.in/reader036/viewer/2022063016/5fd50be6a4386839b0278e36/html5/thumbnails/56.jpg)
Thanks. Questions?
Scott Jehl, Designer / Developer