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 & ThemeRollerAn in-depth overview of theming and design in jQuery UI.
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
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
.ui-dialog-title {
background-color: ...;
margin: ...;
padding:...;
color: ...;
}
The jQuery UI CSS Framework & ThemeRoller
.ui-dialog-title {
background-color: <?=$defaultBGColor; ?>;
}
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
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 CSS FrameworkConsistent system for theming all widgets
The jQuery UI CSS Framework & ThemeRoller
More design flexibility colors + PNG textures = millions of combos
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
http://www.jqueryui.com/development
The jQuery UI CSS Framework & ThemeRoller
Downloader integrationcustom & gallery theme selector built-in
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
jQuery UI CSS Framework
The bird’s eye view:
Using ThemeRoller as our guide
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
ui-state-defaultui-state-hover
ui-state-active
Clickable states
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
.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
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
<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
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
<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
<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
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
<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
<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
Same theming toolsfor official jQuery UI & 3rd party plugins
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
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
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
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...