JSに依存しないMaterial Design CSS Framework - Surface
本日はCSSだけで出来たMaterial Design FrameworkのSurfaceを紹介したいと思います。（Surfaceと言ってもノートパソコンの方じゃありません）
こいつです。 mildrenben.github.io
# JSに依存しないFrameworkのメリット ところでJSに依存しないCSS Frameworkにはどういうメリットがあるのでしょうか。 ズバリ言いますと、どんなフロントエンド環境でも使えることです。
例えばBootstrapはJSに依存しているCSS Frameworkですが、ReactやVue.js、AngularなどのJS Frameworkと一緒に使おうとすると、画面の描画の際に、BootstrapのJSに依存する部分とJS Frameworkのライフサイクルが違うため、正常に画面表示が出来ないということが起こりえます。 そのため、各JS FrameworkではBootstrapをラップするライブラリがあります。
ですが、JSに依存しないフレームワークではそのような心配は不要です。
Elmで使ってみた
Elmは、関数型指向のフロントエンド専門の言語です。
コンパイル時にはTypescript等と同様にJSにトランスパイルされます。
そのElmとSurfaceを組み合わせて、簡単なTodoアプリを作ってみました。
view : Model -> Html Msg
view model =
div [ class "", style "width" "100%" ]
[ node "style"
[ type_ "text/css" ]
[ text "@import url(https://mildrenben.github.io/surface/css/surface_styles.css)" ]
, aside [ attribute "role" "aside", class "" ] []
, main_ [ attribute "role" "main", class "" ]
[ header [ class "container" ]
[ h1 [ class "m--1 g--11" ] [ text "Todo" ]
]
, div [ class "g--12" ]
[ div [ class "g--4 m--4 card" ]
[ form [ onSubmit (AddTodoItem model.todoFormText), class "" ]
[ div [ class "g--12", style "margin" "0 0 0 0" ]
[ input [ type_ "text", onInput InputTodoFormText, value model.todoFormText, style "width" "100%", style "background-size" "100% 100%" ] []
]
, div [ class "g--12", style "margin" "0 0 0 0" ]
[ button [ class "btn--raised" ] [ text "add" ]
]
]
]
, ul [ class "g--4 m--4" ]
(List.map
(\todoItem ->
li []
[ div [ class "card container" ]
[ input
[ type_ "checkbox"
, checked todoItem.done
, value (String.fromInt todoItem.uuid)
, onClick (ToggleTodoItem todoItem.uuid)
]
[]
, label [ style "margin-left" "1em" ] [ text todoItem.title ]
]
]
)
model.todoItemList
)
]
]
]
classとstyleの箇所がCSS部分です。
こんな感じにフレームワーク問わず（言語が違っても！！）いい感じに書けます。
まとめ
このようにフロントエンド関連で新しい技術を使ってみた時に、JSに依存しないCSS Frameworkを使ってみるのは一つの選択肢に入るのではないでしょうか。 その中でもSurfaceの完成度は高いと思います。
余談
JSに依存しないCSS Frameworkは他にもあり、有名なのものではPure.cssやbulmaがあります。
こちらはMaterial Designではありませんが、結構キレイなサイトが作れると思います。
