jquery by Brandon Chen

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

Todd Parker & Scott Jehl

hello. Todd Parker

The jQuery UI CSS Framework & ThemeRoller

Scott Jehl

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

Official Sponsor and Design Team

The jQuery UI CSS Framework & ThemeRoller

A brief history of

Theming in jQuery UI how we got to where we are today...

The jQuery UI CSS Framework & ThemeRoller

how things

used to be...

The jQuery UI CSS Framework & ThemeRoller

hand-coded themes

The jQuery UI CSS Framework & ThemeRoller

CSS + Photoshop + Firebug

skills required

The jQuery UI CSS Framework & ThemeRoller

A step towards

Simpler theming (ThemeRoller v.1.0)

The jQuery UI CSS Framework & ThemeRoller

(Version 1.0)

The jQuery UI CSS Framework & ThemeRoller

A GUI for theming jQuery UI widgets

The jQuery UI CSS Framework & ThemeRoller

Keep it simple focus on the design, not editing CSS

The jQuery UI CSS Framework & ThemeRoller

tmi...

The jQuery UI CSS Framework & ThemeRoller

But not too simple pre-built themes are limited

The jQuery UI CSS Framework & ThemeRoller

A middle ground simple, but powerful

The jQuery UI CSS Framework & ThemeRoller

ThemeRoller Simply choose your style and colors, then download a custom theme file. Created by filament group inc.

View theme gallery

The jQuery UI CSS Framework & ThemeRoller

Save to gallery

Download (zip)

Preview theme

good. but not without few problems...

The jQuery UI CSS Framework & ThemeRoller

Not separated. Widget + Theme CSS intertwined

The jQuery UI CSS Framework & ThemeRoller

.ui-dialog-title { background-color: ...; margin: ...; padding:...; color: ...; }

The jQuery UI CSS Framework & ThemeRoller

Not static. PHP in our CSS

The jQuery UI CSS Framework & ThemeRoller

.ui-dialog-title { background-color: <?=$defaultBGColor; ?>; }

The jQuery UI CSS Framework & ThemeRoller

Not versioned. CSS lives on the web server.

The jQuery UI CSS Framework & ThemeRoller

theme.css.php

The jQuery UI CSS Framework & ThemeRoller

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

The jQuery UI CSS Framework & ThemeRoller

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

The jQuery UI CSS Framework & ThemeRoller

...and a bit limited needs more levers, more control

The jQuery UI CSS Framework & ThemeRoller

September â&#x20AC;&#x2DC;08

joins the jQuery UI team as sponsor and design lead

The jQuery UI CSS Framework & ThemeRoller

Big changes underway!

jQuery UI version 1.7 including ThemeRoller V2 & UI CSS framework

The jQuery UI CSS Framework & ThemeRoller

jQuery UI 1.7 refactored widgets, simplified markup

The jQuery UI CSS Framework & ThemeRoller

jQuery UI CSS Framework Consistent system for theming all widgets

The jQuery UI CSS Framework & ThemeRoller

and

ThemeRoller v2.0 built to manipulate the new framework

The jQuery UI CSS Framework & ThemeRoller

Consistency across UI common classes for global control

The jQuery UI CSS Framework & ThemeRoller

New levers added header, highlight, error, overlay, shadow

The jQuery UI CSS Framework & ThemeRoller

More design flexibility colors + PNG textures = millions of combos

The jQuery UI CSS Framework & ThemeRoller

Flat color

Image texture w/ variable opacity

The jQuery UI CSS Framework & ThemeRoller

PNG Composite image

CSS3 rounded corners fewer requests, more flexible, less markup

The jQuery UI CSS Framework & ThemeRoller

Flexible CSS units ems and % allow proportional scaling

The jQuery UI CSS Framework & ThemeRoller

Icon sprites 173 free, themable icons, 1 request per color

The jQuery UI CSS Framework & ThemeRoller

New themes! 24 total: new and refreshed

The jQuery UI CSS Framework & ThemeRoller

Scott Jâ&#x20AC;&#x2122;s creation The jQuery UI CSS Framework & ThemeRoller

Google CDN hosting for all gallery themes!

The jQuery UI CSS Framework & ThemeRoller

http://www.jqueryui.com/development The jQuery UI CSS Framework & ThemeRoller

Permanent theme URLs bookmark, email, tweak

The jQuery UI CSS Framework & ThemeRoller

ui.theme.css

The jQuery UI CSS Framework & ThemeRoller

Downloader integration custom & gallery theme selector built-in

The jQuery UI CSS Framework & ThemeRoller

letâ&#x20AC;&#x2122;s see this thing already!

Using ThemeRoller

The jQuery UI CSS Framework & ThemeRoller

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

The jQuery UI CSS Framework & ThemeRoller

cool. so...

whatâ&#x20AC;&#x2122;s in the zip?

The jQuery UI CSS Framework & ThemeRoller

The birdâ&#x20AC;&#x2122;s eye view:

jQuery UI CSS Framework Using ThemeRoller as our guide

The jQuery UI CSS Framework & ThemeRoller

