160
The jQuery UI CSS Framework & ThemeRoller An in-depth overview of theming and design in jQuery UI. Todd Parker & Scott Jehl

The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

  • Upload
    ledang

  • View
    267

  • Download
    1

Embed Size (px)

Citation preview

Page 1: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRollerAn in-depth overview of theming and design in jQuery UI.

Todd Parker & Scott Jehl

Page 2: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

hello.

Todd Parker Scott Jehl

Page 3: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

A Boston-based design firm specializing in complex web application design & development.

Official Sponsor and Design Team

Page 4: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Theming in jQuery UIhow we got to where we are today...

A brief history of

Page 5: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

how things

used to be...

Page 6: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

hand-coded themes

Page 7: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 8: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 9: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

CSS + Photoshop + Firebug

skills required

Page 10: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Simpler theming(ThemeRoller v.1.0)

A step towards

Page 11: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

(Version 1.0)

Page 12: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

A GUI for theming jQuery UI widgets

Page 13: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Keep it simplefocus on the design, not editing CSS

Page 14: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

tmi...

Page 15: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

But not too simplepre-built themes are limited

Page 16: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 17: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

A middle groundsimple, but powerful

Page 18: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Created by !lament group inc.

Simply choose your style and colors, then download a custom theme !le.

View theme gallery Preview themeDownload (zip)Save to gallery

ThemeRoller

Page 19: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

good. but not without few problems...

Page 20: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Not separated.Widget + Theme CSS intertwined

Page 21: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

.ui-dialog-title {

background-color: ...;

margin: ...;

padding:...;

color: ...;

}

Page 22: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Not static.PHP in our CSS

Page 23: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

.ui-dialog-title {

background-color: <?=$defaultBGColor; ?>;

}

Page 24: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Not versioned.CSS lives on the web server.

Page 25: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

theme.css.php

Page 26: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Not easily integrated.Where do I download widgets AND themes?

Page 27: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Not well supported.Do we support Flora or ThemeRoller? Both?

Page 28: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

...and a bit limitedneeds more levers, more control

Page 29: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

September ‘08

joins the jQuery UI team as sponsor and design lead

Page 30: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

jQuery UI version 1.7including ThemeRoller V2 & UI CSS framework

Big changes underway!

Page 31: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

jQuery UI 1.7refactored widgets, simplified markup

Page 32: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

jQuery UI CSS FrameworkConsistent system for theming all widgets

Page 33: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

and

ThemeRoller v2.0built to manipulate the new framework

Page 34: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 35: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Consistency across UIcommon classes for global control

Page 36: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 37: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

New levers addedheader, highlight, error, overlay, shadow

Page 38: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 39: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

More design flexibility colors + PNG textures = millions of combos

Page 40: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 41: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Image texture w/variable opacity

Flat color

PNG Composite image

Page 42: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

CSS3 rounded cornersfewer requests, more flexible, less markup

Page 43: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 44: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Flexible CSS unitsems and % allow proportional scaling

Page 45: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 46: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Icon sprites173 free, themable icons, 1 request per color

Page 47: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 48: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

New themes!24 total: new and refreshed

Page 49: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Scott J’s creation

Page 50: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Google CDN hostingfor all gallery themes!

Page 51: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://www.jqueryui.com/development

Page 52: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Permanent theme URLsbookmark, email, tweak

Page 53: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

ui.theme.css

Page 54: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Downloader integrationcustom & gallery theme selector built-in

Page 55: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 56: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Using ThemeRoller

let’s see this thing already!

Page 57: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Video Demo Slide (not available in this format)Try ThemeRoller live at:http://themeroller.com

Page 58: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 59: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

cool. so...

what’s in the zip?

Page 60: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 61: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 62: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 63: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 64: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 65: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 66: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 67: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 68: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 69: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 70: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 71: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

jQuery UI CSS Framework

The bird’s eye view:

Using ThemeRoller as our guide

Page 72: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Clean separationof widget and theme styles

Page 73: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Class Breakdown:

theme-specificwidget-specific

Page 74: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Widget-specific classesdimensions, visibility, positioning, margins, padding

Page 75: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Theme-specific classestext colors, backgrounds, fonts, icons

Page 76: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Global font settingsapply with .ui-widget

Page 77: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

7 primary theme “levers”Generic, semantic names

Page 78: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

.ui-widget-header

.ui-widget-content

Containers

Page 79: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

ui-state-defaultui-state-hover

ui-state-active

Clickable states

Page 80: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

ui-state-highlight ui-state-error

System states

Page 81: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

ui-widget-overlay ui-widget-shadow

Overlay elements

Page 82: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

theme levers define

color & texture only

Page 83: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 84: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

.ui-icon-arrowthick-1-n

