idea for websharper material design ui library

material.fs

open WebSharper.UI.Next.Client
open WebSharper.UI.Next
open WebSharper.UI.Next.Html

module Material = 
    module Typography = 
        let flowText content = pAttr [ attr.``class`` "text-flow" ] [ text content ]
    
    module Table = 
        type TableType = 
            | Bordered
            | Striped
            | Highlight
            | Centered
            | Responsive
        
        let makeTable content tableTypes = 
            let classes = 
                tableTypes
                |> List.map (fun tt -> 
                       match tt with
                       | Bordered -> "bordered"
                       | Striped -> "striped"
                       | Highlight -> "highlight"
                       | Centered -> "centered"
                       | Responsive -> "responsive-table")
                |> List.fold (+) " "
            tableAttr [ attr.``class`` classes ] [ content ]
    
    module Media = 
        type ImageType = 
            | Responsive
            | Circle
        
        let makeImage src imageTypes = 
            let classes = 
                imageTypes
                |> List.map (fun it -> 
                       match it with
                       | Responsive -> "responsive-img"
                       | Circle -> "circle")
                |> List.fold (+) " "
            imgAttr [ attr.``class`` classes
                      attr.src src ]

    module Button =
        type Decorator =
            | Large

        type Type =
            | Raised
            | Floating
            | Fixed
            | Horizontal
            | Flat
            | Submit

        let submitButton color content =
            let classes = sprintf "btn waves-effect waves-light %s" color
            buttonAttr [ attr.``type`` "submit"
                         attr.``class`` classes ] 
                       [ text "Submit" 
                         content ]

    module Forms =
        [<RequireQualifiedAccess>]
        module Attributes =
            let dataError msg = Attr.Create "data-error" msg
            let dataSuccess msg = Attr.Create "data-success" msg

        [<RequireQualifiedAccess>]
        type Type =
            | Text
            | Password

        [<RequireQualifiedAccess>]
        type Validate =
            | Yes
            | No

        let inputField fieldType errorMsg id reference =
            let attributes = match fieldType with
                                | Type.Text, Validate.Yes -> [ attr.``type`` "text"
                                                               attr.``class`` "validate"
                                                               attr.``id`` id ]
                                | Type.Text, Validate.No -> [ attr.``type`` "text"
                                                              attr.``id`` id ]
                                | Type.Password, Validate.Yes -> [ attr.``type`` "password"
                                                                   attr.``class`` "validate"
                                                                   attr.``id`` id ]
                                | Type.Password, Validate.No -> [ attr.``type`` "password"
                                                                  attr.``id`` id ]

            
            [ Doc.Input attributes reference
              labelAttr [ attr.``for`` id
                          Attributes.dataError errorMsg ] 
                        [ text id ] ]