diff --git a/.gitignore b/.gitignore index 031ff87..105004f 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ elm-stuff elm.js index.html docs.json +documentation.json diff --git a/README.md b/README.md index 8a848c1..96c4ca0 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ 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. +*CAUTION*! This is an early and incomplete prototype. Use at your own risk. ### Get Started @@ -26,6 +26,19 @@ The library has a tiny native component (for measuring geometry of rendered know no better way than to copy `Material.elm` and `Material/*` to your own project. +### Embedding in your own HTML. + +Initial page load of the demo will produce a flicker, which can only be +avoided if you set up the MDL css to load before elm does. Use the file +`page.html` as a template. To build the demo in this mode, comment out +[line 153 in `examples/Demo.elm`](https://github.com/debois/elm-mdl/blob/master/examples/Demo.elm#L153) +and build the demo like this: + + > elm-make examples/Demo.elm --output elm.js + +This will produce a file `elm.js`. Open the file +[`page.html`](https://raw.githubusercontent.com/debois/elm-mdl/master/page.html) in your +browser; this file will set up MDL css and load `elm.js`. ### Contribute diff --git a/examples/Demo.elm b/examples/Demo.elm index 21cf352..3fedec5 100644 --- a/examples/Demo.elm +++ b/examples/Demo.elm @@ -147,6 +147,9 @@ view addr model = , tabs = Just tabTitles , main = [ top ] } + {- The following line is not needed when you manually set up + your html, as done with page.html. + -} |> Material.topWithColors Material.Teal Material.Red diff --git a/src/Material.elm b/src/Material.elm index f02be66..93e4792 100644 --- a/src/Material.elm +++ b/src/Material.elm @@ -5,6 +5,8 @@ module Material {-| Material Design component library for Elm based on Google's [Material Design Lite](https://www.getmdl.io/). +This file contains CSS loaders only. + @docs Color, topWithColors, top -} @@ -97,6 +99,11 @@ to preview combinations. Please be aware that Grey, Blue Grey, and Brown cannot be secondary colors. If you choose them as such anyway, you will get the default theme. +Using this top-level container is not recommended, as most browsers will load +css concurrently with rendering the initial page, which will produce a flicker +on page load. The container is included only to provide an option to get started +quickly and for use with elm-reactor. + -} topWithColors : Color -> Color -> Html -> Html topWithColors primary accent content = diff --git a/src/Material/Ripple.elm b/src/Material/Ripple.elm index f5bb16a..79f39bf 100644 --- a/src/Material/Ripple.elm +++ b/src/Material/Ripple.elm @@ -6,7 +6,7 @@ import Html.Events import Json.Decode as Json exposing ((:=), at) import Effects exposing (Effects, tick, none) -import Material.Aux exposing (Rectangle, rectangleDecoder, effect) +import Material.Aux exposing (effect) import DOM