Style Elements 使ってみたよ！

この記事は[elm meetup tokyo #4](https://elm-tokyo.connpass.com/event/62355/)で使った資料です

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

自己紹介部分略

---

# CSSちょっとよくわからない
![image.png](https://qiita-image-store.s3.amazonaws.com/0/74093/20ba1879-1e32-f637-3424-81824080a6f8.png)

https://twitter.com/miyamo_madoka/status/846963575939891200

CSSをやりたくない

---
# Style Elements

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

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

---

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

https://github.com/miyamoen/aizuchi

![image.png](https://qiita-image-store.s3.amazonaws.com/0/74093/4aa37f94-1796-8746-613a-f0eb5e821625.png)

---

* 大体`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](https://elmlang.slack.com/)に#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でやるか・・・