Вы находитесь на странице: 1из 160

The jQuery UI CSS

Framework & ThemeRoller


An in-depth overview of theming and design in jQuery UI.

Todd Parker & Scott Jehl


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


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


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


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 Save to gallery Download (zip) Preview theme

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 limited
needs 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


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


The jQuery UI CSS Framework & ThemeRoller
Consistency across UI
common classes for global control

The jQuery UI CSS Framework & ThemeRoller


The jQuery UI CSS Framework & ThemeRoller
New levers added
header, 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
Flat Image texture w/
PNG Composite image
color variable opacity

The jQuery UI CSS Framework & ThemeRoller


CSS3 rounded corners
fewer requests, more flexible, less markup

The jQuery UI CSS Framework & ThemeRoller


The jQuery UI CSS Framework & ThemeRoller
Flexible CSS units
ems and % allow proportional scaling

The jQuery UI CSS Framework & ThemeRoller


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


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


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
The bird’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 theme-specific

The jQuery UI CSS Framework & ThemeRoller


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 ui-state-error

The jQuery UI CSS Framework & ThemeRoller


Overlay elements
ui-widget-overlay ui-widget-shadow

The jQuery UI CSS Framework & ThemeRoller


theme levers define

color & texture only

The jQuery UI CSS Framework & ThemeRoller


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’t.

The jQuery UI CSS Framework & ThemeRoller


the worm’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


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-widget-


content">...</div>

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


content">...</div>

</div>

The jQuery UI CSS Framework & ThemeRoller


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


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


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/jquery-


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

The jQuery UI CSS Framework & ThemeRoller


Add two datepickers

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

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

JS: $(‘.datepicker’).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/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" />

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


The jQuery UI CSS Framework & ThemeRoller
Yum.
we’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’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/jquery-


ui-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’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 ui-


state-disabled">Click me</button>

*combine with disabled=”disabled” attr

The jQuery UI CSS Framework & ThemeRoller


primary / secondary
priority classes for emphasis

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

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 ui-


corner-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’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

Вам также может понравиться