diff --git a/.gitignore b/.gitignore
index 4ad753b..7b256f2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
elm-stuff
.*.sw?
+elm.js
+index.html
diff --git a/Demo/Textfields.elm b/Demo/Textfields.elm
new file mode 100644
index 0000000..e5634b0
--- /dev/null
+++ b/Demo/Textfields.elm
@@ -0,0 +1,52 @@
+module Demo.Textfields where
+
+import Array exposing (Array)
+import Html exposing (Html)
+
+import Material.Textfield as Textfield
+import Material.Grid as Grid exposing (..)
+
+
+type alias Model = Array Textfield.Model
+
+
+model : Model
+model =
+ let t0 = Textfield.model in
+ [ t0
+ , { t0 | label = Just { text = "Labelled", float = False } }
+ , { t0 | label = Just { text = "Floating label", float = True }}
+ , { t0
+ | label = Just { text = "Disabled", float = False }
+ , isDisabled = True
+ }
+ , { t0
+ | label = Just { text = "With error and value", float = False }
+ , error = Just "The input is wrong!"
+ , value = "Incorrect input"
+ }
+ ]
+ |> Array.fromList
+
+
+type Action =
+ Field Int Textfield.Action
+
+
+update : Action -> Model -> Model
+update (Field k action) fields =
+ Array.get k fields
+ |> Maybe.map (Textfield.update action)
+ |> Maybe.map (\field' -> Array.set k field' fields)
+ |> Maybe.withDefault fields
+
+
+view : Signal.Address Action -> Model -> Html
+view addr model =
+ model
+ |> Array.indexedMap (\k field ->
+ Textfield.view (Signal.forwardTo addr (Field k)) field
+ )
+ |> Array.toList
+ |> List.map (\x -> cell [size All 3] [x])
+ |> grid
diff --git a/Native/Material.js b/Native/Material.js
new file mode 100644
index 0000000..a6efe64
--- /dev/null
+++ b/Native/Material.js
@@ -0,0 +1,50 @@
+/*
+ * Helper functions for accessing Google Material Design lite.
+ */
+
+// ELM Boilerplate
+Elm.Native.Material = {};
+Elm.Native.Material.make = function(elm) {
+ elm.Native = elm.Native || {};
+ elm.Native.Material = elm.Native.Material || {};
+ if (elm.Native.Material.values) {
+ return elm.Native.Material.values;
+ }
+
+ var Signal = Elm.Native.Signal.make(elm);
+ var Json = Elm.Native.Json.make(elm);
+
+ function property(key, value) {
+ return { key: key, value: value };
+ }
+
+ function on(name, options, decoder, createMessage)
+ {
+ function eventHandler(event)
+ {
+ if (options.withGeometry)
+ {
+ event.boundingClientRect = event.currentTarget.getBoundingClientRect();
+ }
+ var value = A2(Json.runDecoderValue, decoder, event);
+ if (value.ctor === 'Ok')
+ {
+ if (options.stopPropagation)
+ {
+ event.stopPropagation();
+ }
+ if (options.preventDefault)
+ {
+ event.preventDefault();
+ }
+ Signal.sendMessage(createMessage(value._0));
+ }
+ }
+
+ return property('on' + name, eventHandler);
+ }
+
+ return elm.Native.Material.values = {
+ on : F4(on)
+ }
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3f64018
--- /dev/null
+++ b/README.md
@@ -0,0 +1,55 @@
+# Material Design Components in Elm
+
+Port of Google's
+[Material Design Lite](https://www.getmdl.io/)
+CSS/JS implementation of the
+[Material Design Specification](https://www.google.com/design/spec/material-design/introduction.html).
+
+MDL is implemented primarily through CSS, with a little bit of Javascript
+adding and removing CSS classes in response to DOM events. This port
+re-implements the CSS parts in Elm, but relies on the CSS of MDL verbatim.
+
+*CAUTION* This is an early and incomplete prototype. Use at your own risk.
+
+
+### Get Started
+
+Build the demo:
+
+ > elm-make Demo.elm
+
+This will construct a file `index.html`; open that in your browser.
+
+The library has a tiny native component (for measuring geometry of rendered
+ elements, a necessity for re-implementing MDL ripple-animations), and so
+ cannot be in the elm-package library. If you wish to use the library, I
+ know no better way than to copy `Material.elm` and `Material/*` to your
+ own project.
+
+
+### Contribute
+
+Please do! The easiest place to start is to add more CSS-only components. These require no porting of Javascript, just putting together css-classes as instructed by the [MDL Component Documentation](https://www.getmdl.io/components/index.html). Take a look at
+
+ - [Badges](https://www.getmdl.io/components/index.html#badges-section)
+ - [Cards](https://www.getmdl.io/components/index.html#cards-section)
+ - [Dialogs](https://www.getmdl.io/components/index.html#dialog-section)
+ - [Footers](https://www.getmdl.io/components/index.html#layout-section/footer)
+ - [Lists](https://www.getmdl.io/components/index.html#lists-section)
+ - [Shadows](https://github.com/google/material-design-lite/tree/v1.1.2/src/shadow)
+
+The remaining components, use Javascript
+in various ways. Toggles seem to use Javascript exclusively to insert ripple-animations and __might__ be easy to implement using the `Ripple.elm`
+component:
+
+ - [Toggles](https://www.getmdl.io/components/index.html#toggles-section)
+
+The rest I haven't looked at; they may or may not be straightforward to port
+to Elm.
+
+ - [Tables](https://www.getmdl.io/components/index.html#tables-section)
+ - [Spinners](https://www.getmdl.io/components/index.html#loading-section)
+ - [Sliders](https://www.getmdl.io/components/index.html#sliders-section)
+ - [Menus](https://www.getmdl.io/components/index.html#menus-section)
+ - [Snackbars](https://www.getmdl.io/components/index.html#snackbar-section)
+ - [Tooltips](https://www.getmdl.io/components/index.html#tooltips-section)
diff --git a/components.html b/components.html
deleted file mode 100644
index 56dc12b..0000000
--- a/components.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
- elm-mdl-demo
-
-
-
-
-
-
-
-
-
-
-
-