Style Elements 使ってみたよ！

この記事はelm meetup tokyo #4で使った資料です

多々説明不足ですが気にしないでください

自己紹介部分略

---

CSSちょっとよくわからない

CSSをやりたくない

---

Style Elements

CSSのLayout部分とStyle部分を分けて再定義したアプローチです！

• ElementはLayoutの入ったHtml
• StyleはCssの見た目的な部分

---

ChatClientのAizuchiを開発しています！

---

• 大体rowとcolumnでレイアウトしていく
  • flexboxになる

.hs

comment : Comment -> Element Styles variation msg
comment { content, postedAt, postedBy, format, index } =
    row None
        [ padding 5
        , spacing 8
        , width <| fill 1
        ]
        [ image ("https://flathash.com/" ++ postedBy.name) None [ width <| px 64, height <| px 64 ] empty
        , column None
            [ paddingTop 17, spacing 10 ]
            [ row None [ spacing 20 ] []
            , commentContent format content
            ]
        ]

---

• Attributeで大きさとかを指定していく
  • width, height
  • padding, spacing
  • scrollBar
  • 配置(center, alignTop, justify

.hs

column None
        [ spacing 1
        , width <| fill 1
        , center
        ]

---

ClassNameみたいなのはUnion Typeで作る

.hs

type Styles
    = None
    | TestStyle
    | Main
    | Logo
    | FormCard
    | Card
    | CardHeader
    | Button
    | Input
    | Tag

---

StyleSheetを定義する

.hs

styleSheet : StyleSheet Styles variation
styleSheet =
    Style.styleSheet <|
        [ style None []
        , style Main
            [ Color.background <| Mixing.fade 0.8 Colors.white
            , Color.text Colors.ultramarine
            ]
        , style Logo
            [ fontSize.size1
            , Font.justifyAll
            , Font.bold
            ]
        , style FormCard
            [ shadows
                [ Shadow.box { shadow | offset = ( 0, 2 ), blur = 3 }
                , Shadow.box { shadow | blur = 1 }
                ]
            ]
        ]

---

Element styles variation msg　これのstylesの部分になる

.hs

el None [] <| text "divになるよ"
column Main [] [text "flexboxになるよ"]
row FormCard [] [text "rowなflexboxになるよ"]

• 各elementに１つしかつけれない
• 実際はlogo__1300303634みたいにつく（hash guardは外すこともできる
• styleSheetは<style>~</style>になる
  • 疑似クラスも使える

---

何がうれしいんだよ

• layoutむっちゃ楽になった
  • css見なくていい
• StyleがElmに書かれている

---

個人的に

• CSSちょっと分かるようになった
  • Style.FontとかStyle.Shadowとかにまとまってて勉強しやすい
  • CSSフレームワーク？？知らんな！！自分でStyle作りはじめました
    • たぶん欠点（使えないわけではないと思う

---

新しいやり方

Elmはもともと独自のGraphicsライブラリだけでhtmlライブラリがなかったりで、GUI作るのにいいやり方を目指してるところあると思ってます

あなたもstyle-elements wayで作ってみませんか？

elm slackに#style-elementsチャンネルあります

---

Elmでアニメーションやりたいけど状態管理とかないわ。CSSのアニメーションとかでできそう

.hs

style Button
    [ Style.shadows
        [ Shadow.box { shadow | offset = ( 0, 5 ), color = Mixing.darken 0.2 Colors.primary } ]
    , Transition.transitions
        [ { transition | duration = 200, props = [ "box-shadow", "transform" ] }
        , { transition | duration = 400, props = [ "background" ] }
        ]
    , hover
        [ Style.translate 0 1 0
        , Style.shadows
            [ Shadow.box { shadow | offset = ( 0, 4 ), color = Mixing.darken 0.2 Colors.primary } ]
        ]
    , pseudo "active"
        [ Color.background <| Mixing.darken 0.1 Colors.primary
        , Style.translate 0 5 0
        , Style.shadows
            [ Shadow.box { shadow | color = Mixing.darken 0.5 Colors.primary } ]
        ]
    ]

(写真略)
ボタンぐにょぐにょ押せる！楽しい！（できた）

アニメーションはCSSでやるか・・・