25880528 the jquery ui css framework the me roller

8/8/2019 25880528 the jQuery UI CSS Framework The Me Roller

1/160

The jQuery UI CSSFramework & ThemeRollerAn in-depth overview of theming and design in jQuery UI.

Todd Parker & Scott Jehl


2/160

The jQuery UI CSS Framework & ThemeRoller

hello.Todd Parker Scott Jehl


3/160


A Boston-based design firm specializing in

complex web application design & development.

Official Sponsor and Design Team


4/160


Theming in jQuery UI

how we got to where we are today...

A brief history of


5/160


how things

used to be...


6/160


hand-coded

themes


7/160



8/160



9/160


CSS + Photoshop + Firebug

skills required


10/160


Simpler theming

(ThemeRoller v.1.0)

A step towards


11/160


(Version 1.0)


12/160


A GUI for

theming jQuery UI widgets


13/160


Keep it simple

focus on the design, not editing CSS


14/160


tmi...


15/160


But not too simple

pre-built themes are limited


16/160



17/160


A middle ground

simple, but powerful


18/160



19/160


good. but not without few problems...


20/160


Not separated.Widget + Theme CSS intertwined


21/160


.ui-dialog-title {

background-color: ...;

margin: ...;

padding:...;

color: ...;

}


22/160


Not static.PHP in our CSS


23/160


.ui-dialog-title {

background-color: ;

}


24/160


Not versioned.

CSS lives on the web server.


25/160


theme.css.php


26/160


Not easily integrated.

Where do I download widgets AND themes?


27/160


Not well supported.

Do we support Flora or ThemeRoller? Both?


28/160


...and a bit limited

needs more levers, more control


29/160


September 08

joins the jQuery UI team as

sponsor and design lead


30/160


jQuery UI version 1.7

including ThemeRoller V2 & UI CSS framework

Big changes underway!


31/160


jQuery UI 1.7

refactored widgets, simplified markup


32/160


jQuery UI CSS Framework

Consistent system for theming all widgets


33/160


and

ThemeRoller v2.0built to manipulate the new framework


34/160



35/160


Consistency across UI

common classes for global control


36/160



37/160


New levers added

header, highlight, error, overlay, shadow


38/160



39/160


More design flexibility

colors + PNG textures = millions of combos


40/160



41/160


Image texture w/

variable opacity

Flat

colorPNG Composite image


42/160


CSS3 rounded cornersfewer requests, more flexible, less markup


43/160



44/160


Flexible CSS unitsems and % allow proportional scaling


45/160



46/160


Icon sprites173 free, themable icons, 1 request per color


47/160



48/160


New themes!24 total: new and refreshed


49/160


Scott Js creation


50/160


Google CDN hostingfor all gallery themes!


51/160


http://www.jqueryui.com/development
http://www.jqueryui.com/developmenthttp://www.jqueryui.com/development


52/160


Permanent theme URLsbookmark, email, tweak


53/160


ui.theme.css


54/160


Downloader integrationcustom & gallery theme selector built-in


55/160



56/160


Using ThemeRoller

lets see this thing already!


57/160

http://themeroller.com/http://themeroller.com/


58/160



59/160


cool. so...

whats in the zip?


60/160



61/160



62/160



63/160



64/160



65/160



66/160



67/160



68/160



69/160



70/160



71/160



The birds eye view:

Using ThemeRoller as our guide


72/160


Clean separationof widget and theme styles


73/160


Class Breakdown:

theme-specificwidget-specific


74/160


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


75/160


Theme-specific classestext colors, backgrounds, fonts, icons

Gl b l f i


76/160


Global font settingsapply with .ui-widget

7 i h l


77/160


7 primary theme leversGeneric, semantic names


78/160


.ui-widget-header

.ui-widget-content

Containers


79/160


ui-state-default

ui-state-hover

ui-state-active

Clickable states


80/160


ui-state-highlight ui-state-error

System states


81/160


ui-widget-overlay ui-widget-shadow

Overlay elements


82/160


theme levers define

color & texture only


83/160



84/160


.ui-icon-arrowthick-1-n

.ui-icon-trash

.ui-icon-calendar

etc, etc, etc

Icon classes


85/160


Plus a few framework

goodies...


86/160


.ui-state-disabled

.ui-priority-primary

.ui-priority-secondary

Interaction cues


87/160


.ui-helper-hidden

.ui-helper-hidden-accessible

.ui-helper-reset

.ui-helper-clearfix

Layout helpers

A d R d d C !


88/160


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 *


89/160


if IE reallyneeds rounded corners

Script them in!

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

*it doesnt.


90/160



the worms eye view:


91/160


UI tabs deconstructed:


92/160


Tabs Markup

Tabs HTML


93/160


Tabs HTML

First

Second

Third

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.


94/160


Add Widget-specific classes

Tabs HTML


95/160


