Adding docs for the class directive (#351)

Author: jacwright

content/guide/07-element-directives.md

@@ -517,3 +517,105 @@ Use actions for things like:
 	}
 }
 ```
+
+### Classes
+
+Classes let you toggle element classes on and off. To use classes add the directive `class` followed by a colon and the class name you want toggled (`class:the-class-name="anExpression"`). The expression inside the directive's quotes will be evaluated and toggle the class on and off depending on the truthiness of the expression's result. You can only add class directives to elements.
+
+This example adds the class `active` to `<li>` elements when the `url` property matches the path their links target.
+
+```html
+<!-- { title: 'Classes' } -->
+<ul class="links">
+	<li class:active="url === '/'"><a href="/" on:click="goto(event)">Home</a></li>
+	<li class:active="url.startsWith('/blog')"><a href="/blog/" on:click="goto(event)">Blog</a></li>
+	<li class:active="url.startsWith('/about')"><a href="/about/" on:click="goto(event)">About</a></li>
+</ul>
+
+<script>
+	export default {
+		methods: {
+			goto(event) {
+				event.preventDefault();
+				this.set({ url: event.target.pathname });
+			}
+		}
+	}
+</script>
+
+<style>
+	.links {
+		list-style: none;
+	}
+	.links li {
+		float: left;
+		padding: 10px;
+	}
+	/* classes added this way are processed with encapsulated styles, no need for :global() */
+	.active {
+		background: #eee;
+	}
+</style>
+```
+
+```json
+/* { hidden: true } */
+{
+	"url": "/"
+}
+```
+
+Classes will work with an existing class attribute on your element. If you find yourself adding multiple ternary statements inside a class attribute, classes can simplify your component. Classes are recognized by the compiler and <a href="guide#scoped-styles">scoped correctly</a>.
+
+If your class name is the same as a property in your component's state, you can use the shorthand of a class binding which drops the expression (`class:myProp`).
+
+Note that class names with dashes in them do not usually make good shorthand classes since the property will also need a dash in it. The example below uses a computed property to make working with this easier, but it may be easier to not use the shorthand in cases like this.
+
+```html
+<!-- { title: 'Classes shorthand' } -->
+<div class:active class:is-selected class:isAdmin>
+	<p>Active? {active}</p>
+	<p>Selected? {isSelected}</p>
+</div>
+<button on:click="set({ active: !active })">Toggle Active</button>
+<button on:click="set({ isSelected: !isSelected })">Toggle Selected</button>
+<button on:click="set({ isAdmin: !isAdmin })">Toggle Admin</button>
+
+<script>
+export default {
+	computed: {
+		// Because shorthand relfects the var name, you must use component.set({ "is-selected": true }) or use a computed
+		// property like this. It might be better to avoid shorthand for class names which are not valid variable names.
+		"is-selected": ({ isSelected }) => isSelected
+	}
+}
+</script>
+
+<style>
+	div {
+		width: 300px;
+		border: 1px solid #ccc;
+		background: #eee;
+		margin-bottom: 10px;
+	}
+	.active {
+		background: #fff;
+	}
+	.is-selected {
+		border-color: #99bbff;
+		box-shadow: 0 0 6px #99bbff;
+	}
+	.isAdmin {
+		outline: 2px solid red;
+	}
+</style>
+```
+
+```json
+/* { hidden: true } */
+{
+	"active": true,
+	"isSelected": false,
+	"isAdmin": false,
+}
+```