diff --git a/build.gradle b/build.gradle
index 9f86599219..96b51fc227 100644
--- a/build.gradle
+++ b/build.gradle
@@ -54,7 +54,7 @@ dependencies {
     compile group: 'org.apache.commons', name: 'commons-lang3', version: '3.0'
 
     compile "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-    compile 'org.jetbrains.kotlinx:kotlinx-coroutines-async:0.2-beta'
+    compile 'org.jetbrains.kotlinx:kotlinx-coroutines-jdk8:0.3-beta'
 
     testCompile 'io.kotlintest:kotlintest:1.3.4'
     testCompile 'com.moodysalem:phantomjs-wrapper:3.0.0'
diff --git a/gradlew b/gradlew
index fd5e0ac796..6a87d4cab5 100755
--- a/gradlew
+++ b/gradlew
@@ -133,7 +133,7 @@ if $cygwin ; then
         CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
         CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
 
-        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a onlyIf
             eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
         else
             eval `echo args$i`="\"$arg\""
diff --git a/src/main/kotlin/com/github/sanity/kweb/demos/async/async.kt b/src/main/kotlin/com/github/sanity/kweb/demos/async/async.kt
index c4aed653dc..aa339b0dec 100644
--- a/src/main/kotlin/com/github/sanity/kweb/demos/async/async.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/demos/async/async.kt
@@ -3,10 +3,10 @@ package com.github.sanity.kweb.demos.async
 import com.github.sanity.kweb.KWeb
 import com.github.sanity.kweb.dom.element.creation.createElement
 import com.github.sanity.kweb.dom.element.modification.setAttribute
-import com.github.sanity.kweb.dom.element.modification.setText
+import com.github.sanity.kweb.dom.element.modification.addText
 import com.github.sanity.kweb.dom.element.read.read
-import kotlinx.coroutines.async
-import kotlinx.coroutines.await
+import kotlinx.coroutines.experimental.future.await
+import kotlinx.coroutines.experimental.future.future
 
 /**
  * Created by ian on 1/11/17.
@@ -15,10 +15,10 @@ fun main(args: Array<String>) {
     println("Visit http://127.0.0.1:8091/ in your browser...")
     KWeb(8091) {
         doc.body.apply {
-            val p1 = createElement("p").setAttribute("id", 1).setText("one")
-            val p2 = createElement("p").setAttribute("id", 2).setText("two")
-            val p3 = createElement("p").setAttribute("id", 3).setText("three")
-            async {
+            val p1 = createElement("p").setAttribute("id", 1).addText("one")
+            val p2 = createElement("p").setAttribute("id", 2).addText("two")
+            val p3 = createElement("p").setAttribute("id", 3).addText("three")
+            future {
                 println("Synchronous retrieve")
                 val syncStartTime = System.nanoTime()
                 println("${p1.read.innerHtml.await()} ${p2.read.innerHtml.await()} ${p3.read.innerHtml.await()}")
diff --git a/src/main/kotlin/com/github/sanity/kweb/demos/bootstrap4/bootstrap4.kt b/src/main/kotlin/com/github/sanity/kweb/demos/bootstrap4/bootstrap4.kt
index abe01d4eb1..d7902f7127 100644
--- a/src/main/kotlin/com/github/sanity/kweb/demos/bootstrap4/bootstrap4.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/demos/bootstrap4/bootstrap4.kt
@@ -4,7 +4,7 @@ import com.github.sanity.kweb.KWeb
 import com.github.sanity.kweb.dom.element.creation.*
 import com.github.sanity.kweb.dom.element.modification.addClasses
 import com.github.sanity.kweb.dom.element.modification.setAttribute
-import com.github.sanity.kweb.dom.element.modification.setText
+import com.github.sanity.kweb.dom.element.modification.addText
 import com.github.sanity.kweb.plugins.bootstrap4.bootstrap4
 import com.github.sanity.kweb.plugins.bootstrap4.container
 
@@ -40,9 +40,9 @@ fun main(args: Array<String>) {
         doc.body.apply {
             div().apply {
                 container().apply {
-                    h1().setText("KWeb Bootstrap4 demo")
+                    h1().addText("KWeb Bootstrap4 demo")
 
-                    p().setText("The following is a simple setText field which does nothing")
+                    p().addText("The following is a simple setText field which does nothing")
                 }
             }
 
@@ -56,7 +56,7 @@ fun main(args: Array<String>) {
                     createElement("label").apply {
                         setAttribute("for", pairId)
                         addClasses("col-2", "col-form-label")
-                        setText("Text")
+                        addText("Text")
                     }
 
                     div().apply {
diff --git a/src/main/kotlin/com/github/sanity/kweb/demos/jquery/jquery.kt b/src/main/kotlin/com/github/sanity/kweb/demos/jquery/jquery.kt
index 141e93338c..54df43df8d 100644
--- a/src/main/kotlin/com/github/sanity/kweb/demos/jquery/jquery.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/demos/jquery/jquery.kt
@@ -4,7 +4,7 @@ import com.github.sanity.kweb.KWeb
 import com.github.sanity.kweb.dom.element.creation.attr
 import com.github.sanity.kweb.dom.element.creation.classes
 import com.github.sanity.kweb.dom.element.creation.h1
-import com.github.sanity.kweb.dom.element.modification.setText
+import com.github.sanity.kweb.dom.element.modification.addText
 import com.github.sanity.kweb.plugins.jqueryCore.jquery
 import com.github.sanity.kweb.plugins.jqueryCore.jqueryCore
 
@@ -16,7 +16,7 @@ import com.github.sanity.kweb.plugins.jqueryCore.jqueryCore
 fun main(args: Array<String>) {
     KWeb(port = 8091, plugins = listOf(jqueryCore)) {
         doc.body.apply {
-            h1(attr.classes("test")).setText("Simple Demo of JQuery plugin")
+            h1(attr.classes("test")).addText("Simple Demo of JQuery plugin")
             jquery(".test").apply {
                 click {
                     println("Clicked!")
diff --git a/src/main/kotlin/com/github/sanity/kweb/demos/materialDesignLite/materialDesignLite.kt b/src/main/kotlin/com/github/sanity/kweb/demos/materialDesignLite/materialDesignLite.kt
index b1a7bc1944..c6c99be193 100644
--- a/src/main/kotlin/com/github/sanity/kweb/demos/materialDesignLite/materialDesignLite.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/demos/materialDesignLite/materialDesignLite.kt
@@ -1,12 +1,12 @@
 package com.github.sanity.kweb.demos.materialDesignLite
 
 import com.github.sanity.kweb.KWeb
-import com.github.sanity.kweb.dom.element.creation.h1
-import com.github.sanity.kweb.dom.element.modification.setText
-import com.github.sanity.kweb.plugins.materialdesignlite.TypographyStyles.display3
+import com.github.sanity.kweb.dom.element.creation.InputType.text
+import com.github.sanity.kweb.dom.element.modification.addText
+import com.github.sanity.kweb.plugins.materialdesignlite.layout.drawerLayout
 import com.github.sanity.kweb.plugins.materialdesignlite.materialDesignLite
 import com.github.sanity.kweb.plugins.materialdesignlite.mdl
-import com.github.sanity.kweb.plugins.materialdesignlite.typography
+import com.github.sanity.kweb.plugins.materialdesignlite.textFields.textField
 
 fun main(args: Array<String>) {
     println("Visit http://127.0.0.1:8091/ in your browser...")
@@ -14,15 +14,23 @@ fun main(args: Array<String>) {
         doc.body.apply {
             mdl.drawerLayout().apply {
                 drawer().apply {
-                    title().setText("KWeb")
+                    title().addText("KWeb")
                     nav().apply {
-                        link().setText("One")
-                        link().setText("Two")
-                        link().setText("Three")
+                        link().addText("One")
+                        link().addText("Two")
+                        link().addText("Three")
                     }
                 }
                 content().apply {
-                    h1().typography(display3).setText("This is the page content")
+                    mdl.textField(floatingLabel = true).apply {
+                        val nameInput = input(text)
+                        label(forInput = nameInput).addText("Name")
+                    }
+                    mdl.textField().apply {
+                        val phoneInput = input(text, pattern = "[0-9]*")
+                        label(forInput = phoneInput).addText("Phone")
+                        error().addText("Digits only")
+                    }
                 }
             }
         }
diff --git a/src/main/kotlin/com/github/sanity/kweb/demos/todo/todo.kt b/src/main/kotlin/com/github/sanity/kweb/demos/todo/todo.kt
index 136d4ffd31..c27a95643b 100644
--- a/src/main/kotlin/com/github/sanity/kweb/demos/todo/todo.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/demos/todo/todo.kt
@@ -4,17 +4,17 @@ import com.github.sanity.kweb.KWeb
 import com.github.sanity.kweb.dom.element.creation.*
 import com.github.sanity.kweb.dom.element.events.on
 import com.github.sanity.kweb.dom.element.modification.delete
-import com.github.sanity.kweb.dom.element.modification.setText
-import kotlinx.coroutines.async
-import kotlinx.coroutines.await
+import com.github.sanity.kweb.dom.element.modification.addText
+import kotlinx.coroutines.experimental.future.await
+import kotlinx.coroutines.experimental.future.future
 
 fun main(args: Array<String>) {
     // Starts a web server listening on port 8091
     KWeb(8091) {
         doc.body.apply {
             // Add a header element to the body, along with some simple instructions.
-            h1().setText("Simple KWeb demo - a to-do list")
-            p().setText("Edit the setText box below and click the button to add the item.  Click an item to remove it.")
+            h1().addText("Simple KWeb demo - a to-do list")
+            p().addText("Edit the setText box below and click the button to add the item.  Click an item to remove it.")
 
             // If you're unfamiliar with the `apply` function, read this:
             //   http://beust.com/weblog/2015/10/30/exploring-the-kotlin-standard-library/
@@ -33,7 +33,7 @@ fun main(args: Array<String>) {
             val inputElement = input(type = InputType.text, size = 20)
 
             // And a button to add a new item
-            button().setText("Add Item")
+            button().addText("Add Item")
                     // Here we register a callback, the code block will be called when the
                     // user clicks this button.
                     .on.click {
@@ -42,7 +42,7 @@ fun main(args: Array<String>) {
                 // functionality, see https://github.com/Kotlin/kotlinx.coroutines
 
                 // We start an async block, which will allow us to use `await` within the block
-                async {
+                future {
                     // This is where async comes in.  inputElement.getValue() sends a message to the browser
                     // asking for the `value` of inputElement.  This will take time so
                     // inputElement.getValue() actually returns a future.  `await()` then uses coroutines
@@ -66,7 +66,7 @@ fun main(args: Array<String>) {
 // delete itself when clicked.
 fun ULElement.newListItem(text: String) {
     li().apply {
-        setText(text)
+        addText(text)
         on.click { delete() }
     }
 }
diff --git a/src/main/kotlin/com/github/sanity/kweb/dom/element/Element.kt b/src/main/kotlin/com/github/sanity/kweb/dom/element/Element.kt
index 8bef5ac0ed..30c000550b 100644
--- a/src/main/kotlin/com/github/sanity/kweb/dom/element/Element.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/dom/element/Element.kt
@@ -1,11 +1,13 @@
 package com.github.sanity.kweb.dom.element
 
 import com.github.sanity.kweb.RootReceiver
+import com.github.sanity.kweb.plugins.KWebPlugin
 import java.util.concurrent.CompletableFuture
+import kotlin.reflect.KClass
 
 
-open class Element(open val receiver: RootReceiver, open var jsExpression: String) {
-    constructor(element: Element) : this(element.receiver, element.jsExpression)
+open class Element(open val receiver: RootReceiver, open var jsExpression: String, val id: String? = null) {
+    constructor(element: Element) : this(element.receiver, element.jsExpression, element.id)
     /*********
      ********* Low level methods
      *********/
@@ -27,4 +29,6 @@ open class Element(open val receiver: RootReceiver, open var jsExpression: Strin
     fun <O> evaluate(js: String, outputMapper: (String) -> O): CompletableFuture<O>? {
         return receiver.evaluate(js).thenApply(outputMapper)
     }
+
+    fun require(requiredPlugins: KClass<out KWebPlugin>) = receiver.require(requiredPlugins)
 }
diff --git a/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/attributes.kt b/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/attributes.kt
index 0d27f2ad21..646b6bd7f2 100644
--- a/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/attributes.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/attributes.kt
@@ -24,11 +24,19 @@ fun Map<String, Any>.set(key : String, value : Any?) : Map<String, Any> {
     }
 }
 