Clean separation of widget and theme styles

The jQuery UI CSS Framework & ThemeRoller

Class Breakdown: widget-specific

The jQuery UI CSS Framework & ThemeRoller

theme-specific

Widget-specific classes dimensions, visibility, positioning, margins, padding

The jQuery UI CSS Framework & ThemeRoller

Theme-specific classes text colors, backgrounds, fonts, icons

The jQuery UI CSS Framework & ThemeRoller

Global font settings apply with .ui-widget

The jQuery UI CSS Framework & ThemeRoller

7 primary theme “levers” Generic, semantic names

The jQuery UI CSS Framework & ThemeRoller

Containers .ui-widget-header .ui-widget-content

The jQuery UI CSS Framework & ThemeRoller

Clickable states ui-state-default ui-state-hover ui-state-active

The jQuery UI CSS Framework & ThemeRoller

System states ui-state-highlight

The jQuery UI CSS Framework & ThemeRoller

ui-state-error

Overlay elements ui-widget-overlay

The jQuery UI CSS Framework & ThemeRoller

ui-widget-shadow

theme levers define

color & texture only

The jQuery UI CSS Framework & ThemeRoller

Icon classes .ui-icon-arrowthick-1-n .ui-icon-trash .ui-icon-calendar etc, etc, etc The jQuery UI CSS Framework & ThemeRoller

Plus a few framework

goodies...

The jQuery UI CSS Framework & ThemeRoller

Interaction cues .ui-state-disabled .ui-priority-primary .ui-priority-secondary

The jQuery UI CSS Framework & ThemeRoller

Layout helpers .ui-helper-hidden .ui-helper-hidden-accessible .ui-helper-reset .ui-helper-clearfix 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

The jQuery UI CSS Framework & ThemeRoller

if IE really needs rounded corners *

Script them in! DD_roundies.addRule('.ui-corner-all', '8px');

* it doesnâ&#x20AC;&#x2122;t. The jQuery UI CSS Framework & ThemeRoller

the wormâ&#x20AC;&#x2122;s eye view:

jQuery UI CSS Framework

The jQuery UI CSS Framework & ThemeRoller

UI tabs deconstructed:

The jQuery UI CSS Framework & ThemeRoller

Tabs Markup

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> The jQuery UI CSS Framework & ThemeRoller

Add Widget-specific classes

The jQuery UI CSS Framework & ThemeRoller

Tabs HTML <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> The jQuery UI CSS Framework & ThemeRoller

ui.tabs.css .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;

The jQuery UI CSS Framework & ThemeRoller

Add theme-specific classes

The jQuery UI CSS Framework & ThemeRoller

Add ui-widget to parent sets theme font and size

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> The jQuery UI CSS Framework & ThemeRoller

The jQuery UI CSS Framework & ThemeRoller

Add container classes sets color, border, background,

The jQuery UI CSS Framework & ThemeRoller

Tabs HTML <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-widgetcontent">...</div> <div id="tabs-3" class="ui-tabs-panel ui-tabs-hide ui-widgetcontent">...</div> </div>

The jQuery UI CSS Framework & ThemeRoller

Add state classes clickable, hover, active, etc

The jQuery UI CSS Framework & ThemeRoller

Tabs HTML <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>

The jQuery UI CSS Framework & ThemeRoller

Smooth it out decide what corners to round

The jQuery UI CSS Framework & ThemeRoller

Tabs HTML <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-cornerall"> <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>

... The jQuery UI CSS Framework & ThemeRoller

Done.

The jQuery UI CSS Framework & ThemeRoller

Taking it further...

Multiple scoped themes

The jQuery UI CSS Framework & ThemeRoller

Link to UI theme import the theme CSS in the <head> <link type="text/css" href="css/redmond/jqueryui-1.7.2.custom.css" rel="stylesheet" />

The jQuery UI CSS Framework & ThemeRoller

Add two datepickers

JS:

