Elm

Style Elements 使ってみたよ!

More than 1 year has passed since last update.

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

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

自己紹介部分略



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

image.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



  • 大体rowcolumnでレイアウトしていく


    • 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に1つしかつけれない

  • 実際は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でやるか・・・