-fun Map<String, Any>.classes(vararg classes: String): Map<String, Any> {
-    val classAttributeValue = get("class")
-    val existing: List<String> = when (classAttributeValue) {
-        is String -> classAttributeValue.split(' ')
-        else -> listOf()
+fun Map<String, Any>.id(id: String): Map<String, Any> = set("id", id)
+
+fun Map<String, Any>.classes(classes: Iterable<String>, condition: Boolean = true): Map<String, Any> {
+    if (condition) {
+        val classAttributeValue = get("class")
+        val existing: List<String> = when (classAttributeValue) {
+            is String -> classAttributeValue.split(' ')
+            else -> listOf()
+        }
+        return set("class", (existing + classes).joinToString(separator = " "))
+    } else {
+        return this
     }
-    return set("class", (existing + classes).joinToString(separator = " "))
-}
\ No newline at end of file
+}
+
+fun Map<String, Any>.classes(vararg classes: String, onlyIf: Boolean = true): Map<String, Any> = classes(classes.asIterable(), onlyIf)
\ No newline at end of file
diff --git a/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/creation.kt b/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/creation.kt
index cf30cb951f..ce004ceaee 100644
--- a/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/creation.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/creation.kt
@@ -1,11 +1,9 @@
 package com.github.sanity.kweb.dom.element.creation
 
-import com.github.salomonbrys.kotson.toJson
 import com.github.sanity.kweb.dom.element.Element
 import com.github.sanity.kweb.random
 import com.github.sanity.kweb.toJson
 import java.util.*
-import java.util.concurrent.CompletableFuture
 
 /**
  * Created by ian on 1/13/17.
@@ -21,7 +19,7 @@ import java.util.concurrent.CompletableFuture
  *********/
 
 fun Element.createElement(tag: String, attributes: Map<String, Any> = HashMap()): Element {
-    val id = attributes["id"] ?: Math.abs(random.nextInt()).toString()
+    val id: String = (attributes["id"] ?: Math.abs(random.nextInt())).toString()
     val javaScript = StringBuilder()
     with(javaScript) {
         appendln("{")
@@ -36,25 +34,25 @@ fun Element.createElement(tag: String, attributes: Map<String, Any> = HashMap())
         appendln("}")
     }
     execute(javaScript.toString())
-    return Element(receiver, "document.getElementById(\"$id\")")
+    return Element(receiver, jsExpression = "document.getElementById(\"$id\")", id = id)
 }
 
 fun Element.div(attributes: Map<String, Any> = HashMap()) = DIVElement(createElement("div", attributes))
 
-open class DIVElement(wrapped: Element) : Element(wrapped.receiver, wrapped.jsExpression) {
+open class DIVElement(wrapped: Element) : Element(wrapped) {
     // These are useful to attach extension functions to
 }
 
 
 fun Element.span(attributes: Map<String, Any> = HashMap()) = SpanElement(createElement("span", attributes))
 
-open class SpanElement(wrapped: Element) : Element(wrapped.receiver, wrapped.jsExpression) {
+open class SpanElement(wrapped: Element) : Element(wrapped) {
     // These are useful to attach extension functions to
 }
 
 fun Element.main(attributes: Map<String, Any> = HashMap()) = MainElement(createElement("main", attributes))
 
-open class MainElement(wrapped: Element) : Element(wrapped.receiver, wrapped.jsExpression) {
+open class MainElement(wrapped: Element) : Element(wrapped) {
     // These are useful to attach extension functions to
 }
 
@@ -75,26 +73,12 @@ fun Element.ul(attributes: Map<String, Any> = HashMap()): ULElement {
     return ULElement(e)
 }
 
-class ULElement(wrapped: Element) : Element(wrapped.receiver, wrapped.jsExpression) {
-    fun li(attributes: Map<String, Any> = HashMap()) = createElement("li", attributes)
-}
-
-fun Element.input(type: InputType? = null, name: String? = null, initialValue: String? = null, size: Int? = null): InputElement {
-    val attributes = HashMap<String, Any>()
-    if (type != null) attributes.put("type", type.name)
-    if (name != null) attributes.put("name", name)
-    if (initialValue != null) attributes.put("value", initialValue)
-    if (size != null) attributes.put("size", size)
-    return InputElement(createElement("input", attributes))
+fun Element.form(action: String? = null, attributes: Map<String, Any> = HashMap()): Element {
+    return createElement("form", attributes.set("action", action))
 }
 
-class InputElement(val element: Element) : Element(element) {
-    fun getValue(): CompletableFuture<String> = element.evaluate("$jsExpression.value", { s: String -> s }) ?: throw RuntimeException("Not sure why .evaluate() would return null")
-    fun setValue(newValue: String) = element.receiver.execute("$jsExpression.value=${newValue.toJson()}")
-}
-
-enum class InputType {
-    button, checkbox, color, date, datetime, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week
+class ULElement(wrapped: Element) : Element(wrapped) {
+    fun li(attributes: Map<String, Any> = HashMap()) = createElement("li", attributes)
 }
 
 fun Element.button(type: ButtonType = ButtonType.button, autofocus: Boolean? = null, disabled: Boolean? = null): ButtonElement {
@@ -105,7 +89,7 @@ fun Element.button(type: ButtonType = ButtonType.button, autofocus: Boolean? = n
     return ButtonElement(createElement("button", attributes))
 }
 
-class ButtonElement(val wrapped: Element) : Element(wrapped.receiver, wrapped.jsExpression) {
+class ButtonElement(val wrapped: Element) : Element(wrapped) {
 
 }
 
diff --git a/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/input.kt b/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/input.kt
new file mode 100644
index 0000000000..b5691735bc
--- /dev/null
+++ b/src/main/kotlin/com/github/sanity/kweb/dom/element/creation/input.kt
@@ -0,0 +1,25 @@
+package com.github.sanity.kweb.dom.element.creation
+
+import com.github.salomonbrys.kotson.toJson
+import com.github.sanity.kweb.dom.element.Element
+import java.util.concurrent.CompletableFuture
+
+fun Element.input(type: InputType? = null, name: String? = null, initialValue: String? = null, size: Int? = null, attributes: Map<String, Any> = attr): InputElement {
+    return InputElement(createElement("input", attributes
+            .set("type", type?.name)
+            .set("name", name)
+            .set("value", initialValue)
+            .set("size", size)
+    ))
+}
+
+fun Element.label(attributes: Map<String, Any> = attr) = createElement("label", attributes)
+
+class InputElement(val element: Element) : Element(element) {
+    fun getValue(): CompletableFuture<String> = element.evaluate("$jsExpression.value", { s: String -> s }) ?: throw RuntimeException("Not sure why .evaluate() would return null")
+    fun setValue(newValue: String) = element.receiver.execute("$jsExpression.value=${newValue.toJson()}")
+}
+
+enum class InputType {
+    button, checkbox, color, date, datetime, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week
+}
\ No newline at end of file
diff --git a/src/main/kotlin/com/github/sanity/kweb/dom/element/events/ONReceiver.kt b/src/main/kotlin/com/github/sanity/kweb/dom/element/events/ONReceiver.kt
index 5494efb11a..174d68b0a0 100644
--- a/src/main/kotlin/com/github/sanity/kweb/dom/element/events/ONReceiver.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/dom/element/events/ONReceiver.kt
@@ -16,6 +16,8 @@ class ONReceiver(private val parent: Element) : Element(parent.receiver, parent.
     fun mouseover(rh: RootReceiver.() -> Unit) = event("mouseover", rh)
     fun mouseout(rh: RootReceiver.() -> Unit) = event("mouseout", rh)
     fun keydown(rh: RootReceiver.() -> Unit) = event("keydown", rh)
+    fun keypress(rh: RootReceiver.() -> Unit) = event("keypress", rh)
+    fun keyup(rh: RootReceiver.() -> Unit) = event("keyup", rh)
     fun load(rh: RootReceiver.() -> Unit) = event("load", rh)
     // TODO: Add the rest http://www.w3schools.com/jsref/dom_obj_event.asp
 
diff --git a/src/main/kotlin/com/github/sanity/kweb/dom/element/modification/modification.kt b/src/main/kotlin/com/github/sanity/kweb/dom/element/modification/modification.kt
index e714785ed1..45b30c1220 100644
--- a/src/main/kotlin/com/github/sanity/kweb/dom/element/modification/modification.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/dom/element/modification/modification.kt
@@ -24,10 +24,12 @@ import com.github.sanity.kweb.toJson
 // TODO: These should probably be accessed via a field like element.attr[GlobalAttributes.hidden], possibly
 // TODO: using generics to ensure the correct return-type
 
-fun Element.setAttribute(name: String, value: Any): Element {
-    execute("$jsExpression.setAttribute(\"${name.escapeEcma()}\", ${value.toJson()});")
-    if (name == "id") {
-        jsExpression = "document.getElementById(${value.toJson()})"
+fun Element.setAttribute(name: String, value: Any?): Element {
+    if (value != null) {
+        execute("$jsExpression.setAttribute(\"${name.escapeEcma()}\", ${value.toJson()});")
+        if (name == "id") {
+            jsExpression = "document.getElementById(${value.toJson()})"
+        }
     }
     return this
 }
@@ -42,17 +44,34 @@ fun Element.setClasses(vararg value: String): Element {
     return this
 }
 
-fun Element.addClasses(vararg classes: String): Element {
-    for (class_ in classes) {
-        if (class_.contains(' ')) {
-            throw RuntimeException("Class names must not contain spaces")
+fun Element.addClasses(vararg classes: String, onlyIf : Boolean = true): Element {
+    if (onlyIf) {
+        for (class_ in classes) {
+            if (class_.contains(' ')) {
+                throw RuntimeException("Class names must not contain spaces")
+            }
+            execute("addClass($jsExpression, ${class_.toJson()});")
         }
-        execute("addClass($jsExpression, ${class_.toJson()});")
     }
     return this
 }
 
+fun Element.removeChildren(): Element {
+    execute("""
+        while ($jsExpression.firstChild) {
+            $jsExpression.removeChild($jsExpression.firstChild);
+        }
+     """.trimIndent())
+    return this
+}
+
 fun Element.setText(value: String): Element {
+    removeChildren()
+    addText(value)
+    return this
+}
+
+fun Element.addText(value: String): Element {
     execute("""
                 {
                     var ntn=document.createTextNode("${value.escapeEcma()}");
diff --git a/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/MaterialDesignLitePlugin.kt b/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/MaterialDesignLitePlugin.kt
index a82d086cfb..7896c5f9ca 100644
--- a/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/MaterialDesignLitePlugin.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/MaterialDesignLitePlugin.kt
@@ -1,11 +1,8 @@
 package com.github.sanity.kweb.plugins.materialdesignlite
 
 import com.github.sanity.kweb.dom.element.Element
-import com.github.sanity.kweb.dom.element.creation.*
-import com.github.sanity.kweb.dom.element.modification.addClasses
 import com.github.sanity.kweb.plugins.KWebPlugin
 import com.github.sanity.kweb.plugins.materialdesignlite.MaterialDesignLitePlugin.MDLColor.*
-import java.util.*
 
 /**
  * Created by ian on 1/13/17.
@@ -56,31 +53,5 @@ val materialDesignLite = com.github.sanity.kweb.plugins.materialdesignlite.Mater
 val Element.mdl get() = MDLElement(this)
 
 class MDLElement(val element: Element) : Element(element) {
-    fun drawerLayout(): MDLDrawerLayoutElement = MDLDrawerLayoutElement(element.div().div(attr.classes("mdl-layout", "mdl-js-layout", "mdl-layout--fixed-drawer")))
 
 }
-
-class MDLDrawerLayoutElement(val element: DIVElement) : DIVElement(element) {
-    fun drawer(attributes: Map<String, Any> = HashMap()) = MDLDrawerElement(element.div(attributes.classes("mdl-layout__drawer")))
-
-    fun content(attributes: Map<String, Any> = HashMap()) = element.main(attributes.classes("mdl-layout__content")).div(attr.classes("page-content"))
-}
-
-class MDLDrawerElement(val element: Element) : Element(element) {
-    fun title(): Element = element.span(attr.classes("mdl-layout-title"))
-
-    fun nav(): MDLNavElement = MDLNavElement(element.nav(attr.classes("mdl-navigation")))
-}
-
-class MDLNavElement(val element: Element) : Element(element) {
-    fun link(href: String? = null, attributes: Map<String, Any> = Collections.emptyMap()) = element.a(href, attributes = attributes.classes("mdl-navigation__link"))
-}
-
-fun Element.typography(style: TypographyStyles): Element {
-    addClasses("mdl-typography--" + style.classSubstring)
-    return this
-}
-
-enum class TypographyStyles(val classSubstring: String) {
-    display3("display-3")
-}
\ No newline at end of file
diff --git a/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/badges/badges.kt b/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/badges/badges.kt
new file mode 100644
index 0000000000..8fee5f0da5
--- /dev/null
+++ b/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/badges/badges.kt
@@ -0,0 +1,16 @@
+package com.github.sanity.kweb.plugins.materialdesignlite.badges
+
+import com.github.sanity.kweb.dom.element.Element
+import com.github.sanity.kweb.dom.element.modification.addClasses
+import com.github.sanity.kweb.dom.element.modification.setAttribute
+import com.github.sanity.kweb.plugins.materialdesignlite.MDLElement
+
+/**
+ * Created by ian on 1/21/17.
+ */
+
+fun MDLElement.badge(descriptor: String? = null, overlap: Boolean = false): Element {
+    return addClasses("mdl-badge")
+            .addClasses("mdl-badge--overlap", onlyIf = overlap)
+            .setAttribute("data-badge", descriptor)
+}
\ No newline at end of file
diff --git a/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/layout/layout.kt b/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/layout/layout.kt
index 9e0f300d3f..13cebd590e 100644
--- a/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/layout/layout.kt
+++ b/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/layout/layout.kt
@@ -1,5 +1,28 @@
 package com.github.sanity.kweb.plugins.materialdesignlite.layout
 
+import com.github.sanity.kweb.dom.element.Element
+import com.github.sanity.kweb.dom.element.creation.*
+import com.github.sanity.kweb.plugins.materialdesignlite.MDLElement
+import java.util.*
+
 /**
- * Created by ian on 1/15/17.
+ * See [here](https://getmdl.io/components/index.html#layout-section)
  */
+
+fun MDLElement.drawerLayout(): MDLDrawerLayoutElement = MDLDrawerLayoutElement(element.div().div(attr.classes("mdl-layout", "mdl-js-layout", "mdl-layout--fixed-drawer")))
+
+class MDLDrawerLayoutElement(val element: DIVElement) : DIVElement(element) {
+    fun drawer(attributes: Map<String, Any> = HashMap()) = MDLDrawerElement(element.div(attributes.classes("mdl-layout__drawer")))
+
+    fun content(attributes: Map<String, Any> = HashMap()) = element.main(attributes.classes("mdl-layout__content")).div(attr.classes("page-content"))
+}
+
+class MDLDrawerElement(val element: Element) : Element(element) {
+    fun title(): Element = element.span(attr.classes("mdl-layout-title"))
+
+    fun nav(): MDLNavElement = MDLNavElement(element.nav(attr.classes("mdl-navigation")))
+}
+
+class MDLNavElement(val element: Element) : Element(element) {
+    fun link(href: String? = null, attributes: Map<String, Any> = Collections.emptyMap()) = element.a(href, attributes = attributes.classes("mdl-navigation__link"))
+}
\ No newline at end of file
diff --git a/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/textFields/textFields.kt b/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/textFields/textFields.kt
new file mode 100644
index 0000000000..1ed531340d
--- /dev/null
+++ b/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/textFields/textFields.kt
@@ -0,0 +1,30 @@
+package com.github.sanity.kweb.plugins.materialdesignlite.textFields
+
+import com.github.sanity.kweb.dom.element.Element
+import com.github.sanity.kweb.dom.element.creation.*
+import com.github.sanity.kweb.plugins.materialdesignlite.MDLElement
+
+/**
+ * Created by ian on 1/21/17.
+ */
+
+
+fun MDLElement.textField(floatingLabel: Boolean = false, expandable: Boolean = false, disabled: Boolean = false, isInvalid: Boolean = false): TextFieldElement =
+        TextFieldElement(div(attr.classes("mdl-textfield", "mdl-js-textfield")
+                .classes("mdl-textfield--floating-label", onlyIf = floatingLabel)
+                .classes("mdl-textfield--expandable", onlyIf = expandable)
+                .classes("is-invalid", onlyIf = isInvalid)
+                .set("disabled", disabled)))
+
+
+class TextFieldElement internal constructor(val e: Element) : Element(e) {
+    fun input(type: InputType? = null, pattern: String? = null, attributes: MutableMap<String, Any> = attr)
+            = e.input(type, attributes = attributes.classes("mdl-textfield__input").set("pattern", pattern))
+
+    fun label(forInput: InputElement, attributes: MutableMap<String, Any> = attr)
+            = e.label(attributes
+            .classes("mdl-textfield__label")
+            .set("for", forInput.id ?: throw RuntimeException("Input element $forInput must specify an id to be referenced by a label")))
+
+    fun error(attributes: MutableMap<String, Any> = attr) = span(attributes.classes("mdl-textfield__error"))
+}
diff --git a/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/typography/typography.kt b/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/typography/typography.kt
new file mode 100644
index 0000000000..af7c64f9d4
--- /dev/null
+++ b/src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/typography/typography.kt
@@ -0,0 +1,24 @@
+package com.github.sanity.kweb.plugins.materialdesignlite.typography
+
+import com.github.sanity.kweb.dom.element.Element
+import com.github.sanity.kweb.dom.element.modification.addClasses
+import com.github.sanity.kweb.plugins.materialdesignlite.materialDesignLite
+
+/**
+ * Created by ian on 1/21/17.
+ */
+
+fun Element.typography(style: TypographyStyles): Element {
+    require(materialDesignLite::class)
+    addClasses("mdl-typography--" + style.classSubstring)
+    return this
+}
+
+enum class TypographyStyles(val classSubstring: String) {
+    display4("display-4"),
+    display3("display-3"),
+    display2("display-2"),
+    display1("display-1"),
+    headline("headline"),
+    title("title")
+}
\ No newline at end of file
diff --git a/src/main/resources/com/github/sanity/kweb/kweb_bootstrap.html b/src/main/resources/com/github/sanity/kweb/kweb_bootstrap.html
index f35d0ba572..4d6b883672 100644
--- a/src/main/resources/com/github/sanity/kweb/kweb_bootstrap.html
+++ b/src/main/resources/com/github/sanity/kweb/kweb_bootstrap.html
@@ -30,6 +30,7 @@
                     }
                     var execute = msg["execute"];
                     if (execute !== undefined) {
+                        console.log("Executing: " + execute["js"])
                         eval(execute["js"])
                     }
                     var evaluate = msg["evaluate"];