Added Template Component/Demo-page; moved demo-page stylesheet out.

examples/Demo.elm

@@ -11,24 +11,17 @@ import Array exposing (Array)
 import Material.Color as Color
 import Material.Layout as Layout exposing (defaultLayoutModel)
 import Material exposing (lift, lift')
+import Material.Style as Style
 
 import Demo.Buttons
 import Demo.Grid
 import Demo.Textfields
 import Demo.Snackbar
-
+import Demo.Template
 
 -- MODEL
 
 
-type alias Model =
-  { layout : Layout.Model
-  , buttons : Demo.Buttons.Model
-  , textfields : Demo.Textfields.Model
-  , snackbar : Demo.Snackbar.Model
-  }
-
-
 layoutModel : Layout.Model
 layoutModel =
   { defaultLayoutModel
@@ -36,12 +29,22 @@ layoutModel =
   }
 
 
+type alias Model =
+  { layout : Layout.Model
+  , buttons : Demo.Buttons.Model
+  , textfields : Demo.Textfields.Model
+  , snackbar : Demo.Snackbar.Model
+  , template : Demo.Template.Model
+  }
+
+
 model : Model
 model =
   { layout = layoutModel
   , buttons = Demo.Buttons.model
   , textfields = Demo.Textfields.model
   , snackbar = Demo.Snackbar.model
+  , template = Demo.Template.model
   }
 
 
@@ -53,6 +56,7 @@ type Action
   | ButtonsAction Demo.Buttons.Action
   | TextfieldAction Demo.Textfields.Action
   | SnackbarAction Demo.Snackbar.Action
+  | TemplateAction Demo.Template.Action
 
 
 update : Action -> Model -> (Model, Effects.Effects Action)
@@ -62,6 +66,7 @@ update action model =
     ButtonsAction   a -> lift  .buttons    (\m x->{m|buttons   =x}) ButtonsAction  Demo.Buttons.update    a model
     TextfieldAction a -> lift' .textfields (\m x->{m|textfields=x})                Demo.Textfields.update a model
     SnackbarAction  a -> lift  .snackbar   (\m x->{m|snackbar  =x}) SnackbarAction Demo.Snackbar.update   a model
+    TemplateAction  a -> lift  .template   (\m x->{m|template  =x}) TemplateAction Demo.Template.update   a model
 
 
 -- VIEW
@@ -109,6 +114,8 @@ tabs =
   , ("Buttons", \addr model ->
       [Demo.Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons])
   , ("Grid", \addr model -> Demo.Grid.view)
+  , ("Template", \addr model -> 
+      [Demo.Template.view (Signal.forwardTo addr TemplateAction) model.template])
   ]
 
 
@@ -119,6 +126,22 @@ tabViews = List.map snd tabs |> Array.fromList
 tabTitles : List Html
 tabTitles = List.map (fst >> text) tabs
 
+stylesheet : Html
+stylesheet = Style.stylesheet """
+  blockquote:before { content: none; }
+  blockquote:after { content: none; }
+  blockquote {
+    border-left-style: solid;
+    border-width: 1px;
+    padding-left: 1.3ex;
+    border-color: rgb(255,82,82);
+      /* TODO: Really need a way to specify "secondary color" in
+         inline css.
+       */
+  }
+"""
+
+
 
 view : Signal.Address Action -> Model -> Html
 view addr model =
@@ -142,7 +165,7 @@ view addr model =
       { header = Just header
       , drawer = Just drawer
       , tabs = Just tabTitles
-      , main = [ top ]
+      , main = [ stylesheet, top ]
       }
     {- The following line is not needed when you manually set up
        your html, as done with page.html. Removing it will then

examples/Demo/Snackbar.elm

@@ -167,24 +167,8 @@ view addr model =
     ]
 
 
-introStyle : String
+intro : Html
-introStyle = """
+intro = """
-  blockquote:before { content: none; }
-  blockquote:after { content: none; }
-  blockquote {
-    border-left-style: solid;
-    border-width: 1px;
-    padding-left: 1.3ex;
-    border-color: rgb(255,82,82);
-      /* TODO: Really need a way to specify "secondary color" in
-         inline css.
-       */
-  }
-"""
-
-
-introBody : Html
-introBody = """
 # Snackbars & toasts
 
 From the
@@ -209,9 +193,3 @@ From the
 """ |> Markdown.toHtml
 
 
-intro : Html
-intro =
-  div []
-    [ node "style" [] [ text introStyle ]
-    , introBody
-    ]

src/Material/Style.elm

@@ -2,6 +2,7 @@ module Material.Style
   ( Style
   , styled
   , cs, cs', css, css'
+  , stylesheet
   ) where
 
 
@@ -20,6 +21,9 @@ add to or remove from the contents of an already constructed class Attribute.)
 
 # Application
 @docs styled
+
+# Convenience
+@docs stylesheet
 -}
 
 
@@ -111,3 +115,15 @@ css' key value b =
 -}
 nop : Style 
 nop = NOP
+
+
+-- CONVENIENCE
+
+
+{-| Construct an Html element contributing to the global stylesheet.
+The resulting Html is a <style> element.  Remember to insert the resulting Html
+somewhere. 
+-}
+stylesheet : String -> Html
+stylesheet css = 
+  Html.node "style" [] [Html.text css]