Added styling to Grid, Buttons.

Makefile

@@ -10,8 +10,11 @@ pages :
 clean :
 	rm -f elm.js index.html
 
+veryclean :
+	rm -rf elm-stuff/build-artifacts
+
 distclean : clean
 	rm -rf elm-stuff
 
 
-.PHONY : pages elm.js clean distclean
+.PHONY : pages elm.js clean veryclean distclean

examples/Demo.elm

@@ -146,7 +146,7 @@ view addr model =
        your html, as done with page.html. Removing it will then
        fix the flicker you see on load.
     -}
-    |> Material.topWithColors Color.Teal Color.Red
+    |> Material.topWithScheme Color.Teal Color.Red
 
 
 init : (Model, Effects.Effects Action)

examples/Demo/Buttons.elm

@@ -8,6 +8,7 @@ import Effects
 import Material.Button as Button exposing (..)
 import Material.Grid as Grid
 import Material.Icon as Icon
+import Material.Style exposing (Style)
 
 
 -- MODEL
@@ -15,48 +16,32 @@ import Material.Icon as Icon
 
 type alias Index = (Int, Int)
 
-
-tabulate' : Int -> List a -> List (Int, a)
-tabulate' i ys =
-  case ys of
-    [] -> []
-    y :: ys -> (i, y) :: tabulate' (i+1) ys
-
-
-tabulate : List a -> List (Int, a)
-tabulate = tabulate' 0
-
-
 type alias View =
-  Signal.Address Button.Action -> Button.Model -> Coloring -> List Html -> Html
+  Signal.Address Button.Action -> Button.Model -> List Style -> List Html -> Html
 
 type alias View' =
   Signal.Address Button.Action -> Button.Model -> Html
 
 
-view' : View -> Coloring -> Html -> Signal.Address Button.Action -> Button.Model -> Html
+view' : View -> List Style -> Html -> Signal.Address Button.Action -> Button.Model -> Html
 view' view coloring elem addr model =
   view addr model coloring [elem]
 
 
