simple-web-system technology

Webに関する技術をシンプルに扱うブログ

JSに依存しないMaterial Design CSS Frameworkの『Surface』が良さそう

紹介

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は、関数型指向のフロントエンド専門の言語です。

elm-lang.org

コンパイル時にはTypescript等と同様にJSにトランスパイルされます。

そのElmとSurfaceを組み合わせて、簡単なTodoアプリを作ってみました。

github.com

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があります。

https://purecss.io/purecss.io

bulma.io

こちらはMaterial Designではありませんが、結構キレイなサイトが作れると思います。