Partial upgrade of Demo to use Style

Makefile

@@ -1,7 +1,7 @@
 PAGES=../elm-mdl-gh-pages
 
 elm.js: 
-	elm-make examples/Demo.elm --output elm.js
+	elm-make examples/Demo.elm --warn --output elm.js
 
 pages : 
 	elm-make examples/Demo.elm --output $(PAGES)/elm.js

examples/Demo.elm

@@ -125,8 +125,10 @@ view addr model =
   let top =
         div
           [ style
-            [ ("margin", "auto")
-            , ("width", "90%")
+            [ ("max-width", "55rem")
+            , ("margin", "auto")
+            , ("padding-left", "5%")
+            , ("padding-right", "5%")
             ]
           ]
           ((Array.get model.layout.selectedTab tabViews

examples/Demo/Grid.elm

@@ -1,38 +1,52 @@
 module Demo.Grid where
 
 import Material.Grid exposing (..)
+import Material.Style exposing (Style, css)
+
 import Html exposing (..)
 
+-- Cell styling
+
+style : Int -> List Style
+style h = 
+  [ css "text-sizing" "border-box"
+  , css "background-color" "#BDBDBD"
+  , css "height" (toString h ++ "px")
+  , css "padding-left" "8px"
+  , css "padding-top" "4px"
+  , css "color" "white"
+  ]
+
+-- Cell variants
+
+democell : Int -> List Style -> List Html -> Cell
+democell k styling = 
+  cell <| List.concat [style k, styling] 
+  
+small : List Style -> List Html -> Cell
+small = democell 50
+
+std : List Style -> List Html -> Cell
+std = democell 200
+
+-- Grid 
 
 view : List Html
 view =
   [ [1..12]
-    |> List.map (\i -> cell [size All 1] [text "1"])
+    |> List.map (\i -> small [size All 1] [text "1"])
     |> grid []
   , [1 .. 3]
-    |> List.map (\i -> cell [size All 4] [text <| "4"])
+    |> List.map (\i -> std [size All 4] [text <| "4"])
     |> grid []
-  , [ cell [size All 6] [text "6"]
-    , cell [size All 4] [text "4"]
-    , cell [size All 2] [text "2"]
+  , [ std [size All 6] [text "6"]
+    , std [size All 4] [text "4"]
+    , std [size All 2] [text "2"]
     ] |> grid []
-  , [ cell [size All 6, size Tablet 8] [text "6 (8 tablet)"]
-    , cell [size All 4, size Tablet 6] [text "4 (6 tablet)"]
-    , cell [size All 2, size Phone 4] [text "2 (4 phone)"]
+  , [ std [size All 6, size Tablet 8] [text "6 (8 tablet)"]
+    , std [size All 4, size Tablet 6] [text "4 (6 tablet)"]
+    , std [size All 2, size Phone 4] [text "2 (4 phone)"]
     ] |> grid []
-  , Html.node "style" [] [text """
-      .mdl-cell {
-        text-sizing: border-box;
-        background-color: #BDBDBD;
-        height: 200px;
-        padding-left: 8px;
-        padding-top: 4px;
-        color: white;
-      }
-      .mdl-grid:first-of-type .mdl-cell {
-        height: 50px;
-      }
-    """]
   ]
 
 

examples/Demo/Snackbar.elm

@@ -173,7 +173,7 @@ introStyle = """
   blockquote:after { content: none; }
   blockquote {
     border-left-style: solid;
-    border-width: 3px;
+    border-width: 1px;
     padding-left: 1.3ex;
     border-color: rgb(255,82,82);
       /* TODO: Really need a way to specify "secondary color" in
@@ -202,7 +202,7 @@ From the
  - [Demo source code](https://github.com/debois/elm-mdl/blob/master/examples/Demo/Snackbar.elm)
  - [elm-mdl package documentation](http://package.elm-lang.org/packages/debois/elm-mdl/1.0.1/Material-Snackbar)
  - [Material Design Specification](https://www.google.com/design/spec/components/snackbars-toasts.html)
- - [Material Design Lite documentation](https://www.getmdl.io/components/index.html#snackbar-section).
+ - [Material Design Lite documentation](https://www.getmdl.io/components/index.html#snackbar-section)
 
 #### Demo
 

src/Material/Grid.elm

@@ -1,6 +1,6 @@
 module Material.Grid
   ( grid, noSpacing, maxWidth
-  , cell
+  , Cell, cell
   , Device(..)
   , Align(..)
   , size
@@ -35,7 +35,7 @@ Example use:
 
     top : Html
     top =
-      grid
+      grid []
         [ cell [ size All 4 ]
             [ h4 [] [text "Cell 1"]
             ]
@@ -60,7 +60,7 @@ Example use:
 Cells are configured with a `List Style`; this configuration dictates the
 size, offset, etc. of the cell. 
 
-@docs cell, Device, size, offset, Align, align, hide, order
+@docs cell, Cell, Device, size, offset, Align, align, hide, order
 -}
 
 
@@ -69,7 +69,6 @@ size, offset, etc. of the cell.
 
 
 import Html exposing (..)
-import Html.Attributes exposing (..)
 
 import Material.Helpers exposing (clip, filter)
 import Material.Style as Style exposing (Style, cs, styled)
@@ -99,7 +98,7 @@ encapsulates a screen size.)
 type Device = All | Desktop | Tablet | Phone
 
 
-{- Opaque cell type.
+{-| Opaque cell type.
 -}
 type Cell = Cell Html
 
@@ -144,19 +143,20 @@ offset device k =
     "mdl-cell--" ++ toString c ++ "-offset" ++ suffix device |> cs
 
 
-{-| Vertical alignment of cells; use with `align`.
+{-| Alignment of cell contents; use with `align`.
 -}
-type Align = Top | Middle | Bottom
+type Align = Top | Middle | Bottom 
 
 
 {-| Specify vertical cell alignment. See `Align`.
 -}
 align : Align -> Style
 align a =
-  cs <| case a of
-    Top -> "mdl-cell--top"
-    Middle -> "mdl-cell--middle"
-    Bottom -> "mdl-cell--bottom"
+  case a of 
+    Top -> cs "mdl-cell--top"
+    Middle -> cs "mdl-cell--middle"
+    Bottom -> cs "mdl-cell--bottom"
+
 
 
 {-| Specify that a cell should be hidden on given `Device`.