-describe : String -> Bool -> Coloring -> String
+describe : String -> Bool -> String -> String
-describe kind ripple coloring =
+describe kind ripple c =
-  let
-    c =
-      case coloring of
-        Plain -> "plain"
-        Colored -> "colored"
-        Primary -> "primary"
-        Accent -> "accent"
-  in
     kind ++ ", " ++ c ++ if ripple then " w/ripple" else ""
 
 
 row : (String, Html, View) -> Bool -> List (Int, (Bool, String, View'))
 row (kind, elem, v) ripple =
-  [ Plain, Colored, Primary, Accent ]
+  [ ("plain", [])
-  |> List.map (\c -> (ripple, describe kind ripple c, view' v c elem))
+  , ("colored", [Button.colored])
-  |> tabulate
+  , ("primary", [Button.primary])
+  , ("accent", [Button.accent]) 
+  ]
+  |> List.map (\(d,c) -> (ripple, describe kind ripple d, view' v c elem))
+  |> List.indexedMap (,)
 
 
 buttons : List (List (Index, (Bool, String, View')))
@@ -68,8 +53,7 @@ buttons =
   , ("icon", Icon.i "flight_land", Button.icon)
   ]
   |> List.concatMap (\a -> [row a False, row a True])
-  |> tabulate
+  |> List.indexedMap (\i r -> List.map (\(j, x) -> ((i,j), x)) r)
-  |> List.map (\(i, row) -> List.map (\(j, x) -> ((i,j), x)) row)
 
 
 model : Model
@@ -141,4 +125,4 @@ view addr model =
         ]
     )
   )
-  |> Grid.grid
+  |> Grid.grid []

examples/Demo/Grid.elm

@@ -8,18 +8,18 @@ view : List Html
 view =
   [ [1..12]
     |> List.map (\i -> cell [size All 1] [text "1"])
-    |> grid
+    |> grid []
   , [1 .. 3]
     |> List.map (\i -> cell [size All 4] [text <| "4"])
-    |> grid
+    |> grid []
   , [ cell [size All 6] [text "6"]
     , cell [size All 4] [text "4"]
     , cell [size All 2] [text "2"]
-    ] |> grid
+    ] |> 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)"]
-    ] |> grid
+    ] |> grid []
   , Html.node "style" [] [text """
       .mdl-cell {
         text-sizing: border-box;
@@ -34,3 +34,5 @@ view =
       }
     """]
   ]
+
+

examples/Demo/Snackbar.elm

@@ -4,10 +4,11 @@ import Effects exposing (Effects, none)
 import Html exposing (..)
 import Html.Attributes exposing (class, style, key)
 import Array exposing (Array)
-import String
 
 import Markdown
 
+import Material.Color as Color
+import Material.Style exposing (styled, cs)
 import Material.Snackbar as Snackbar
 import Material.Button as Button exposing (Action(..))
 import Material.Grid exposing (..)
@@ -102,44 +103,25 @@ update action model =
 -- VIEW
 
 
--- This should be supported by the library somehow.
+clickView : Model -> Int -> Html
-colors : Array String
+clickView model k =
-colors =
-  [ "indigo"
-  , "blue"
-  , "light-blue"
-  , "cyan"
-  , "teal"
-  , "green"
-  , "light-green"
-  , "lime"
-  , "yellow"
-  , "amber"
-  , "orange"
-  , "brown"
-  , "blue-grey"
-  , "grey"
-  , "deep-orange"
-  , "red"
-  , "pink"
-  , "purple"
-  , "deep-purple"
-  ] |> Array.fromList
-
-
-clickView : Int -> Html
-clickView k =
   let
     color =
-      Array.get ((k + 4) % Array.length colors) colors
+      Array.get ((k + 4) % Array.length Color.palette) Color.palette
-        |> Maybe.withDefault "blue"
+        |> Maybe.withDefault Color.Teal
+        |> flip Color.color Color.S500
+
+    selected =
+      (k == model.snackbar.seq - 1) &&
+        (Snackbar.isActive model.snackbar /= Nothing)
   in
-    div
+    styled div
-      [ [ "mdl-color--" ++ color
+      [ Color.background color
-        , "mdl-color-text--primary-contrast"
+      , Color.text Color.primaryContrast
-        , "mdl-shadow--8dp"
+      -- TODO. Should have shadow styles someplace. 
-        ] |> String.join " " |> class
+      , cs <| "mdl-shadow--" ++ if selected then "8dp" else "2dp"
-      , style
+      ] 
+      [ style
           [ ("margin-right", "3ex")
           , ("margin-bottom", "3ex")
           , ("padding", "1.5ex")
@@ -147,36 +129,39 @@ clickView k =
           , ("border-radius", "2px")
           , ("display", "inline-block")
           , ("text-align", "center")
+          , ("transition", "box-shadow 333ms ease-in-out 0s")
           ]
       , key (toString k)
       ]
       [ text <| toString k ]
 
 
+
 view : Signal.Address Action -> Model -> Html
 view addr model =
   div []
     [ intro
-    , grid
+    , grid []
         -- TODO. Buttons should be centered. Desperately need to be able
         -- to add css/classes to top-level element of components (div
         -- in grid, button in button, div in textfield etc.)
         [ cell [ size All 2, size Phone 2, align Top ]
             [ Button.raised
                 (Signal.forwardTo addr ToastButtonAction)
-                model.toastButton Button.Plain
+                model.toastButton 
+                []
                 [ text "Toast" ]
             ]
         , cell [ size All 2, size Phone 2, align Top ]
             [ Button.raised
                 (Signal.forwardTo addr SnackbarButtonAction)
                 model.snackbarButton
-                Button.Plain
+                []
                 [ text "Snackbar" ]
             ]
         , cell
             [ size Desktop 7, size Tablet 3, size Phone 12, align Top ]
-            (model.clicked |> List.reverse |> List.map clickView)
+            (model.clicked |> List.reverse |> List.map (clickView model))
         ]
     , Snackbar.view (Signal.forwardTo addr SnackbarAction) model.snackbar
     ]

examples/Demo/Textfields.elm

@@ -49,4 +49,4 @@ view addr model =
   )
   |> Array.toList
   |> List.map (\x -> cell [size All 3] [x])
-  |> grid
+  |> grid []

src/Material.elm

@@ -1,13 +1,16 @@
 module Material
-  ( topWithColors, top
+  ( topWithScheme, top
   , Updater', Updater, lift, lift'
   ) where
 
 {-| Material Design component library for Elm based on Google's
 [Material Design Lite](https://www.getmdl.io/).
 
+This module contains only initial CSS setup and convenience function for alleviating
+the pain of the missing component architecture in Elm. 
+
 # Loading CSS
-@docs topWithColors, top
+@docs topWithScheme, top
 
 # Component convienience
 @docs Updater', Updater, lift', lift
@@ -19,38 +22,30 @@ import Html exposing (..)
 import Html.Attributes exposing (..)
 import Effects exposing (..)
 
-import Material.Color exposing (..)
+import Material.Color exposing (Palette(..), Color)
 
 
-css : Color -> Color -> String
+
-css primary accent =
+scheme : Palette -> Palette -> String
-  let cssFile =
+scheme primary accent =
-    case accent of
+  [ "https://code.getmdl.io/1.1.2/" ++ Material.Color.scheme primary accent 
-      Grey -> ""
+  , "https://fonts.googleapis.com/icon?family=Material+Icons"
-      Brown -> ""
+  , "https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext"
-      BlueGrey -> ""
+  ]
-      Primary -> ""
+  |> List.map (\url -> "@import url(" ++ url ++ ");")
-      Accent -> ""
+  |> String.join "\n"
-      _ -> "." ++ cssName primary ++ "-" ++ cssName accent
-  in
-    [ "https://code.getmdl.io/1.1.1/material" ++ cssFile ++ ".min.css"
-    , "https://fonts.googleapis.com/icon?family=Material+Icons"
-    , "https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext"
-    ]
-    |> List.map (\url -> "@import url(" ++ url ++ ");")
-    |> String.join "\n"
 
 
 
 {-| Top-level container for Material components. This will force loading of
-Material Design Lite CSS files. Any component you use must be contained
+Material Design Lite CSS files Any component you use must be contained
 in this container, OR you must manually add something like the following to
 your .html file:
 
     <!-- MDL -->
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.min.css" />
+    <link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.min.css" />
 
 Supply primary and accent colors as parameters. Refer to the
 Material Design Lite [Custom CSS theme builder](https://www.getmdl.io/customize/index.html)
@@ -65,15 +60,15 @@ 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
+topWithScheme: Palette -> Palette -> Html -> Html
-topWithColors primary accent content =
+topWithScheme primary accent content =
   div [] <|
   {- Trick from Peter Damoc to load CSS outside of <head>.
      https://github.com/pdamoc/elm-mdl/blob/master/src/Mdl.elm#L63
    -}
   [ node "style"
     [ type' "text/css"]
-    [ text <| css primary accent]
+    [ Html.text <| scheme primary accent]
   , content
   ]
 
@@ -83,8 +78,7 @@ topWithColors primary accent content =
 top : Html -> Html
 top content =
   -- Force default color-scheme by picking an invalid combination.
-  topWithColors Grey Grey content
+  topWithScheme Grey Grey content
-
 
 
 

src/Material/Button.elm

@@ -1,7 +1,7 @@
 module Material.Button
   ( Model, model, Action(Click), update
-  , Coloring(..)
   , flat, raised, fab, minifab, icon
+  , Button, colored, primary, accent
   ) where
 
 {-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#buttons-section):
@@ -28,12 +28,15 @@ See also the
 # Component
 @docs Model, model, Action, update
 
+# Style
+@docs Button, colored, primary, accent
+
 # View
 Refer to the
 [Material Design Specification](https://www.google.com/design/spec/components/buttons.html)
 for details about what type of buttons are appropriate for which situations.
 
-@docs Coloring, flat, raised, fab, minifab, icon
+@docs flat, raised, fab, minifab, icon
 
 -}
 
@@ -41,8 +44,10 @@ import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick)
 import Effects exposing (Effects, none)
+import Signal exposing (Address, forwardTo)
 
 import Material.Helpers as Helpers
+import Material.Style exposing (Style, cs, cs', styled)
 import Material.Ripple as Ripple
 
 {-| MDL button.
@@ -100,40 +105,50 @@ update action model =
 -- VIEW
 
 
-{-| Coloring of a button. `Plain` respectively `Colored` is the button's
+{-| Type tag for button styles. 
-uncolored respectively colored defaults.
-`Primary` respectively `Accent` chooses a colored button with the indicated
-color.
 -}
-type Coloring
+type Button = X
-  = Plain
-  | Colored
-  | Primary
-  | Accent
 
 
-view : String -> Signal.Address Action -> Model -> Coloring -> List Html -> Html
+{-| Color button with primary or accent color depending on button type. 
-view kind addr model coloring html =
+-}
-  button
+colored : Style
-    [ classList
+colored = 
-      [ ("mdl-button", True)
+  cs "mdl-button--colored"
-      , ("mdl-js-button", True)
+
-      , ("mdl-js-ripple-effect", model /= S Nothing)
+
-      -- Color effect.
+{-| Color button with primary color.
-      , ("mdl-button--colored", coloring == Colored)
+-}
-      , ("mdl-button--primary", coloring == Primary)
+primary : Style
-      , ("mdl-button--accent",  coloring == Accent)
+primary = 
-      -- Kind.
+  cs "mdl-button--primary"
-      , (kind, kind /= "")
+
-      ]
+{-| Color button with accent color. 
-    , Helpers.blurOn "mouseup"
+-}
+accent : Style
+accent = 
+  cs "mdl-button--accent"
+
+
+{-| Component view. 
+-}
+view : String -> Address Action -> Model -> List Style -> List Html -> Html
+view kind addr model styling html =
+  styled button 
+    (  cs "mdl-button"
+    :: cs "mdl-js-button"
+    :: cs' "mdl-js-ripple-effect" (model /= S Nothing)
+    :: cs' kind (kind /= "")
+    :: styling
+    )
+    [ Helpers.blurOn "mouseup"
     , Helpers.blurOn "mouseleave"
     , onClick addr Click
     ]
     (case model of
       S (Just ripple) ->
         Ripple.view
-          (Signal.forwardTo addr Ripple)
+          (forwardTo addr Ripple)
           [ class "mdl-button__ripple-container"
           , Helpers.blurOn "mouseup" ]
           ripple
@@ -161,7 +176,7 @@ Example use (uncolored flat button, assuming properly setup model):
     flatButton = Button.flat addr model Button.Plain [text "Click me!"]
 
 -}
-flat : Signal.Address Action -> Model -> Coloring -> List Html -> Html
+flat : Address Action -> Model -> List Style -> List Html -> Html
 flat = view ""
 
 
@@ -182,7 +197,7 @@ Example use (colored raised button, assuming properly setup model):
     raisedButton = Button.raised addr model Button.Colored [text "Click me!"]
 
 -}
-raised : Signal.Address Action -> Model -> Coloring -> List Html -> Html
+raised : Address Action -> Model -> List Style -> List Html -> Html
 raised = view "mdl-button--raised"
 
 
@@ -208,13 +223,13 @@ Example use (colored with a '+' icon):
     fabButton : Html
     fabButton = fab addr model Colored [Icon.i "add"]
 -}
-fab : Signal.Address Action -> Model -> Coloring -> List Html -> Html
+fab : Address Action -> Model -> List Style -> List Html -> Html
 fab = view "mdl-button--fab"
 
 
 {-| Mini-sized variant of a Floating Action Button; refer to `fab`.
 -}
-minifab : Signal.Address Action -> Model -> Coloring -> List Html -> Html
+minifab : Address Action -> Model -> List Style -> List Html -> Html
 minifab = view "mdl-button--mini-fab"
 
 
@@ -230,5 +245,5 @@ Example use (no color, displaying a '+' icon):
     iconButton : Html
     iconButton = icon addr model Plain [Icon.i "add"]
 -}
-icon : Signal.Address Action -> Model -> Coloring -> List Html -> Html
+icon : Address Action -> Model -> List Style -> List Html -> Html
 icon = view "mdl-button--icon"

src/Material/Color.elm

@@ -1,24 +1,74 @@
 module Material.Color
-  ( Color(..)
+  ( Palette(..), palette
-  , cssName
+  , Shade(..), shades
+  , Color
+  , color
+  , white, black
+  , primary, primaryDark, primaryContrast
+  , accent, accentContrast
+  , background
+  , text
+  , scheme
   ) where
 
-{-| Fixed Material Design Lite color palette.
 
-@docs Color(..)
+{-| Material Design color palette.
 
-# Internals
+@docs Color
 
-These are used internally in the Material package and is likely not useful
+# Palette
-to you.
 
-@docs cssName : Color -> String
+From the
+[Material Design Specification](https://www.google.com/design/spec/style/color.html#color-color-palette):
+
+> The color palette starts with primary colors and fills in the spectrum to
+> create a complete and usable palette for Android, Web, and iOS. Google suggests
+> using the 500 colors as the primary colors in your app and the other colors as
+> accents colors.
+
+@docs Color, white, black, Palette, Shade, color
+
+# Color Schemes
+
+From the
+[Material Design Specification](https://www.google.com/design/spec/style/color.html#color-color-palette):
+
+> [The Material Design] palette comprises primary and accent colors that can be
+> used for illustration or to develop your brand colors. They’ve been designed
+> to work harmoniously with each other.  [...] Apps that don’t have existing
+> color schemes may select colors from the material design color palette. Limit
+> your selection of colors to three hues from the primary palette and one
+> accent color from the secondary palette.
+
+The Material Design Lite CSS supports this selection; you choose your primary
+and accent colors when loading MDL css; see
+`Material.top`. Many components can be instructed to take on one of the four hues
+mentioned above; below you'll find constructors for these scheme-dependent
+colors.
+
+@docs primary, primaryDark, primaryContrast, accent, accentContrast
+
+# Styles
+@docs background, text
+
+# Misc
+@docs palette, shades, scheme
 -}
 
 
+import Array exposing (Array)
+
+
+import Material.Style exposing (..)
+
+
+
+-- PALETTE
+
+
 {-| Color palette.
 -}
-type Color
+type Palette
   = Indigo
   | Blue
   | LightBlue
@@ -38,15 +88,37 @@ type Color
   | Pink
   | Purple
   | DeepPurple
-  -- Not actual colors
-  | Primary
-  | Accent
 
 
-{-| MDL CSS name of given color.
+{-| Color palette as array. Mostly useful for demos.
 -}
-cssName : Color -> String
+palette : Array Palette
-cssName color =
+palette =
+  Array.fromList
+    [ Indigo
+    , Blue
+    , LightBlue
+    , Cyan
+    , Teal
+    , Green
+    , LightGreen
+    , Lime
+    , Yellow
+    , Amber
+    , Orange
+    , Brown
+    , BlueGrey
+    , Grey
+    , DeepOrange
+    , Red
+    , Pink
+    , Purple
+    , DeepPurple
+    ]
+
+
+paletteName : Palette -> String
+paletteName color =
   case color of
     Indigo -> "indigo"
     Blue -> "blue"
@@ -67,5 +139,156 @@ cssName color =
     Pink -> "pink"
     Purple -> "purple"
     DeepPurple -> "deep-purple"
-    Primary -> "primary"
+
-    Accent -> "accent"
+
+{-|
+-}
+type Shade
+  = S50
+  | S100
+  | S200
+  | S300
+  | S400
+  | S500
+  | S600
+  | S700
+  | S800
+  | S900
+  | A100
+  | A200
+  | A400
+  | A700
+
+
+{-| Shades as array. Mostly useful for demos.
+-}
+shades : Array Shade
+shades =
+  Array.fromList
+    [ S50
+    , S100
+    , S200
+    , S300
+    , S400
+    , S500
+    , S600
+    , S700
+    , S800
+    , S900
+    , A100
+    , A200
+    , A400
+    , A700
+    ]
+
+
+shadeName : Shade -> String
+shadeName shade =
+  case shade of
+    S50  -> "50"
+    S100 -> "100"
+    S200 -> "200"
+    S300 -> "300"
+    S400 -> "400"
+    S500 -> "500"
+    S600 -> "600"
+    S700 -> "700"
+    S800 -> "800"
+    S900 -> "900"
+    A100 -> "A100"
+    A200 -> "A200"
+    A400 -> "A400"
+    A700 -> "A700"
+
+
+
+-- COLOR CONSTRUCTORS
+
+
+{-| Type of colors.
+-}
+type Color = C String
+
+
+{-| Construct a specific color given a palette base hue and a shade.
+-}
+color : Palette -> Shade -> Color
+color palette shade =
+  C (paletteName palette ++ "-" ++ shadeName shade)
+
+
+{-| White color.
+-}
+white : Color
+white = C "white"
+
+
+{-| Black color.
+-}
+black : Color
+black = C "black"
+
+
+{-| Primary color of the theme.
+-}
+primary : Color
+primary = C "primary"
+
+
+{-| Primary color, dark variant.
+-}
+primaryDark : Color
+primaryDark = C "primary-dark"
+
+
+{-| Primary color, contrast variant.
+-}
+primaryContrast : Color
+primaryContrast = C "primary-contrast"
+
+
+{-| Accent color.
+-}
+accent : Color
+accent = C "accent"
+
+
+{-| Accent color, contrast variant.
+-}
+accentContrast : Color
+accentContrast = C "accent-contrast"
+
+
+-- COLOR STYLES
+
+
+{-| Background color.
+-}
+background : Color -> Style
+background (C color) =
+  cs ("mdl-color--" ++ color)
+
+{-| Text or foreground color.
+-}
+text : Color -> Style
+text (C color) =
+  cs ("mdl-color-text--" ++ color)
+
+
+-- SCHEME/CSS SETUP
+
+{-| Given primary and accent base colors, compute name of appropriate MDL .css-file.
+(You are not likely to need to call this function.)
+-}
+scheme : Palette -> Palette -> String
+scheme primary accent =
+  let cssFile =
+    case accent of
+      Grey -> ""
+      Brown -> ""
+      BlueGrey -> ""
+      _ -> "." ++ paletteName primary ++ "-" ++ paletteName accent
+  in 
+    "material" ++ cssFile ++ ".min.css"
+
+

src/Material/Grid.elm

@@ -1,9 +1,8 @@
 module Material.Grid
-  ( grid, gridWithOptions, Options
+  ( grid, noSpacing, maxWidth
   , cell
   , Device(..)
   , Align(..)
-  , CellConfig
   , size
   , offset
   , align
@@ -54,80 +53,44 @@ Example use:
         ]
 
 # Grid container
-@docs grid, Options, gridWithOptions
+@docs grid, noSpacing, maxWidth
 
 # Cells
 
-Cells are configured with a `List CellConfig`; this configuration dictates the
+Cells are configured with a `List Style`; this configuration dictates the
-size, offset, and alignment behaviour of the cell. Construct
+size, offset, etc. of the cell. 
-individual `CellConfig` elements using `size`, `offset`, and `align`.
 
-@docs cell, CellConfig, Device, size, offset, Align, align, hide, order
+@docs cell, Device, size, offset, Align, align, hide, order
 -}
 
 
-{- TODO.
+{- TODO. I don't understand what "mdl-cell--stretch" or when it might be appropriate.
-
-1. From MDL docs:
-
-  "You can set a maximum grid width, after which the grid stays centered with
-   padding on either side, by setting its max-width CSS property."
-
-2. mdl-cell--stretch
 -}
 
 
 import Html exposing (..)
 import Html.Attributes exposing (..)
-import String
+
 import Material.Helpers exposing (clip, filter)
+import Material.Style as Style exposing (Style, cs, styled)
 
 
-{-| The `spacing` parameter indicates whether or not the grid should have
+{-| Set grid to have no spacing between cells. 
-spacing between cells. The `maxWidth` parameter, which must be a valid CSS
-dimension, indicates the maximum
-width of the grid; if the grid is in a larger container, it stays centered with
-padding on either side.
 -}
-type alias Options =
+noSpacing : Style 
-  { spacing : Bool
+noSpacing = Style.cs "mdl-grid--no-spacing"
-  , maxWidth : Maybe String
-  }
 
-
+{-| Set maximum grid width. If more space is available, the grid stays centered with
-{-| By default, a grid has spacing between columns, but no maximum width.
+padding on either side. Width must be a valid CSS dimension. 
 -}
-defaultOptions : Options
+maxWidth : String -> Style 
-defaultOptions =
+maxWidth w = Style.css "max-width" w
-  { spacing = True
-  , maxWidth = Nothing
-  }
-
 
 {-| Construct a grid with options.
 -}
-gridWithOptions : Options -> List Cell -> Html
+grid : List Style -> List Cell -> Html
-gridWithOptions options elms =
+grid styling cells =
-  div
+  styled div (cs "mdl-grid" :: styling) [] (List.map (\(Cell elm) -> elm) cells)
-    [ classList
-        [ ("mdl-grid", True)
-        , ("mdl-grid--no-spacing", not options.spacing)
-        ]
-    , style (
-        options.maxWidth
-        |> Maybe.map (\maxwidth -> [("max-width", maxwidth)])
-        |> Maybe.withDefault []
-      )
-    ]
-    (List.map (\(Cell elm) -> elm) elms)
-
-
-{-| Construct a grid with default options (i.e., default spacing, no
-maximum width.) Use `cell` some number of times to construct the argument
-list.
--}
-grid : List Cell -> Html
-grid = gridWithOptions defaultOptions
 
 
 {-| Device specifiers, used with `size` and `offset`. (A `Device` really
@@ -136,11 +99,6 @@ encapsulates a screen size.)
 type Device = All | Desktop | Tablet | Phone
 
 
-{-| Opaque type; construct with `size`, `offset`, `align`, etc.
--}
-type CellConfig = Config String
-
-
 {- Opaque cell type.
 -}
 type Cell = Cell Html
@@ -158,7 +116,7 @@ suffix device =
 {-| Specify cell size. On devices of type `Device`, the
 cell being specified spans `Int` columns.
 -}
-size : Device -> Int -> CellConfig
+size : Device -> Int -> Style
 size device k =
   let c =
     case device of
@@ -167,14 +125,14 @@ size device k =
       Tablet -> clip 1 8 k
       Phone -> clip 1 4 k
   in
-    "mdl-cell--" ++ toString c ++ "-col" ++ suffix device |> Config
+    "mdl-cell--" ++ toString c ++ "-col" ++ suffix device |> cs
 
 
 {-| Specify cell offset, i.e., empty number of empty cells before the present
 one. On devices of type `Device`, leave `Int` columns blank before the present
 one begins.
 -}
-offset : Device -> Int -> CellConfig
+offset : Device -> Int -> Style
 offset device k =
   let c =
     case device of
@@ -183,7 +141,7 @@ offset device k =
       Tablet -> clip 1 7 k
       Phone -> clip 1 3 k
   in
-    "mdl-cell--" ++ toString c ++ "-offset" ++ suffix device |> Config
+    "mdl-cell--" ++ toString c ++ "-offset" ++ suffix device |> cs
 
 
 {-| Vertical alignment of cells; use with `align`.
@@ -193,9 +151,9 @@ type Align = Top | Middle | Bottom
 
 {-| Specify vertical cell alignment. See `Align`.
 -}
-align : Align -> CellConfig
+align : Align -> Style
 align a =
-  Config <| case a of
+  cs <| case a of
     Top -> "mdl-cell--top"
     Middle -> "mdl-cell--middle"
     Bottom -> "mdl-cell--bottom"
@@ -203,26 +161,23 @@ align a =
 
 {-| Specify that a cell should be hidden on given `Device`.
 -}
-hide : Device -> CellConfig
+hide : Device -> Style
 hide device =
-  Config <| case device of
+  cs <| case device of
     All -> ""
     _ -> "mdl-cell--hide-" ++ suffix device
 
 
 {-| Specify that a cell should re-order itself to position 'Int' on `Device`.
 -}
-order : Device -> Int -> CellConfig
+order : Device -> Int -> Style
 order device n =
-  Config <| "mdl-cell--order-" ++ (toString <| clip 1 12 n) ++ suffix device
+  cs <| "mdl-cell--order-" ++ (toString <| clip 1 12 n) ++ suffix device
 
 
-{-| Construct a cell for use in the argument list for `grid`.
+{-| Construct a cell for use in the argument list for `grid`. Note that this
-Construct the cell configuration (first argument) using `size`, `offset`, and
+module defines various styles to set size, offset, etc. of the cell. 
-`align`. Supply contents for the cell as the second argument.
 -}
-cell : List CellConfig -> List Html -> Cell
+cell : List Style -> List Html -> Cell
-cell configs elms =
+cell styling elms =
-  Cell <| div
+  Cell (styled div (cs "mdl-cell" :: styling) [] elms)
-    [class <| String.join " " ("mdl-cell" :: (List.map (\(Config s) -> s) configs))]
-    elms

src/Material/Snackbar.elm

@@ -1,5 +1,5 @@
 module Material.Snackbar
-  ( Contents, Model, model, toast, snackbar
+  ( Contents, Model, model, toast, snackbar, isActive
   , Action(Add, Action), update
   , view
   ) where
@@ -84,6 +84,25 @@ snackbar message actionMessage action =
   , fade = 250
   }
 
+{-| TODO
+-}
+isActive : Model a -> Maybe (Contents a)
+isActive model =
+  case model.state of
+    Active c ->
+      Just c
+
+    _ ->
+      Nothing
+
+
+contentsOf : Model a -> Maybe (Contents a)
+contentsOf model =
+  case model.state of
+    Inert -> Nothing
+    Active contents -> Just contents
+    Fading contents -> Just contents
+
 
 -- SNACKBAR STATE MACHINE
 
@@ -205,14 +224,6 @@ update action model =
 -- VIEW
 
 
-contentsOf : Model a -> Maybe (Contents a)
-contentsOf model =
-  case model.state of
-    Inert -> Nothing
-    Active contents -> Just contents
-    Fading contents -> Just contents
-
-
 view : Signal.Address (Action a) -> Model a -> Html
 view addr model =
   let

src/Material/Textfield.elm

@@ -127,6 +127,7 @@ update action model =
 {-| Component view.
 -}
 view : Signal.Address Action -> Model -> Html
+-- TODO: Should take Style argument. 
 view addr model =
   let hasFloat = model.label |> Maybe.map .float |> Maybe.withDefault False
       hasError = model.error |> Maybe.map (always True) |> Maybe.withDefault False