The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller...

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

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

Official Sponsor and Design Team

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

A brief history of

how things

used to be...

hand-coded themes

CSS + Photoshop + Firebug

skills required

Simpler theming(ThemeRoller v.1.0)

A step towards

(Version 1.0)

A GUI for theming jQuery UI widgets

Keep it simplefocus on the design, not editing CSS

tmi...

But not too simplepre-built themes are limited

A middle groundsimple, but powerful

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

good. but not without few problems...

Not separated.Widget + Theme CSS intertwined

.ui-dialog-title {

background-color: ...;

margin: ...;

padding:...;

color: ...;

Not static.PHP in our CSS

.ui-dialog-title {

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

Not versioned.CSS lives on the web server.

theme.css.php

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

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

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

September ‘08

joins the jQuery UI team as sponsor and design lead

jQuery UI version 1.7including ThemeRoller V2 & UI CSS framework

Big changes underway!

jQuery UI 1.7refactored widgets, simplified markup

jQuery UI CSS FrameworkConsistent system for theming all widgets

ThemeRoller v2.0built to manipulate the new framework

Consistency across UIcommon classes for global control

New levers addedheader, highlight, error, overlay, shadow

More design flexibility colors + PNG textures = millions of combos

Image texture w/variable opacity

Flat color

PNG Composite image

CSS3 rounded cornersfewer requests, more flexible, less markup

Flexible CSS unitsems and % allow proportional scaling

Icon sprites173 free, themable icons, 1 request per color

New themes!24 total: new and refreshed

Scott J’s creation

Google CDN hostingfor all gallery themes!

http://www.jqueryui.com/development

Permanent theme URLsbookmark, email, tweak

ui.theme.css

Downloader integrationcustom & gallery theme selector built-in

Using ThemeRoller

let’s see this thing already!

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

cool. so...

what’s in the zip?

jQuery UI CSS Framework

The bird’s eye view:

Using ThemeRoller as our guide

Clean separationof widget and theme styles

Class Breakdown:

theme-specificwidget-specific

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

Theme-specific classestext colors, backgrounds, fonts, icons

Global font settingsapply with .ui-widget

7 primary theme “levers”Generic, semantic names

.ui-widget-header

.ui-widget-content

Containers

ui-state-defaultui-state-hover

ui-state-active

Clickable states

ui-state-highlight ui-state-error

System states

ui-widget-overlay ui-widget-shadow

Overlay elements

theme levers define

color & texture only

.ui-icon-arrowthick-1-n

.ui-icon-trash

.ui-icon-calendaretc, etc, etc

Icon classes

Plus a few framework goodies...

.ui-state-disabled

.ui-priority-primary

.ui-priority-secondary

Interaction cues

.ui-helper-hidden

.ui-helper-hidden-accessible

.ui-helper-reset

.ui-helper-clearfix

Layout helpers

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

if IE really needs rounded corners *

Script them in!

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

* it doesn’t.

jQuery UI CSS Framework

the worm’s eye view:

UI tabs deconstructed:

Tabs Markup

Tabs HTML<div id=”tabs”>

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

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

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

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

</div>

Add Widget-specific classes

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

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

</div>

Tabs HTML

.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

Add theme-specific classes

Add ui-widget to parentsets theme font and size

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

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

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

</div>

Add container classessets color, border, background,

<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

Add state classesclickable, hover, active, etc

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

</div>

Tabs HTML

Smooth it outdecide what corners to round

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

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

Multiple scoped themes

Taking it further...

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

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

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

Add two datepickers

Redmond themes all widgets

</div>

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

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

.mysection

mysection

Headaches savedThemeRoller adds scope selector to every rule

Grab the theme folderpaste into CSS/ alongside other theme

Link to new theme

2 themes, 1 page.

ThemeRoller-ready

How 3rd party plugins can be

Yum.we’re eating our own dog food

Same theming toolsfor official jQuery UI & 3rd party plugins

Easy to usejust use the framework classes

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

Link to CSSimport the UI theme into your page

<button>Click me</button>

basic markupwith some padding and cursor CSS too

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

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

ui-widget classapplies Theme font settings

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

me</button>

clickable theme classadds theme’s look and feel

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

me</button>

hover class replaces defaultscripted to make IE happy

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

state-disabled">Click me</button>

disabled classsets transparency to dim element *

*combine with disabled=”disabled” attr

priority-primary">Click me</button>

priority-secondary">Cancel</button>

primary / secondarypriority classes for emphasis

corner-all">Click me</button>

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

A few examplesThemeRoller-ready plugins

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

jQ Grid

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

jQuery Finder

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

Button & toolbar

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

Date range picker

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

Select to slider

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

jQuery sheet

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

Multi select

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

iPod, flyout menus

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

jPlayer

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

jScrollPane

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

Checkbox & radio

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

Time select

http://chessbomb.com/

ChessBomb

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

Firefox bookmarkletpull ThemeRoller into any page

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

Theme switcher widgetpreview themes on any page on the web!

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

No Javascript required use framework classes on static markup too

Automatic consistencyEnable developers to easily integrate your plugins!

Give it a trymake it easier for your users

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

Moving forwardnew levers, css3, name changes, greater adoption

lastly...

Questions?

Thanks!

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

the end...

The jQuery UI CSS Framework & ThemeRoller · The jQuery UI CSS Framework & ThemeRoller...

Documents

jQuery UI Widget Factory

jQuery UI 1.10:The User Interface Library for jQuery · jQuery UI 1.10: The User Interface Library for jQuery . Modern web application user interface design requires rapid development

JQUERY UI - caetano.eng.br · Introdução •O JQuery UI é organizado em 4 tipos de elementos –Core: elementos fundamentais para uso do UI –Interações: adicionam comportamentos

21.- JQuery UI Widgets

Javascript jQuery jQuery Ui

Writing Reusable Web Components with jQuery and jQuery UI

State of jQuery UI - Nemikornemikor.com/presentations/jQuery-UI-Keynote-2012.pdf · • jQuery UI 1.0 - September 2007 • jQuery UI 1.5 - June 2008 ... • Do all the things •

Mastering jQuery UI - Sample Chapter

ICS 665 Jesse Abdul. jQuery UI Overview jQuery UI javascript library Includes all UI component functionality jQuery UI CSS framework Includes standard

jQuery - sanal.mobisanal.mobi/img/userfiles/files/Jquery.pdf · JQuery UI (JQuery Kullanıcı Arayüzü) JQuery etkileyici görsel bileşenler ve etkiler yapmak amacıyla oluşturulmuştur

jQuery · 2013-07-09 · JQuery UI (JQuery Kullanıcı Arayüzü) JQuery etkileyici görsel bileşenler ve etkiler yapmak amacıyla oluşturulmuştur. Bunların çoğu ana Jquery

jQuery UI (Effect)

The jQuery UI CSS Framework & ThemeRoller - Filament Group

Rich Interfaces with jQuery UI - courses.moreservlets.comcourses.moreservlets.com/Course-Materials/pdf/ajax/jQuery-UI-2... · – jQuery and jQuery UI loaded as in previous lecture

jQuery Tools UI Library - Packt Publishing | Technology ... · jQuery Tools UI Library Alex Libby ... examples for using jQuery Tools within the confines of a content management system

jQuery, jQuery UI et jQuery Mobileromagny13.com/.../04/jQuery-jQuery-UI-et-jQuery-Mobile.pdf3 3 4. PAGE EVENTS AND ORIENTATIONS..... 61 Pour utiliser jQuery/jQuery UI/JQuery Mobile

jQuery 1.3 UI eghost Julio2009

Introdução às Bibliotecas jQuery/ jQuery UI

jQuery, jQuery UI et jQuery Mobileromagny13.com/wp-content/uploads/2015/04/jQuery-jQuery...Pour utiliser jQuery/jQuery UI/JQuery Mobile : Télécharger les sources sur le site ou packages

jQuery UI Part 2: Dialog Boxes - Core Servletscourses.coreservlets.com/.../pdf/javascript/jQuery-UI-2-Dialogs.pdf · jQuery UI Part 2: Dialog Boxes For additional materials, please