The jQuery UI CSS Framework & ThemeRollerAn in-depth overview of theming and design in jQuery UI.
Todd Parker & Scott Jehl
The jQuery UI CSS Framework & ThemeRoller
hello.
Todd Parker Scott Jehl
The jQuery UI CSS Framework & ThemeRoller
A Boston-based design firm specializing in complex web application design & development.
Official Sponsor and Design Team
The jQuery UI CSS Framework & ThemeRoller
Theming in jQuery UIhow we got to where we are today...
A brief history of
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
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
CSS + Photoshop + Firebug
skills required
The jQuery UI CSS Framework & ThemeRoller
Simpler theming(ThemeRoller v.1.0)
A step towards
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 simplefocus on the design, not editing CSS
The jQuery UI CSS Framework & ThemeRoller
tmi...
The jQuery UI CSS Framework & ThemeRoller
But not too simplepre-built themes are limited
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
A middle groundsimple, but powerful
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
The jQuery UI CSS Framework & ThemeRoller
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 limitedneeds more levers, more control
The jQuery UI CSS Framework & ThemeRoller
September ‘08
joins the jQuery UI team as sponsor and design lead
The jQuery UI CSS Framework & ThemeRoller
jQuery UI version 1.7including ThemeRoller V2 & UI CSS framework
Big changes underway!
The jQuery UI CSS Framework & ThemeRoller
jQuery UI 1.7refactored widgets, simplified markup
The jQuery UI CSS Framework & ThemeRoller
jQuery UI CSS FrameworkConsistent system for theming all widgets
The jQuery UI CSS Framework & ThemeRoller
and
ThemeRoller v2.0built to manipulate the new framework
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
Consistency across UIcommon classes for global control
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
New levers addedheader, highlight, error, overlay, shadow
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
More design flexibility colors + PNG textures = millions of combos
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
Image texture w/variable opacity
Flat color
PNG Composite image
The jQuery UI CSS Framework & ThemeRoller
CSS3 rounded cornersfewer requests, more flexible, less markup
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
Flexible CSS unitsems and % allow proportional scaling
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
Icon sprites173 free, themable icons, 1 request per color
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
New themes!24 total: new and refreshed
The jQuery UI CSS Framework & ThemeRoller
Scott J’s creation
The jQuery UI CSS Framework & ThemeRoller
Google CDN hostingfor all gallery themes!
The jQuery UI CSS Framework & ThemeRoller
http://www.jqueryui.com/development
The jQuery UI CSS Framework & ThemeRoller
Permanent theme URLsbookmark, email, tweak
The jQuery UI CSS Framework & ThemeRoller
ui.theme.css
The jQuery UI CSS Framework & ThemeRoller
Downloader integrationcustom & gallery theme selector built-in
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
Using ThemeRoller
let’s see this thing already!
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
The jQuery UI CSS Framework & ThemeRoller
cool. so...
what’s in the zip?
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
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 CSS Framework & ThemeRoller
Clean separationof widget and theme styles
The jQuery UI CSS Framework & ThemeRoller
Class Breakdown:
theme-specificwidget-specific
The jQuery UI CSS Framework & ThemeRoller
Widget-specific classesdimensions, visibility, positioning, margins, padding
The jQuery UI CSS Framework & ThemeRoller
Theme-specific classestext colors, backgrounds, fonts, icons
The jQuery UI CSS Framework & ThemeRoller
Global font settingsapply with .ui-widget
The jQuery UI CSS Framework & ThemeRoller
7 primary theme “levers”Generic, semantic names
The jQuery UI CSS Framework & ThemeRoller
.ui-widget-header
.ui-widget-content
Containers
The jQuery UI CSS Framework & ThemeRoller
ui-state-defaultui-state-hover
ui-state-active
Clickable states
The jQuery UI CSS Framework & ThemeRoller
ui-state-highlight ui-state-error
System states
The jQuery UI CSS Framework & ThemeRoller
ui-widget-overlay ui-widget-shadow
Overlay elements
The jQuery UI CSS Framework & ThemeRoller
theme levers define
color & texture only
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
.ui-icon-arrowthick-1-n
.ui-icon-trash
.ui-icon-calendaretc, etc, etc
Icon classes
The jQuery UI CSS Framework & ThemeRoller
Plus a few framework goodies...
The jQuery UI CSS Framework & ThemeRoller
.ui-state-disabled
.ui-priority-primary
.ui-priority-secondary
Interaction cues
The jQuery UI CSS Framework & ThemeRoller
.ui-helper-hidden
.ui-helper-hidden-accessible
.ui-helper-reset
.ui-helper-clearfix
Layout helpers
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’t.
The jQuery UI CSS Framework & ThemeRoller
jQuery UI CSS Framework
the worm’s eye view:
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
<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
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
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
Add theme-specific classes
The jQuery UI CSS Framework & ThemeRoller
Add ui-widget to parentsets 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 classessets color, border, background,
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
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
Add state classesclickable, hover, active, etc
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
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
Smooth it outdecide what corners to round
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>
...
The jQuery UI CSS Framework & ThemeRoller
Done.
The jQuery UI CSS Framework & ThemeRoller
Multiple scoped themes
Taking it further...
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>
The jQuery UI CSS Framework & ThemeRoller
JS: $(‘.datepicker’).datepicker();
Add two datepickers
<div class="datepicker"></div>
<div class="datepicker"></div>
The jQuery UI CSS Framework & ThemeRoller
Redmond themes all widgets
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
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 savedThemeRoller adds scope selector to every rule
The jQuery UI CSS Framework & ThemeRoller
Grab the theme folderpaste into CSS/ alongside other theme
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
The jQuery UI CSS Framework & ThemeRoller
2 themes, 1 page.
The jQuery UI CSS Framework & ThemeRoller
ThemeRoller-ready
How 3rd party plugins can be
The jQuery UI CSS Framework & ThemeRoller
The jQuery UI CSS Framework & ThemeRoller
Yum.we’re eating our own dog food
The jQuery UI CSS Framework & ThemeRoller
Same theming toolsfor official jQuery UI & 3rd party plugins
The jQuery UI CSS Framework & ThemeRoller
Easy to usejust use the framework classes
The jQuery UI CSS Framework & ThemeRoller
for example...let’s make a button!
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
The jQuery UI CSS Framework & ThemeRoller
<button>Click me</button>
basic markupwith some padding and cursor CSS too
button { padding:0.5em; cursor: pointer; }
The jQuery UI CSS Framework & ThemeRoller
<button class=”ui-widget”>Click me</button>
ui-widget classapplies Theme font settings
The jQuery UI CSS Framework & ThemeRoller
<button class="ui-widget ui-state-default">Click
me</button>
clickable theme classadds theme’s look and feel
The jQuery UI CSS Framework & ThemeRoller
<button class="ui-widget ui-state-hover">Click
me</button>
hover class replaces defaultscripted to make IE happy
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
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
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!
The jQuery UI CSS Framework & ThemeRoller
A few examplesThemeRoller-ready plugins
The jQuery UI CSS Framework & ThemeRoller
http://www.trirand.com/jqgrid/jqgrid.html
jQ Grid
The jQuery UI CSS Framework & ThemeRoller
http://www.nicolas.rudas.info/jquery/finder/
jQuery Finder
The jQuery UI CSS Framework & ThemeRoller
http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
Button & toolbar
The jQuery UI CSS Framework & ThemeRoller
http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework
Date range picker
The jQuery UI CSS Framework & ThemeRoller
http://www.trirand.com/jqgrid/jqgrid.html
Select to slider
The jQuery UI CSS Framework & ThemeRoller
http://jqueryplugins.weebly.com/jquerysheet.html
jQuery sheet
The jQuery UI CSS Framework & ThemeRoller
http://www.quasipartikel.at/multiselect/
Multi select
The jQuery UI CSS Framework & ThemeRoller
http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus
iPod, flyout menus
The jQuery UI CSS Framework & ThemeRoller
http://www.happyworm.com/jquery/jplayer/0.2.4/demo-07.htm
jPlayer
The jQuery UI CSS Framework & ThemeRoller
http://www.kelvinluck.com/assets/jquery/jScrollPaneUI/
jScrollPane
The jQuery UI CSS Framework & ThemeRoller
http://plugins.jquery.com/project/ui-checkbox
Checkbox & radio
The jQuery UI CSS Framework & ThemeRoller
http://pttimeselect.sourceforge.net/example/index.html
Time select
The jQuery UI CSS Framework & ThemeRoller
http://chessbomb.com/
ChessBomb
The jQuery UI CSS Framework & ThemeRoller
http://www.filamentgroup.com/examples/peeps/
Peeps
The jQuery UI CSS Framework & ThemeRoller
Firefox bookmarkletpull ThemeRoller into any page
The jQuery UI CSS Framework & ThemeRoller
http://www.jqueryui.com/themeroller/developertool/
The jQuery UI CSS Framework & ThemeRoller
Theme switcher widgetpreview 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 consistencyEnable developers to easily integrate your plugins!
The jQuery UI CSS Framework & ThemeRoller
Give it a trymake it easier for your users
The jQuery UI CSS Framework & ThemeRoller
We’ll pimp your stuffTR-ready plugins will be highly visible
The jQuery UI CSS Framework & ThemeRoller
Moving forwardnew levers, css3, name changes, greater adoption
lastly...
The jQuery UI CSS Framework & ThemeRoller
Questions?
Thanks!
The jQuery UI CSS Framework & ThemeRoller
Thanks Everyone!for more examples, visit filamentgroup.com/lab
the end...