diff --git a/order.yml b/order.yml
index 564a1e46..6b354d2e 100644
--- a/order.yml
+++ b/order.yml
@@ -92,6 +92,16 @@
- about-deferreds
- jquery-deferreds
- examples
+- jquery-ui:
+ - getting-started
+ - how-jquery-ui-works
+ - theming:
+ - themeroller
+ - api
+ - write-a-theme
+ - widget-factory:
+ - why-use-the-widget-factory
+ - how-to-use-the-widget-factory
- jquery-mobile:
- getting-started
- theme-roller
diff --git a/page/jquery-ui.md b/page/jquery-ui.md
new file mode 100644
index 00000000..79c03ea8
--- /dev/null
+++ b/page/jquery-ui.md
@@ -0,0 +1,11 @@
+---
+title: jQuery UI
+customFields:
+ -
+ key: "icon"
+ value: "magnet"
+---
+
+[jQuery UI](http://jqueryui.com) is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
+
+jQuery UI contains many widgets that maintain state and therefore have a slightly different usage pattern than typical jQuery plugins. All of jQuery UI's widgets use the same patterns, so if you learn how to use one, then you'll know how to use all of them.
diff --git a/page/jquery-ui/getting-started.md b/page/jquery-ui/getting-started.md
new file mode 100644
index 00000000..b3fe932d
--- /dev/null
+++ b/page/jquery-ui/getting-started.md
@@ -0,0 +1,114 @@
+---
+title: Getting Started with jQuery UI
+level: beginner
+---
+
+### What is jQuery UI?
+jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library that you can use to build highly interactive web applications. This guide is designed to get you up to speed on how jQuery UI works. Follow along below to get started.
+
+### Start by checking out the demos
+To get a feel for what jQuery UI is capable of, check out the [UI Demos](http://jqueryui.com/demos/).
+
+In the demos section, the navigation lists all of the interactions and widgets that jQuery UI offers. Choose an interaction or widget and you'll be presented with several demo configurations for that particular plugin. Each demo allows you to view source code, change themes, and the URL can always be bookmarked. For example, check out the [accordion widget's fill space demo page](http://jqueryui.com/accordion/#fillspace).
+
+### Build your custom jQuery UI download
+Once you have a basic understanding of what jQuery UI is and what it does, you're ready to try it out! It's time to head over to the [Download Builder](http://jqueryui.com/download/) on the jQuery UI website to download a copy of jQuery UI. jQuery UI's download builder allows you to choose the components you would like to download and get a custom version of the library for your project. There are 3 easy steps to building your custom jQuery UI download:
+
+#### Step 1: Choose which components you need
+The main column of the Download Builder lists all of the javascript components in jQuery UI categorized into groups: core, interations, widgets, and effects. Some components in jQuery UI depend on other components. Just check the boxes for the widgets you'd like to download and any required dependencies will automatically be checked as well. The components you select will all be combined into a custom jQuery UI javascript file.
+
+
+
+#### Step 2: Select a theme (or roll your own custom theme)
+In the right column of the download builder, you'll find a field where you can choose from a number of pre-designed themes for your jQuery UI widgets.
+You can either choose from the various themes we provide, or you can design your own custom theme using ThemeRoller (more on that later).
+
+**Advanced Theme Settings:** *The theme section of the download builder also offers some advanced configuration settings for your theme. If you plan to use multiple themes on a single page, these fields will come in handy. If you plan to only use one theme on a page, you can skip these settings entirely.*
+
+#### Step 3: Choose a version of jQuery UI
+The last step in the download builder is to select a version number. This is a very important step because jQuery UI versions are designed to work with specific versions of jQuery. The current versions are:
+
+* jQuery UI 1.10.0 - Requires jQuery 1.6+
+* jQuery UI 1.9.2 - Requires jQuery 1.6+
+
+#### Click Download!
+You're finished with the download builder! Click the download button and you'll get a customized zip file containing everything you selected.
+
+### After downloading: Intro to using jQuery UI
+Once you've downloaded jQuery UI, you'll get a zip containing the following files:
+
+* `/css/`
+* `/development-bundle/`
+* `/js/`
+* `index.html`
+
+### Basic overview: using jQuery UI on a web page
+Open up index.html in a text editor and you'll see that it links to a few dependencies: your theme, jQuery, and jQuery UI. Generally, you'll need to include these 3 files on any page to use jQuery UI widgets and interactions:
+
+
+```html
+
+
+
+```
+
+Once you've included the necessary files, you can add some jQuery widgets to your page. For example, to make a datepicker widget, you'll add a text input element to your page and then call .datepicker(); on it. Like this:
+
+**HTML:**
+```html
+
+```
+
+**JS:**
+```javascript
+$('#date').datepicker();
+```
+
+
+
+#### That's it!
+For demos of all of the jQuery UI widgets and interactions. Check out the demos section of the jQuery UI website.
+
+### Customizing jQuery UI to your needs
+jQuery UI allows you to customize it in several ways. You've already seen how the download builder allows you to customize your copy of jQuery UI to include only the portions you want, but there are additional ways to customize that code to your implementation.
+
+### jQuery UI basics: using options
+Each plugin in jQuery UI has a default configuration which is catered to the most basic and common use case. But if you want a plugin to behave different from its default configuration, you can override each of its default settings using "options". Options are a set of properties passed into a jQuery UI widget as an argument. For example, the slider widget has an option for orientation, which allows you to specify whether the slider should be horizontal or vertical. To set this option for a slider on your page, you just pass it in as an argument, like this:
+
+
+```javascript
+$('#mySliderDiv').slider({
+ orientation: 'vertical'
+});
+```
+
+You can pass as many different options as you'd like by following each one with a comma (except the last one):
+
+```javascript
+$('#mySliderDiv').slider({
+ orientation: 'vertical',
+ min: 0,
+ max: 150,
+ value: 50
+});
+```
+
+Just remember to surround your options with curly brackets `{ }`, and you're well on your way. Of course, the example above barely touches on what you can do with jQuery UI. To get detailed information on the entire set of jQuery UI widgets, visit the [jQuery UI documentation](http://jqueryui.com/demos/).
+
+### Visual customization: Designing a jQuery UI theme
+If you want to design your own theme, jQuery UI has a very slick application for just that purpose. It's called ThemeRoller, and you can always get to it by either clicking the "Themes" link in the jQuery UI navigation, or simply going to [jQuery UI Themeroller](http://jqueryui.com/themeroller/).
+
+ThemeRoller provides a custom interface for designing all of the elements used by jQuery UI widgets. As you tweak the "levers" in the left column, the widgets on the right will reflect your design. The Gallery tab of ThemeRoller offers a number of pre-designed themes (the same ones offered by the download builder) that you can tweak or download as they are.
+
+
+
+### Downloading your theme
+When you click the "Download theme" button in ThemeRoller, you'll be directed to the Download Builder and your custom theme will be auto-selected in the Theme dropdown menu. You can configure your download package further from there. Once you download, you'll see that the example.html page is styled using your custom theme.
+
+**Quick tip:** *If you ever need to edit your theme, simply open the CSS file and find on line 43 where it says "To view and modify this theme, visit ..." That url will open the theme in ThemeRoller for editing.*
+
+### Support: Where can I get help?
+JQuery UI user and developer resources are kept up-to-date at the [Support Center](http://jqueryui.com/support).
+
+### Developers Wanted!
+Want to join the jQuery UI team? We'd love your help! Visit the UI [Development Center](http://jqueryui.com/development) for details on how to get involved.
diff --git a/page/jquery-ui/how-jquery-ui-works.md b/page/jquery-ui/how-jquery-ui-works.md
new file mode 100644
index 00000000..41e5916b
--- /dev/null
+++ b/page/jquery-ui/how-jquery-ui-works.md
@@ -0,0 +1,164 @@
+---
+title: How jQuery UI Works
+level: Beginner
+---
+
+jQuery UI contains many widgets that maintain [state](http://en.wikipedia.org/wiki/State_%28computer_science%29) and therefore may have a slightly different usage pattern than typical jQuery plugins you are already used to. While the initialization is the same as most jQuery plugins, jQuery UI's widgets are built on top of the [Widget Factory](/jquery-ui/widget-factory/) which provides the same general API to all of them. So if you learn how to use one, then you'll know how to use all of them! This document will walk you through the common functionality, using the [progressbar](http://jqueryui.com/progressbar/) widget for the code examples.
+
+## Initialization
+
+In order to track the state of the widget, we must introduce a full life cycle for the widget.
+The life cycle starts when the widget is initalized.
+To initialize a widget, we simply call the plugin on one or more elements.
+
+```
+ $( "#elem" ).progressbar();
+```
+
+This will initialize each element in the jQuery object, in this case the element with an id of "elem".
+Because we called the `progressbar()` method with no parameters, the widget is initialized with its default options.
+We can pass a set of options during initialization in order to override the default options.
+
+```
+ $( "#elem" ).progressbar({ value: 20 });
+```
+
+We can pass as many or as few options as we want during initialization.
+Any options that we don't pass will just use their default values.
+
+The options are part of the widget's state,
+so we can set options after initialization as well.
+We'll see this later with the `option` method.
+
+## Methods
+
+Now that the widget is initialized, we can query its state or perform actions on the widget.
+All actions after initialization take the form of a method call.
+To call a method on a widget, we pass the name of the method to the jQuery plugin.
+For example, to call the `value` method on our progressbar widget, we would use:
+
+```
+ $( "#elem" ).progressbar( "value" );
+```
+
+If the method accepts parameters, we can pass them after the method name.
+For example, to pass the parameter `40` to the `value` method, we can use:
+
+```
+ $( "#elem" ).progressbar( "value", 40 );
+```
+
+Just like other methods in jQuery, most widget methods return the jQuery object for chaining.
+
+```
+ $( "#elem" )
+ .progressbar( "value", 90 )
+ .addClass( "almost-done" );
+```
+
+### Common Methods
+
+Each widget will have its own set of methods based on the functionality that the widget provides.
+However, there are a few methods that exist on all widgets.
+
+#### option
+
+As we mentioned earlier, we can change options after initialization through the `option` method.
+For example, we can change the progressbar's value to 30 by calling the `option` method.
+
+```
+ $( "#elem" ).progressbar( "option", "value", 30 );
+```
+
+Note that this is different from the previous example where we were calling the `value` method.
+In this example, we're calling the `option` method and saying that we want to change the value option to 30.
+
+We can also get the current value for an option.
+
+```
+ $( "#elem" ).progressbar( "option", "value" );
+```
+
+In addition, we can update multiple options at once by passing an object to the `option` method.
+
+```
+ $( "#elem" ).progressbar( "option", {
+ value: 100,
+ disabled: true
+ });
+```
+
+You may have noticed that the `option` method has the same signature as getters and setters in jQuery core, such as `.css()` and `.attr()`.
+The only difference is that you have to pass the string "option" as the first parameter.
+
+#### disable
+
+As you might guess, the `disable` method disables the widget.
+In the case of progressbar, this changes the styling to make the progressbar look disabled.
+
+```
+ $( "#elem" ).progressbar( "disable" );
+```
+
+Calling the `disable` method is equivalent to setting the `disabled` option to `true`.
+
+#### enable
+
+The `enable` method is the opposite of the `disable` method.
+
+```
+ $( "#elem" ).progressbar( "enable" );
+```
+
+Calling the `enable` method is equivalent to setting the `disabled` option to `false`.
+
+#### destroy
+
+If you no longer need the widget, you can destroy it and return back to the original markup.
+This ends the life cycle of the widget.
+
+```
+ $( "#elem" ).progressbar( "destroy" );
+```
+
+Once you destroy a widget, you can no longer call any methods on it unless you initialize the widget again.
+If you're removing the element, either directly via `.remove()` or by modifying an ancestor with `.html()` or `.empty()`,
+the widget will automatically destroy itself.
+
+#### widget
+
+Some widgets generate wrapper elements, or elements disconnected from the original element.
+In these cases, the `widget` method will return the generated element.
+In cases like the progressbar, where there is no generated wrapper, the `widget` method returns the original element.
+
+```
+ $( "#elem" ).progressbar( "widget" );
+```
+
+## Events
+
+All widgets have events associated with their various behaviors to notify you when the state is changing.
+For most widgets, when the events are triggered, the names are prefixed with the widget name.
+For example, we can bind to progressbar's change event which is triggered whenever the value changes.
+
+```
+ $( "#elem" ).bind( "progressbarchange", function() {
+ alert( "The value has changed!" );
+ });
+```
+
+Each event has a corresponding callback, which is exposed as an option.
+We can hook into progressbar's `change` callback instead of binding to the `progressbarchange` event, if we wanted to.
+
+```
+ $( "#elem" ).progressbar({
+ change: function() {
+ alert( "The value has changed!" );
+ }
+ });
+```
+
+### Common Events
+
+While most events will be widget specific, all widgets have a `create` event.
+This event will be triggered immediately after the widget is created.
diff --git a/page/jquery-ui/theming.md b/page/jquery-ui/theming.md
new file mode 100644
index 00000000..6203fbef
--- /dev/null
+++ b/page/jquery-ui/theming.md
@@ -0,0 +1,34 @@
+---
+title: Theming jQuery UI
+level: intermediate
+---
+
+All jQuery UI plugins are designed to allow a developer to seamlessly integrate UI widgets into the look and feel of their site or application. Each plugin is styled with CSS and contains two layers of style information: standard [jQuery UI CSS Framework](/jquery-ui/theming/api/) styles and plugin-specific styles.
+
+The jQuery UI CSS Framework provide semantic presentation classes to indicate the role of an element within a widget such as a header, content area, or clickable region. These are applied consistently across all widgets so a clickable tab, accordian or button will all have the same `ui-state-default` class applied to indicate that it is clickable. When a user mouses over one of these elements, this class is changed to `ui-state-hover`, then `ui-state-active` when selected. This level of class consistency makes it easy to ensure that all elements with a similar role or interaction state will look the same across all widgets.
+
+The CSS Framework styles are encapsulated in a single file called ui.theme.css and this is the file modified by the [ThemeRoller](/jquery-ui/theming/themeroller) application. Framework styles only include attributes that affect the look and feel (primarily color, background images and icons) so these are 'safe' styles that will not affect functionality of individual plugins. This separation means that a developer can create a custom look and feel by modifying the colors and images in theme.css file and know that as future plugins or bug fixes become available, these should work with the theme without modification.
+
+Since the framework styles only cover look and feel, plugin specific stylesheets are included that contain all the additional structural style rules required to make the widget functional, such as dimensions, padding, margins, positioning and floats. Stylesheets for each plugin are located in the themes/base folder of the download and are named to match the plugin such as "jquery.ui.accordion.css". These styles must be carefully edited because they work in conjunction with the scripting and provide overrides of framework styles as needed.
+
+We encourage all developers creating jQuery plugins to leverage the jQuery UI CSS Framework because it will make it much easier for end users to theme and use your plugin.
+
+### Getting started
+
+There are three general approaches to theming jQuery UI plugins:
+
+* **Download a ThemeRoller theme**: The easiest way to build a theme is to use the [Themeroller](/jquery-ui/theming/themeroller) to generate and download a theme. This app will create a new `ui.theme.css` file and and images directory containing all necessary background images and icon sprites which can simply be dropped into your project. This approach will be the easiest to create and maintain but limits customization to the options provided in ThemeRoller.
+* **Modify the CSS files**: To get a bit more control over the look and feel, you may choose to start with the default theme (Smoothness) or a ThemeRoller-generated theme and then adjust the `ui.theme.css` file or any of the individual plugin stylesheets. For example, you could easily tweak the corner radius for all buttons to be different than the rest of the UI components or change the path for the icon sprite to use a custom set. With a bit of style scoping, you can even use multiple themes together in a single UI. To keep maintenance simple, restricting changes to just the `ui.theme.css` file and images is recommended.
+* **Write completely custom CSS**: For the greatest amount of control, the CSS for each plugin can be written from scratch without using the framework classes or plugin-specific stylesheet. This may be necessary if the desired look and feel can't be achieved by modifying the CSS or if highly customized markup is used. This approach requires deep expertise in CSS and will require manual updates for future plugins.
+
+### Using ThemeRoller and Themes
+
+
+* [ThemeRoller application](http://jqueryui.com/themeroller/)
+* [ThemeRoller documentation](/jquery-ui/theming/themeroller) - How to use the ThemeRoller application
+
+### jQuery UI CSS Framework & Custom themes
+
+
+* [jQuery UI CSS Framework documentation](/jquery-ui/theming/api/) - Explore the full class API and icon set
+* [How to create custom themes](/jquery-ui/theming/custom-themes) - Tutorial for creating a theme from scratch
diff --git a/page/jquery-ui/theming/api.md b/page/jquery-ui/theming/api.md
new file mode 100644
index 00000000..06fc5be8
--- /dev/null
+++ b/page/jquery-ui/theming/api.md
@@ -0,0 +1,78 @@
+---
+title: jQuery UI CSS Framework API
+level: intermediate
+---
+
+[Back to jQuery UI Theming](/jquery-ui/theming)
+
+### The jQuery UI CSS Framework
+
+jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.
+
+### Framework Classes
+
+The following CSS classes are split between ui.core.css and ui.theme.css, depending on whether styles are fixed and structural, or themeable (colors, fonts, backgrounds, etc) respectively. These classes are designed to be applied to User Interface elements to achieve visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller.
+
+### Layout Helpers
+
+* `.ui-helper-hidden`: Applies display: none to elements.
+* `.ui-helper-hidden-accessible`: Applies accessible hiding to elements (via abs positioning off the page)
+* `.ui-helper-reset`: A basic style reset for UI elements. Resets things such as padding, margins, text-decoration, list-style, etc.
+* `.ui-helper-clearfix`: Applies float wrapping properties to parent elements
+* `.ui-helper-zfix`: Applies iframe "fix" css to iframe elements when needed in overlays.
+
+### Widget Containers
+
+* `.ui-widget`: Class to be applied on outer container of all widgets. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements specifically, to combat inheritance issues in Win browsers.
+* `.ui-widget-header`: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons.
+* `.ui-widget-content`: Class to be applied to content containers. Applies content container styles to an element and its child text, links, and icons. (can be applied to parent or sibling of header)
+
+### Interaction States
+
+* `.ui-state-default`: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons.
+* `.ui-state-hover`: Class to be applied on mouseover to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
+* `.ui-state-focus`: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
+* `.ui-state-active`: Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.
+
+### Interaction Cues
+
+* `.ui-state-highlight`: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.
+* `.ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons.
+* `.ui-state-error-text: An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons.
+* `.ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element.
+* `.ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text.
+* `.ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element.
+
+### Icons
+
+#### States and images
+
+* `.ui-icon`: Base class to be applied to an icon element. Sets dimensions to 16px square block, hides inner text, sets background image to "content" state sprite image. **Note:** *`.ui-icon` class will be given a different sprite background image depending on its parent container. For example, a `ui-icon` element within a `ui-state-default` container will get colored according to the `ui-state-default`'s icon color.*
+
+#### Icon types
+
+After declaring a `.ui-icon` class, you can follow up with a second class describing the type of icon you'd like. Icon classes generally follow a syntax of `.ui-icon-{icon type}-{icon sub description}-{direction}`.
+
+For example, a single triangle icon pointing to the right looks like this:
+`.ui-icon-triangle-1-e`
+
+jQuery UI's [ThemeRoller](http://jqueryui.com/themeroller) provides the full set of CSS framework icons in its preview column. Hover over them to see the class name.
+
+### Misc Visuals
+
+#### Corner Radius helpers
+
+* `.ui-corner-tl`: Applies corner-radius to top left corner of element.
+* `.ui-corner-tr`: Applies corner-radius to top right corner of element.
+* `.ui-corner-bl`: Applies corner-radius to bottom left corner of element.
+* `.ui-corner-br`: Applies corner-radius to bottom right corner of element.
+* `.ui-corner-top`: Applies corner-radius to both top corners of element.
+* `.ui-corner-bottom`: Applies corner-radius to both bottom corners of element.
+* `.ui-corner-right`: Applies corner-radius to both right corners of element.
+* `.ui-corner-left`: Applies corner-radius to both left corners of element.
+* `.ui-corner-all`: Applies corner-radius to all 4 corners of element.
+
+#### Overlay & Shadow
+
+* `.ui-widget-overlay`: Applies 100% wxh dimensions to an overlay screen, along with background color/texture, and screen opacity.
+* `.ui-widget-shadow`: Class to be applied to overlay widpacity, top/left offsets and shadow "thickness". Thickness is applied via padding to all sides of a shadow that is set to match the dimensions of the overlay element. Offsets are applied via top and left margins (can be positive or negative).
diff --git a/page/jquery-ui/theming/themeroller.md b/page/jquery-ui/theming/themeroller.md
new file mode 100644
index 00000000..295b722c
--- /dev/null
+++ b/page/jquery-ui/theming/themeroller.md
@@ -0,0 +1,41 @@
+---
+title: Using jQuery UI ThemeRoller
+level: beginner
+---
+
+
+### About ThemeRoller
+ThemeRoller is a web app that offers a fun and intuitive interface for designing and downloading custom themes for jQuery UI. You can find ThemeRoller in the "Themes" section of the jQuery UI site, or by following this link: [jQuery UI ThemeRoller](http://jqueryui.com/themeroller)
+
+
+
+
+### The ThemeRoller Interface
+The interface for ThemeRoller is categorized into panels for global font and corner radius settings, widget container styles, and interaction states for clickable elements, and various styles for overlays and shadows. These panels allow configuration of various CSS properties such as font size, color, and weight, background color and texture, border color, text color, icon color, corner radius, and more!
+
+### The Theme Gallery: Pre-Rolled Themes
+ThemeRoller themes can be viewed via permalink URLs, and it includes a gallery of pre-designed themes to choose from. The theme gallery is accessible through the tab strip located at the top of the application interface. From the gallery, you can preview and download themes, or even choose to tweak a theme further in the "Roll Your Own" tab.
+
+### Downloading Themes
+When you're done designing a theme, you can download it for use in your projects. ThemeRoller has a "Download Theme" button at the top which will generate a ZIP file containing all of theme assets. Images included in your download will be generated to your specifications and saved as high-quality PNG files.
+
+Your theme will include images and CSS that make up a customized version of the jQuery UI CSS Framework including images and CSS for all of our plugins.
+
+### Installing downloaded themes into your project
+Once the theme has been downloaded and unzipped, you will see a folder named `themes`. This folder contains the CSS and images needed for your theme. Copy the theme directory into your project and link to the `themes/all.css` file from your pages.
+
+### Building Custom "ThemeRoller-Ready" Components
+
+
+
+ThemeRoller generates a customized version of the jQuery UI CSS Framework for developing your own ThemeRoller-Ready jQuery components. The classes generated by this framework are designed to accommodate common user interface design situations and include states, icons, and various helper classes as well.
+
+For information on developing with the jQuery UI CSS Framework, visit our [Theming API documentation](/jquery-ui/theming/api).
+
+### ThemeRoller Links
+* [Tutorial: Develop Your Own jQuery “ThemeRoller-Ready” Components, Filament Group](http://www.filamentgroup.com/lab/developer_your_own_jquery_themeroller_ready_components/)
+* [Introducing ThemeRoller: Design & Download Custom Themes for jQuery UI, Filament Group](http://www.filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/)
+* [Videos about Design & Download Custom Themes for jQuery UI, Filament Group](http://www.dizi-izle-film-izle.net)
+
+### Credits
+ThemeRoller was designed and developed for jQuery UI by [Filament Group, Inc](http://www.filamentgroup.com), of Boston, MA.
diff --git a/page/jquery-ui/theming/write-a-theme.md b/page/jquery-ui/theming/write-a-theme.md
new file mode 100644
index 00000000..1c66051f
--- /dev/null
+++ b/page/jquery-ui/theming/write-a-theme.md
@@ -0,0 +1,57 @@
+---
+title: How To Write a Theme
+level: advanced
+---
+
+### File Structure
+
+Themes are meant to be structured in a specific manner (in order to increase their ease of use). The general file directory structure is as follows:
+
+* `themename/` - Your theme should be completely contained within a single directory (named the same as your theme).
+* `themename/themename.css` - This is your base CSS file. This file will be included on every page that uses your theme, regardless of which plugins are being used. (This file should be very lightweight and only include the essentials.)
+* `themename/themename.pluginname.css` - You'll need one CSS file for each plugin that you support. The name of the plugin should be included directly in the filename (for example, if you themed the tabs plugin, you would have: themename.tabs.js).
+* `themename/img.png` - Your theme can include images, if need be. They can be named whatever you'd like (there is no, particular, naming convention for these).
+
+For examples of how theme file structures are done, feel free to look through the only completed theme so far:
+http://jquery-ui.googlecode.com/svn/trunk/themes/flora/
+
+### Styling
+
+Writing styles for themes is rather simplistic - which is good, as it allows for a great amount of flexibility.
+
+All themes should have a base CSS class to work off of. This main class allows the user to enable, and switch between, themes. Your root class should be of the format `.ui-themename`. And it will be used like so, within a user's HTML file:
+
+```html
+
+
+ My Site
+
+
+
+
+
+ ...
+
+
+
... modal dialog ...
+
+
+
+```
+
+In the above example, a couple important things are occurring:
+
+* We're loading two themes into a document at the same time.
+* The whole page, and all of its contents, are themed according to themename's styling.
+* However, the div with the class of ui-othertheme, and everything inside of it (including the modal dialog), is themed according to othertheme's styling rules.
+
+If we were to take a look inside `themename.css` we might see something like the following:
+
+```css
+body.ui-themename { background:#111; color:snow; }
+.ui-themename a, a.ui-themename { color:#68D; outline:none; }
+.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
+.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }
+```
+
+If you'll notice, the `themename.css` file only contains styling information that is globally applicable (nothing plugin-specific is contained within here). This will be true for all cases where a theme is built. Don't worry about a theme taking up multiple files - that will be simplified within the build and download process.
diff --git a/page/jquery-ui/widget-factory.md b/page/jquery-ui/widget-factory.md
new file mode 100644
index 00000000..c25cde4c
--- /dev/null
+++ b/page/jquery-ui/widget-factory.md
@@ -0,0 +1,6 @@
+---
+title: Widget Factory
+level: intermediate
+---
+
+The jQuery UI Widget Factory is an extensible base on which all of jQuery UI's widgets are built. Using the widget factory to build a plugin provides conveniences for state management, as well as conventions for common tasks like exposing plugin methods and changing options after instantiation.
diff --git a/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md b/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md
new file mode 100644
index 00000000..fa807f6b
--- /dev/null
+++ b/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md
@@ -0,0 +1,399 @@
+---
+title: How To Use the Widget Factory
+level: Beginner
+---
+
+To start, we’ll create a progress bar that just lets us set the progress
+once. As we can see below, this is done by calling `jQuery.widget` with
+two parameters: the name of the plugin to create and an object literal
+containing functions to support our plugin. When our plugin gets called,
+it will create a new plugin instance and all functions will be executed
+within the context of that instance. This is different from a standard
+jQuery plugin in two important ways. First, the context is an object,
+not a DOM element. Second, the context is always a single object, never
+a collection.
+
+```
+ $.widget( "custom.progressbar", {
+ _create: function() {
+ var progress = this.options.value + "%";
+ this.element
+ .addClass( "progressbar" )
+ .text( progress );
+ }
+ });
+```
+
+The name of the plugin must contain a namespace, in this case we’ve used
+the `custom` namespace. There is currently a limitation that exactly one
+namespace must be used. We can also see that the widget factory has
+provided two properties for us. `this.element` is a jQuery object
+containing exactly one element. If our plugin is called on a jQuery
+object containing multiple elements, a separate plugin instance will be
+created for each element, and each instance will have its own
+`this.element`. The second property, `this.options`, is a hash
+containing key/value pairs for all of our plugin’s options. These
+options can be passed to our plugin as shown here.
+
+```
+ $( "" )
+ .appendTo( "body" )
+ .progressbar({ value: 20 });
+```
+
+When we call `jQuery.widget` it extends jQuery by adding a function to
+`jQuery.fn` (the system for creating a standard plugin). The name of the
+function it adds is based on the name you pass to `jQuery.widget`,
+without the namespace; in our case “progressbar”. The options passed to
+our plugin are the values that get set in `this.options` inside of our
+plugin instance. As shown below, we can specify default values for any
+of our options. When designing your API, you should figure out the most
+common use case for your plugin so that you can set appropriate default
+values and make all options truly optional.
+
+```
+ $.widget( "custom.progressbar", {
+ // default options
+ options: {
+ value: 0
+ },
+ _create: function() {
+ var progress = this.options.value + "%";
+ this.element
+ .addClass( "progressbar" )
+ .text( progress );
+ }
+ });
+```
+
+### Calling plugin methods
+
+Now that we can initialize our progress bar, we’ll add the ability to
+perform actions by calling methods on our plugin instance. To define a
+plugin method, we just include the function in the object literal that
+we pass to `jQuery.widget`. We can also define “private” methods by
+prepending an underscore to the function name.
+
+```
+ $.widget( "custom.progressbar", {
+ options: {
+ value: 0
+ },
+ _create: function() {
+ var progress = this.options.value + "%";
+ this.element
+ .addClass( "progressbar" )
+ .text( progress );
+ },
+ // create a public method
+ value: function( value ) {
+ // no value passed, act as a getter
+ if ( value === undefined ) {
+ return this.options.value;
+ // value passed, act as a setter
+ } else {
+ this.options.value = this._constrain( value );
+ var progress = this.options.value + "%";
+ this.element.text( progress );
+ }
+ },
+ // create a private method
+ _constrain: function( value ) {
+ if ( value > 100 ) {
+ value = 100;
+ }
+ if ( value < 0 ) {
+ value = 0;
+ }
+ return value;
+ }
+ });
+```
+
+To call a method on a plugin instance, you pass the name of the method
+to the jQuery plugin. If you are calling a method that accepts
+parameters, you simply pass those parameters after the method name.
+
+**Note:** Executing methods by passing the method name to the same
+jQuery function that was used to initialize the plugin may seem odd.
+This is done to prevent pollution of the jQuery namespace while
+maintaining the ability to chain method calls. Later in this article
+we’ll see alternative uses that may feel more natural.
+
+```
+ var bar = $( "" )
+ .appendTo( "body" )
+ .progressbar({ value: 20 });
+
+ // get the current value
+ alert( bar.progressbar( "value" ) );
+
+ // update the value
+ bar.progressbar( "value", 50 );
+
+ // get the current value again
+ alert( bar.progressbar( "value" ) );
+```
+
+### Working with options
+
+One of the methods that are automatically available to our plugin is the
+`option` method. The `option` method allows you to get and set options
+after initialization. This method works exactly like jQuery’s `css` and
+`attr` methods: you can pass just a name to use it as a getter, a name
+and value to use it as a single setter, or a hash of name/value pairs to
+set multiple values. When used as a getter, the plugin will return the
+current value of the option that corresponds to the name that was passed
+in. When used as a setter, the plugin’s `_setOption` method will be
+called for each option that is being set. We can specify a `_setOption`
+method in our plugin to react to option changes.
+For actions to perform independent of the number of options changed, we
+can override `_setOptions`.
+
+```
+ $.widget( "custom.progressbar", {
+ options: {
+ value: 0
+ },
+ _create: function() {
+ this.element.addClass( "progressbar" );
+ this.refresh();
+ },
+ _setOption: function( key, value ) {
+ if ( key === "value" ) {
+ value = this._constrain( value );
+ }
+ this._super( key, value );
+ },
+ _setOptions: function( options ) {
+ this._super( options );
+ this.refresh();
+ },
+ refresh: function() {
+ var progress = this.options.value + "%";
+ this.element.text( progress );
+ },
+ _constrain: function( value ) {
+ if ( value > 100 ) {
+ value = 100;
+ }
+ if ( value < 0 ) {
+ value = 0;
+ }
+ return value;
+ }
+ });
+```
+
+### Adding callbacks
+
+One of the easiest ways to make your plugin extensible is to add
+callbacks so users can react when the state of your plugin changes. We
+can see below how to add a callback to our progress bar to signify when
+the progress has reached 100%. The `_trigger` method takes three
+parameters: the name of the callback, a jQuery event object that
+initiated the callback, and a hash of data relevant to the event. The
+callback name is the only required parameter, but the others can be very
+useful for users who want to implement custom functionality on top of
+your plugin. For example, if we were building a draggable plugin, we
+could pass the mousemove event when triggering a drag callback;
+this would allow users to react to the drag based on the x/y coordinates
+provided by the event object. Note that the original event passed to `_trigger`
+must be a jQuery event, not a native browser event.
+
+```
+ $.widget( "custom.progressbar", {
+ options: {
+ value: 0
+ },
+ _create: function() {
+ this.element.addClass( "progressbar" );
+ this.refresh();
+ },
+ _setOption: function( key, value ) {
+ if ( key === "value" ) {
+ value = this._constrain( value );
+ }
+ this._super( key, value );
+ },
+ _setOptions: function( options ) {
+ this._super( options );
+ this.refresh();
+ },
+ refresh: function() {
+ var progress = this.options.value + "%";
+ this.element.text( progress );
+ if ( this.options.value == 100 ) {
+ this._trigger( "complete", null, { value: 100 } );
+ }
+ },
+ _constrain: function( value ) {
+ if ( value > 100 ) {
+ value = 100;
+ }
+ if ( value < 0 ) {
+ value = 0;
+ }
+ return value;
+ }
+ });
+```
+
+Callback functions are essentially just additional options, so you can
+get and set them just like any other option. Whenever a callback is
+executed, a corresponding event is triggered as well. The event type is
+determined by concatenating the plugin name and the callback name. The
+callback and event both receive the same two parameters: an event object
+and a hash of data relevant to the event, as we’ll see below. Your
+plugin may have functionality that you want to allow the user to
+prevent. The best way to support this is by creating cancelable
+callbacks. User’s can cancel a callback, or its associated event, the
+same way they cancel any native event, by calling event.preventDefault()
+or returning false. If the user cancels the callback, the `_trigger`
+method will return false so you can implement the appropriate
+functionality within your plugin.
+
+```
+ var bar = $( "" )
+ .appendTo( "body" )
+ .progressbar({
+ complete: function( event, data ) {
+ alert( "Callbacks are great!" );
+ }
+ })
+ .bind( "progressbarcomplete", function( event, data ) {
+ alert( "Events bubble and support many handlers for extreme flexibility." );
+ alert( "The progress bar value is " + data.value );
+ });
+
+ bar.progressbar( "option", "value", 100 );
+```
+
+## Looking under the hood
+
+Now that we’ve seen how to build a plugin using the widget factory,
+let’s take a look at how it actually works. When you call
+`jQuery.widget`, it creates a constructor for your plugin and sets the
+object literal that you pass in as the prototype for your plugin
+instances. All of the functionality that automatically gets added to
+your plugin comes from a base widget prototype, which is defined as
+`jQuery.Widget.prototype`. When a plugin instance is created, it is
+stored on the original DOM element using `jQuery.data`, with the plugin
+name as the key.
+
+Because the plugin instance is directly linked to the DOM element, you
+can access the plugin instance directly instead of going through the
+exposed plugin method if you want. This will allow you to call methods
+directly on the plugin instance instead of passing method names as
+strings and will also give you direct access to the plugin’s properties.
+
+```
+ var bar = $( "" )
+ .appendTo( "body" )
+ .progressbar()
+ .data( "progressbar" );
+
+ // call a method directly on the plugin instance
+ bar.option( "value", 50 );
+
+ // access properties on the plugin instance
+ alert( bar.options.value );
+```
+
+You can also create an instance without going through the plugin method,
+by calling the constructor directly, with the options and element
+arguments:
+
+```
+ var bar = $.custom.progressbar( {}, $( "" ).appendTo( "body") );
+
+ // same result as before
+ alert( bar.options.value );
+```
+
+### Extending a plugin’s prototype
+
+One of the biggest benefits of having a constructor and prototype for a
+plugin is the ease of extending the plugin. By adding or modifying
+methods on the plugin’s prototype, we can modify the behavior of all
+instances of our plugin. For example, if we wanted to add a method to
+our progress bar to reset the progress to 0% we could add this method to
+the prototype and it would instantly be available to be called on any
+plugin instance.
+
+```
+ $.custom.progressbar.prototype.reset = function() {
+ this._setOption( "value", 0 );
+ };
+```
+
+### Cleaning up
+
+In some cases, it will make sense to allow users to apply and then later
+unapply your plugin. You can accomplish this via the `_destroy` method.
+Within the `_destroy` method, you should undo anything your plugin may
+have done during initialization or later use. `_destroy` is called by
+the `destroy` method, which is automatically called if the element that your
+plugin instance is tied to is removed from the DOM, so this can be used for
+garbage collection as well. That base `destroy` method also handles some
+general cleanup operations, like removing the instance reference from the
+widget's DOM element, unbinding all events in the widget's namespace from the
+element, and unbinding generally all events that were added using `_bind`.
+
+```
+ $.widget( "custom.progressbar", {
+ options: {
+ value: 0
+ },
+ _create: function() {
+ this.element.addClass( "progressbar" );
+ this.refresh();
+ },
+ _setOption: function( key, value ) {
+ if ( key === "value" ) {
+ value = this._constrain( value );
+ }
+ this._super( key, value );
+ },
+ _setOptions: function( options ) {
+ this._super( options );
+ this.refresh();
+ },
+ refresh: function() {
+ var progress = this.options.value + "%";
+ this.element.text( progress );
+ if ( this.options.value == 100 ) {
+ this._trigger( "complete", null, { value: 100 } );
+ }
+ },
+ _constrain: function( value ) {
+ if ( value > 100 ) {
+ value = 100;
+ }
+ if ( value < 0 ) {
+ value = 0;
+ }
+ return value;
+ },
+ _destroy: function() {
+ this.element
+ .removeClass( "progressbar" )
+ .text( "" );
+ }
+ });
+```
+
+## Closing comments
+
+The widget factory is only one way of creating stateful plugins. There
+are a few different models that can be used and each have their own
+advantages and disadvantages. The widget factory solves lots of common
+problems for you and can greatly improve productivity, it also greatly
+improves code reuse, making it a great fit for jQuery UI as well as many
+other stateful plugins.
+
+You may have noticed that in this article we used the `custom` namespace. The
+`ui` namespace is reserved for official jQuery UI plugins. When building
+your own plugins, you should create your own namespace. This makes it
+clear where the plugin came from and if it is part of a larger
+collection.
diff --git a/page/jquery-ui/widget-factory/why-use-the-widget-factory.md b/page/jquery-ui/widget-factory/why-use-the-widget-factory.md
new file mode 100644
index 00000000..ac2b6562
--- /dev/null
+++ b/page/jquery-ui/widget-factory/why-use-the-widget-factory.md
@@ -0,0 +1,80 @@
+---
+title: Why Use the Widget Factory
+level: Beginner
+---
+
+
+Writing jQuery plugins is as simple as adding a method to `jQuery.prototype`
+(more commonly seen as `$.fn`) and following some simple conventions like returning `this` for chainability.
+So why does the widget factory exist? And why is it hundreds of lines of code?
+
+In this document, we'll walk through the benefits of the widget factory and find out
+when and why it makes sense to use it.
+
+## Stateless vs. Stateful Plugins
+
+Most jQuery plugins are stateless; they perform some action and their job is done.
+For example, if you set the text of an element using `.text( "hello" )`,
+there is no setup phase and the result is always the same.
+For these types of plugins, it makes sense to just extend jQuery's prototype.
+
+However, some plugins are stateful; they have full life cycles, maintain state, and react to changes.
+These plugins require a lot of code dedicated to initialization and state management (and sometimes destruction).
+This results in a lot of boilerplate for building stateful plugins.
+Even worse, each plugin author may manage life cycles and state differently,
+resulting in different API styles for different plugins.
+The widget factory aims to solve both problems,
+removing the boilerplate and creating a consistent API across plugins.
+
+## Consistent API
+
+The widget factory defines how to create and destroy widgets,
+get and set options, invoke methods, and listen to events triggered by the widget.
+By using the widget factory to build your stateful plugins,
+you are automatically conforming to a defined standard,
+making it easier for new users to start using your plugins.
+In addition to defining the interface,
+the widget factory also implements much of this functionality for you.
+If you're not familiar with the API provided by the widget factory,
+you should read [How jQuery UI Works](how-jquery-ui-works.md).
+
+## Setting Options on Initialization
+
+Whenever you build a plugin that accepts options,
+you should define defaults for as many options as possible,
+then merge the user-provided options with the defaults on initialization.
+It's also a good idea to expose the defaults so that users can even change the default values.
+A common pattern in jQuery plugins looks like this:
+
+```
+ $.fn.plugin = function( options ) {
+ options = $.extend( {}, $.fn.plugin.defaults, options );
+ // plugin logic goes here
+ };
+
+ $.fn.plugin.defaults = {
+ param1: "foo",
+ param2: "bar",
+ param3: "baz"
+ };
+```
+
+The widget factory provides this functionality and even takes it a bit further.
+Let's see what this looks like with the widget factory.
+
+```
+ $.widget( "ns.plugin", {
+
+ // default options
+ options: {
+ param1: "foo",
+ param2: "bar",
+ param3: "baz"
+ },
+
+ _create: function() {
+ // options are already merged and stored in this.options
+ // plugin logic goes here
+ }
+ });
+```
\ No newline at end of file
diff --git a/resources/jquery-ui/Themeroller_gallery_new.png b/resources/jquery-ui/Themeroller_gallery_new.png
new file mode 100644
index 00000000..38ae7f1c
Binary files /dev/null and b/resources/jquery-ui/Themeroller_gallery_new.png differ
diff --git a/resources/jquery-ui/Themeroller_interface_new.png b/resources/jquery-ui/Themeroller_interface_new.png
new file mode 100644
index 00000000..9c18f510
Binary files /dev/null and b/resources/jquery-ui/Themeroller_interface_new.png differ
diff --git a/resources/jquery-ui/Themeroller_ready_black_200px.png b/resources/jquery-ui/Themeroller_ready_black_200px.png
new file mode 100644
index 00000000..55b37fd3
Binary files /dev/null and b/resources/jquery-ui/Themeroller_ready_black_200px.png differ
diff --git a/resources/jquery-ui/Themeroller_ready_white_200px.png b/resources/jquery-ui/Themeroller_ready_white_200px.png
new file mode 100644
index 00000000..0693a7f6
Binary files /dev/null and b/resources/jquery-ui/Themeroller_ready_white_200px.png differ
diff --git a/resources/jquery-ui/configure.png b/resources/jquery-ui/configure.png
new file mode 100644
index 00000000..65171d6c
Binary files /dev/null and b/resources/jquery-ui/configure.png differ
diff --git a/resources/jquery-ui/ex-datepicker.png b/resources/jquery-ui/ex-datepicker.png
new file mode 100644
index 00000000..b74fe5d6
Binary files /dev/null and b/resources/jquery-ui/ex-datepicker.png differ
diff --git a/resources/jquery-ui/themeroller-logo.png b/resources/jquery-ui/themeroller-logo.png
new file mode 100644
index 00000000..fd3c646f
Binary files /dev/null and b/resources/jquery-ui/themeroller-logo.png differ
diff --git a/resources/jquery-ui/themeroller.png b/resources/jquery-ui/themeroller.png
new file mode 100644
index 00000000..cf9c5d9e
Binary files /dev/null and b/resources/jquery-ui/themeroller.png differ