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

CSSをやりたくない

Style Elements

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

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

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

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

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

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

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

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

StyleSheetを定義する

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の部分になる

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のアニメーションとかでできそう

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でやるか・・・

Style Elements 使ってみたよ！

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

Style Elements

何がうれしいんだよ

個人的に

新しいやり方