.ui-icon-trash

.ui-icon-calendaretc, etc, etc

Icon classes

Page 85: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Plus a few framework goodies...

Page 86: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

.ui-state-disabled

.ui-priority-primary

.ui-priority-secondary

Interaction cues

Page 87: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

.ui-helper-hidden

.ui-helper-hidden-accessible

.ui-helper-reset

.ui-helper-clearfix

Layout helpers

Page 88: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

And Rounded Corners!using CSS3 border radius

.ui-corner-all

.ui-corner-top

.ui-corner-bottom

.ui-corner-right

.ui-corner-left

.ui-corner-tl

.ui-corner-tr

.ui-corner-bl

.ui-corner-br

Page 89: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

if IE really needs rounded corners *

Script them in!

DD_roundies.addRule('.ui-corner-all', '8px');

* it doesn’t.

Page 90: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

jQuery UI CSS Framework

the worm’s eye view:

Page 91: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

UI tabs deconstructed:

Page 92: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Tabs Markup

Page 93: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Tabs HTML<div id=”tabs”>

<ul>

<li><a href="#tabs-1">First</a></li>

<li><a href="#tabs-2">Second</a></li>

<li><a href="#tabs-3">Third</a></li>

</ul>

<div id="tabs-1">Lorem ipsum dolor.</div>

<div id="tabs-2">Lorem ipsum dolor.</div>

<div id="tabs-3">Lorem ipsum dolor.</div>

</div>

Page 94: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Add Widget-specific classes

Page 95: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<div id="tabs" class="ui-tabs">

<ul class="ui-tabs-nav">

<li class="ui-tabs-selected"><a href="#tabs-1">First</a></li>

<li><a href="#tabs-2">Second</a></li>

<li><a href="#tabs-3">Third</a></li>

</ul>

<div id="tabs-1" class="ui-tabs-panel">Lorem ipsum dolor.</div>

<div id="tabs-2" class="ui-tabs-panel ui-tabs-hide">...</div>

<div id="tabs-3" class="ui-tabs-panel ui-tabs-hide">...</div>

</div>

Tabs HTML

Page 96: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

.ui-tabs {

padding: .2em;

}

.ui-tabs .ui-tabs-nav {

list-style: none;

position: relative;

padding: .2em .2em 0;

margin: 0;

}