First

Second

Third

Lorem ipsum dolor.

...

...

Tabs HTML

ui tabs css


96/160


.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


97/160



98/160


Add theme-specific classes


99/160


Add ui-widget to parentsets theme font and size

Tabs HTML


100/160


Tabs HTML

First

Second

Third

Lorem ipsum dolor.

...

...


101/160



102/160


Add container classessets color, border, background,

Tabs HTML


103/160


...

...

...

...

Tabs HTML


104/160



105/160


Add state classesclickable, hover, active, etc

Tabs HTML


106/160


First

Second

Third

...

Tabs HTML


107/160



108/160


Smooth it outdecide what corners to round

Tabs HTML


109/160


Tabs HTML

First

Second

Third

...

Done


110/160


Done.


111/160


Multiple scoped themes

Taking it further...

Link to UI theme


112/160


import the theme CSS in the

Add two datepickers


113/160


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

Redmond themes all widgets


114/160


Lets theme one differently


115/160


wrap one in .mysection div for scoping

Back to the download builder!


116/160


add theme scoping, get zip

.mysection

mysection

Headaches saved


117/160


ThemeRoller adds scope selector to every rule

Grab the theme folder


118/160


paste into CSS/ alongside other theme

Link to new theme


119/160


2 themes, 1 page.


120/160



121/160


ThemeRoller-ready

How 3rd party plugins can be


122/160



123/160


Yum.were eating our own dog food


124/160


Same theming toolsfor official jQuery UI & 3rd party plugins


125/160


Easy to usejust use the framework classes


126/160


for example...lets make a button!

Link to CSS


127/160


import the UI theme into your page

basic markup


128/160


Click me

with some padding and cursor CSS too

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

ui-widget class


129/160


Click me

applies Theme font settings

clickable theme class


130/160


Click

me

adds themes look and feel

hover class replaces default


131/160


Click

me

scripted to make IE happy

disabled class


132/160


Click me

sets transparency to dim element *

*combine with disabled=disabled attr

primary / secondaryf


133/160


Click me

Cancel

priority classes for emphasis

rounded cornersl f di id ll


134/160


Click me

classes for rounding 1 corner, a side, or all 4!


135/160


A few examplesThemeRoller-ready plugins

jQ Grid


136/160


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

jQ Grid

jQuery Finder
http://www.trirand.com/jqgrid/jqgrid.htmlhttp://www.trirand.com/jqgrid/jqgrid.html


137/160


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

jQuery Finder

Button & toolbar
http://www.nicolas.rudas.info/jquery/finder/http://www.nicolas.rudas.info/jquery/finder/http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/


138/160


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

styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

Button & toolbar

Date range picker
http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework


139/160


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

date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework

Date range picker

Select to slider
http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_frameworkhttp://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_frameworkhttp://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_frameworkhttp://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_frameworkhttp://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework


140/160


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

Select to slider

jQuery sheet
http://www.trirand.com/jqgrid/jqgrid.htmlhttp://www.trirand.com/jqgrid/jqgrid.html


141/160


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

jQuery sheet

Multi select
http://jqueryplugins.weebly.com/jquerysheet.htmlhttp://jqueryplugins.weebly.com/jquerysheet.html


142/160


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

Multi select

iPod flyout menus
http://www.quasipartikel.at/multiselect/http://www.quasipartikel.at/multiselect/


143/160


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

iPod, flyout menus

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


144/160


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

jPlayer

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


145/160


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

jScrollPane

Checkbox & radio
http://www.kelvinluck.com/assets/jquery/jScrollPaneUI/http://www.kelvinluck.com/assets/jquery/jScrollPaneUI/


146/160


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

Checkbox & radio

Time select
http://plugins.jquery.com/project/ui-checkboxhttp://plugins.jquery.com/project/ui-checkbox


147/160


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

Time select

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


148/160


http://chessbomb.com/

ChessBomb

Peeps
http://chessbomb.com/http://chessbomb.com/


149/160


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

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


150/160


Firefox bookmarkletpull ThemeRoller into any page


151/160


http://www.jqueryui.com/themeroller/developertool/
http://www.jqueryui.com/docs/Theming/ThemeSwitcherhttp://www.jqueryui.com/docs/Theming/ThemeSwitcher


152/160


Theme switcher widgetpreview themes on any page on the web!


153/160


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


154/160


No Javascript requireduse framework classes on static markup too


155/160


Automatic consistencyEnable developers to easily integrate your plugins!


156/160


Give it a trymake it easier for your users


157/160


Well pimp your stuffTR-ready plugins will be highly visible


158/160


Moving forward

new levers, css3, name changes, greater adoption

lastly...


159/160


Questions?

Thanks!


160/160

Thanks Everyone!

for more examples, visit filamentgroup.com/lab

the end...

25880528 the jquery ui css framework the me roller

Documents