jQuery UI: Article on the classes option—new to jQuery UI 1.12

Author: tjvantoll

page/jquery-ui/widget-factory/classes-option.md

@@ -0,0 +1,89 @@
+<script>{
+	"title": "Using the classes Option",
+	"level": "advanced"
+}</script>
+
+As of the 1.12 release, the jQuery UI widget factory includes a means of managing CSS class names through the `classes` option. This article will give you an overview of how the `classes` option works, and discuss what you can do with it.
+
+### Syntax overview
+
+The `classes` option is used to map structural class names to custom class names that you define. To see what this means let's look at an example. The code below uses the `classes` option to create a red dialog:
+
+```
+<style>
+	.custom-red { background: red; }
+</style>
+<script>
+	var dialog = $( "<div>Red</div>" ).dialog({
+		classes: {
+			"ui-dialog": "custom-red"
+		}
+	});
+</script>
+```
+
+Here, the presentational `custom-red` class name is being associated with the structural `ui-dialog` class name. Now, whenever the dialog applies the `ui-dialog` class name it will also add `custom-red`. You can associate multiple class names by including multiple space-delimited class names in the object's value. For instance the following code creates a dialog that is big and red:
+
+```
+<style>
+	.custom-red { background: red; }
+	.custom-big { font-size: 3em; }
+</style>
+<script>
+	var dialog = $( "<div>Big and red</div>" ).dialog({
+		classes: {
+			"ui-dialog": "custom-red custom-big"
+		}
+	});
+</script>
+```
+
+*Note: To get a full list of the class names you can use with `classes`, you can log the default values stored at `$.namespace.wigetName.prototype.options.classes`. For instance the dialog widget's default values are available at `$.ui.dialog.prototype.options.classes`. Additionally, the API documentation for all jQuery UI widgets list the class names they use; here are dialog's: <http://api.jqueryui.com/dialog/#theming>.*
+
+The `classes` option works any other widget factory option, which means all the mechanisms around options still apply. For instance the following code uses the [`option()` method](http://api.jqueryui.com/jquery.widget/#method-option) to remove all class names currently associated with `ui-dialog`:
+
+```
+dialog.dialog( "option", "classes.ui-dialog", "" );
+```
+
+The following creates a [widget extension](http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/) that automatically associates the `custom-red` and `custom-big` class names with `ui-dialog`:
+
+```
+<style>
+	.custom-red { background: red; }
+	.custom-big { font-size: 3em; }
+</style>
+<script>
+	$.widget( "custom.dialog", $.ui.dialog, {
+		options: {
+			classes: {
+				"ui-dialog": "custom-red custom-big"
+			}
+		}
+	});
+	$( "<div>Big and red</div>" ).dialog();
+</script>
+```
+
+The widget factory also removes any class names specified in `classes` when the widget is destroyed.
+
+### Theming
+
+As the previous examples show, the `classes` option provides a quick way to associate custom class names with classes used within a widget. This approach works for simple cases, but it also be used to adapt third-party themes to work with widget-factory-built widgets. For example, if you're using [Bootstrap](http://getbootstrap.com/) and jQuery UI together, you can use the following code to create a jQuery UI dialog that uses Bootstrap's theming:
+
+```
+$.extend( $.ui.dialog.prototype.options.classes, {
+	"ui-dialog": "modal-content",
+	"ui-dialog-titlebar": "modal-header",
+	"ui-dialog-title": "modal-title",
+	"ui-dialog-titlebar-close": "close",
+	"ui-dialog-content": "modal-body",
+	"ui-dialog-buttonpane": "modal-footer"
+});
+```
+
+For more examples of this approach, checkout [Alexander Schmitz's repo](https://github.com/arschmitz/jqueryui-bootstrap-adapter) that adapts jQuery UI to work with Boostrap using the `classes` option.
+
+### Using `classes` in your own widgets
+
+...