.ui-tabs .ui-tabs-nav li {

position: relative;

ui.tabs.css

Page 97: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 98: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Add theme-specific classes

Page 99: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Add ui-widget to parentsets theme font and size

Page 100: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Tabs HTML<div id="tabs" class="ui-tabs ui-widget">

<ul class="ui-tabs-nav">

<li class="ui-tabs-selected"><a href="#tabs-1">First</a></li>

<li><a href="#tabs-2">Second</a></li>

<li><a href="#tabs-3">Third</a></li>

</ul>

<div id="tabs-1" class="ui-tabs-panel">Lorem ipsum dolor.</div>

<div id="tabs-2" class="ui-tabs-panel ui-tabs-hide">...</div>

<div id="tabs-3" class="ui-tabs-panel ui-tabs-hide">...</div>

</div>

Page 101: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 102: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Add container classessets color, border, background,

Page 103: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<div id="tabs" class="ui-tabs ui-widget ui-widget-content">

<ul class="ui-tabs-nav ui-widget-header">

...

</ul>

<div id="tabs-1" class="ui-tabs-panel ui-widget-content">...</div>

<div id="tabs-2" class="ui-tabs-panel ui-tabs-hide ui-widget-

content">...</div>

<div id="tabs-3" class="ui-tabs-panel ui-tabs-hide ui-widget-

content">...</div>

</div>

Tabs HTML

Page 104: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 105: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Add state classesclickable, hover, active, etc

Page 106: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<div id="tabs" class="ui-tabs ui-widget ui-widget-content">

<ul class="ui-tabs-nav ui-widget-header">

<li class="ui-tabs-selected ui-state-active"><a

href="#tabs-1">First</a></li>

<li class=”ui-state-default”><a href="#tabs-2">Second</a></li>

<li class=”ui-state-default”><a href="#tabs-3">Third</a></li>

</ul>

...

</div>

Tabs HTML

Page 107: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 108: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Smooth it outdecide what corners to round

Page 109: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Tabs HTML<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-

all">

<ul class="ui-tabs-nav ui-widget-header ui-corner-all">

<li class="ui-tabs-selected ui-state-active ui-corner-top"><a

href="#tabs-1">First</a></li>

<li class=”ui-state-default ui-corner-top”><a

href="#tabs-2">Second</a></li>

<li class=”ui-state-default ui-corner-top”><a

href="#tabs-3">Third</a></li>

</ul>

...

Page 110: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Done.

Page 111: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Multiple scoped themes

Taking it further...

Page 112: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<link type="text/css" href="css/redmond/jquery-

ui-1.7.2.custom.css" rel="stylesheet" />

Link to UI themeimport the theme CSS in the <head>

Page 113: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

JS: $(‘.datepicker’).datepicker();

Add two datepickers

<div class="datepicker"></div>

<div class="datepicker"></div>

Page 114: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Redmond themes all widgets

Page 115: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<div class="datepicker"></div>

<div class="mysection">

<div class="datepicker"></div>

</div>

Let’s theme one differentlywrap one in “.mysection” div for scoping

Page 116: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Back to the download builder!add theme scoping, get zip

.mysection

mysection

Page 117: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Headaches savedThemeRoller adds scope selector to every rule

Page 118: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Grab the theme folderpaste into CSS/ alongside other theme

Page 119: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<link type="text/css" href="css/redmond/jquery-

ui-1.7.2.custom.css" rel="stylesheet" />

<link type="text/css" href="css/mysection/jquery-

ui-1.7.2.custom.css" rel="stylesheet" />

Link to new theme

Page 120: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

2 themes, 1 page.

Page 121: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

ThemeRoller-ready

How 3rd party plugins can be

Page 122: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Page 123: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Yum.we’re eating our own dog food

Page 124: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Same theming toolsfor official jQuery UI & 3rd party plugins

Page 125: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Easy to usejust use the framework classes

Page 126: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

for example...let’s make a button!

Page 127: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<link type="text/css" href="css/start/jquery-

ui-1.7.2.custom.css" rel="stylesheet" />

Link to CSSimport the UI theme into your page

Page 128: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<button>Click me</button>

basic markupwith some padding and cursor CSS too

button { padding:0.5em; cursor: pointer; }

Page 129: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<button class=”ui-widget”>Click me</button>

ui-widget classapplies Theme font settings

Page 130: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<button class="ui-widget ui-state-default">Click

me</button>

clickable theme classadds theme’s look and feel

Page 131: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<button class="ui-widget ui-state-hover">Click

me</button>

hover class replaces defaultscripted to make IE happy

Page 132: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<button class="ui-widget ui-state-default ui-

state-disabled">Click me</button>

disabled classsets transparency to dim element *

*combine with disabled=”disabled” attr

Page 133: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<button class="ui-widget ui-state-default ui-

priority-primary">Click me</button>

<button class="ui-widget ui-state-default ui-

priority-secondary">Cancel</button>

primary / secondarypriority classes for emphasis

Page 134: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

<button class="ui-widget ui-state-default ui-

corner-all">Click me</button>

rounded cornersclasses for rounding 1 corner, a side, or all 4!

Page 135: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

A few examplesThemeRoller-ready plugins

Page 136: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://www.trirand.com/jqgrid/jqgrid.html

jQ Grid

Page 137: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://www.nicolas.rudas.info/jquery/finder/

jQuery Finder

Page 140: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://www.trirand.com/jqgrid/jqgrid.html

Select to slider

Page 141: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://jqueryplugins.weebly.com/jquerysheet.html

jQuery sheet

Page 142: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://www.quasipartikel.at/multiselect/

Multi select

Page 143: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

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

iPod, flyout menus

Page 144: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://www.happyworm.com/jquery/jplayer/0.2.4/demo-07.htm

jPlayer

Page 145: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://www.kelvinluck.com/assets/jquery/jScrollPaneUI/

jScrollPane

Page 146: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://plugins.jquery.com/project/ui-checkbox

Checkbox & radio

Page 147: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://pttimeselect.sourceforge.net/example/index.html

Time select

Page 148: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://chessbomb.com/

ChessBomb

Page 149: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://www.filamentgroup.com/examples/peeps/

Peeps

Page 150: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Firefox bookmarkletpull ThemeRoller into any page

Page 151: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://www.jqueryui.com/themeroller/developertool/

Page 152: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Theme switcher widgetpreview themes on any page on the web!

Page 153: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

http://www.jqueryui.com/docs/Theming/ThemeSwitcher

Page 154: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

No Javascript required use framework classes on static markup too

Page 155: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Automatic consistencyEnable developers to easily integrate your plugins!

Page 156: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Give it a trymake it easier for your users

Page 157: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

We’ll pimp your stuffTR-ready plugins will be highly visible

Page 158: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Moving forwardnew levers, css3, name changes, greater adoption

lastly...

Page 159: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Questions?

Thanks!

Page 160: The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller jQuery UI CSS Framework The bird’s eye view: Using ThemeRoller as our guide. The jQuery UI

The jQuery UI CSS Framework & ThemeRoller

Thanks Everyone!for more examples, visit filamentgroup.com/lab

the end...