$(â&#x20AC;&#x2DC;.datepickerâ&#x20AC;&#x2122;).datepicker();

The jQuery UI CSS Framework & ThemeRoller

Redmond themes all widgets

The jQuery UI CSS Framework & ThemeRoller

Let’s theme one differently wrap one in “.mysection” div for scoping <div class="datepicker"></div> <div class="mysection"> <div class="datepicker"></div> </div>

The jQuery UI CSS Framework & ThemeRoller

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

.mysection

mysection

The jQuery UI CSS Framework & ThemeRoller

Headaches saved ThemeRoller adds scope selector to every rule

The jQuery UI CSS Framework & ThemeRoller

Grab the theme folder paste into CSS/ alongside other theme

The jQuery UI CSS Framework & ThemeRoller

Link to new theme <link type="text/css" href="css/redmond/jqueryui-1.7.2.custom.css" rel="stylesheet" /> <link type="text/css" href="css/mysection/jqueryui-1.7.2.custom.css" rel="stylesheet" />

The jQuery UI CSS Framework & ThemeRoller

2 themes, 1 page.

The jQuery UI CSS Framework & ThemeRoller

How 3rd party plugins can be

ThemeRoller-ready

The jQuery UI CSS Framework & ThemeRoller

Yum. weâ&#x20AC;&#x2122;re eating our own dog food

The jQuery UI CSS Framework & ThemeRoller

Same theming tools for official jQuery UI & 3rd party plugins

The jQuery UI CSS Framework & ThemeRoller

Easy to use just use the framework classes

The jQuery UI CSS Framework & ThemeRoller

for example... letâ&#x20AC;&#x2122;s make a button!

The jQuery UI CSS Framework & ThemeRoller

Link to CSS import the UI theme into your page <link type="text/css" href="css/start/jqueryui-1.7.2.custom.css" rel="stylesheet" />

The jQuery UI CSS Framework & ThemeRoller

basic markup with some padding and cursor CSS too <button>Click me</button>

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

The jQuery UI CSS Framework & ThemeRoller

ui-widget class applies Theme font settings <button class=”ui-widget”>Click me</button>

The jQuery UI CSS Framework & ThemeRoller

clickable theme class adds themeâ&#x20AC;&#x2122;s look and feel <button class="ui-widget ui-state-default">Click me</button>

The jQuery UI CSS Framework & ThemeRoller

hover class replaces default scripted to make IE happy <button class="ui-widget ui-state-hover">Click me</button>

The jQuery UI CSS Framework & ThemeRoller

disabled class sets transparency to dim element * <button class="ui-widget ui-state-default uistate-disabled">Click me</button>

*combine with disabled=â&#x20AC;?disabledâ&#x20AC;? attr The jQuery UI CSS Framework & ThemeRoller

primary / secondary priority classes for emphasis <button class="ui-widget ui-state-default uipriority-primary">Click me</button> <button class="ui-widget ui-state-default uipriority-secondary">Cancel</button>

The jQuery UI CSS Framework & ThemeRoller

rounded corners classes for rounding 1 corner, a side, or all 4! <button class="ui-widget ui-state-default uicorner-all">Click me</button>

The jQuery UI CSS Framework & ThemeRoller

A few examples ThemeRoller-ready plugins

The jQuery UI CSS Framework & ThemeRoller

jQ Grid

http://www.trirand.com/jqgrid/jqgrid.html The jQuery UI CSS Framework & ThemeRoller

jQuery Finder

http://www.nicolas.rudas.info/jquery/finder/ The jQuery UI CSS Framework & ThemeRoller

Button & toolbar

http://www.filamentgroup.com/lab/ styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/ The jQuery UI CSS Framework & ThemeRoller

Date range picker

http://www.filamentgroup.com/lab/ date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework The jQuery UI CSS Framework & ThemeRoller

Select to slider

http://www.trirand.com/jqgrid/jqgrid.html The jQuery UI CSS Framework & ThemeRoller

jQuery sheet

http://jqueryplugins.weebly.com/jquerysheet.html The jQuery UI CSS Framework & ThemeRoller

Multi select

http://www.quasipartikel.at/multiselect/ The jQuery UI CSS Framework & ThemeRoller

iPod, flyout menus

http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus The jQuery UI CSS Framework & ThemeRoller

jPlayer

http://www.happyworm.com/jquery/jplayer/0.2.4/demo-07.htm The jQuery UI CSS Framework & ThemeRoller

jScrollPane

http://www.kelvinluck.com/assets/jquery/jScrollPaneUI/ The jQuery UI CSS Framework & ThemeRoller

Checkbox & radio

http://plugins.jquery.com/project/ui-checkbox The jQuery UI CSS Framework & ThemeRoller

Time select

http://pttimeselect.sourceforge.net/example/index.html The jQuery UI CSS Framework & ThemeRoller

ChessBomb

http://chessbomb.com/ The jQuery UI CSS Framework & ThemeRoller

Peeps

http://www.filamentgroup.com/examples/peeps/ The jQuery UI CSS Framework & ThemeRoller

Firefox bookmarklet pull ThemeRoller into any page

The jQuery UI CSS Framework & ThemeRoller

http://www.jqueryui.com/themeroller/developertool/ The jQuery UI CSS Framework & ThemeRoller

Theme switcher widget preview themes on any page on the web!

The jQuery UI CSS Framework & ThemeRoller

http://www.jqueryui.com/docs/Theming/ThemeSwitcher The jQuery UI CSS Framework & ThemeRoller

No Javascript required use framework classes on static markup too

The jQuery UI CSS Framework & ThemeRoller

Automatic consistency Enable developers to easily integrate your plugins!

The jQuery UI CSS Framework & ThemeRoller

Give it a try make it easier for your users

The jQuery UI CSS Framework & ThemeRoller

Weâ&#x20AC;&#x2122;ll pimp your stuff TR-ready plugins will be highly visible

The jQuery UI CSS Framework & ThemeRoller

lastly...

Moving forward new levers, css3, name changes, greater adoption

The jQuery UI CSS Framework & ThemeRoller

Thanks!

Questions?

The jQuery UI CSS Framework & ThemeRoller

the end...

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

The jQuery UI CSS Framework & ThemeRoller