elm-origami lets you define CSS in Elm. This package is forked from rtfeldman/elm-css.
このドキュメントは日本語が主だよ。
Here's an example of how to define some elm-origami styles:
import Origami exposing (..)
import Origami.Html exposing (..)
import Origami.Html.Attributes exposing (css)
import Origami.Html.Events exposing (onClick)
view : Model -> Html Msg
view model =
div
[ css
[ property "width" "100vw"
, property "height" "100vh"
, property "display" "flex"
, property "justify-content" "center"
, property "align-items" "center"
]
]
[ button
[ css
[ property "display" "flex"
, property "justify-content" "center"
, property "align-items" "center"
, property "position" "relative"
, property "height" "50px"
, property "width" "200px"
, property "outline" "none"
, property "border-width" "0"
, property "background-color" "#f58c64"
, property "color" "white"
, property "font-size" "20px"
, property "letter-spacing" "2px"
, property "cursor" "pointer"
, property "transition" "all 0.3s cubic-bezier(0.13, 0.99, 0.39, 1.01)"
, property "box-shadow" "0 3px 5px rgba(0, 0, 0, 0.3)"
, with ":hover" [ property "background-color" "#ef794c" ]
, case model of
Initial ->
noStyle
Loading ->
let
loadingStyle =
batch
[ property "content" <| qt ""
, property "position" "absolute"
, property "width" "60%"
, property "height" "60%"
, property "border-radius" "100%"
, property "border" "calc(30px / 10) solid transparent"
, animation
[ ( "from", [ property "transform" "rotate(0deg)" ] )
, ( "to", [ property "transform" "rotate(360deg)" ] )
]
, property "animation-duration" "1s"
, property "animation-iteration-count" "infinite"
]
in
batch
[ property "border-radius" "50px"
, property "width" "50px"
-- [Copyright (c) 2019 Epicmax LLC](https://epic-spinners.epicmax.co/)
, with "::after" [ loadingStyle, property "border-top-color" "#ffe9ef" ]
, with "::before"
[ loadingStyle
, property "border-bottom-color" "#ffe9ef"
, property "animation-direction" "alternate"
]
]
Completed ->
batch
[ property "border-radius" "50px"
, property "width" "50px"
, with "::after"
[ property "content" <| qt ""
, property "position" "absolute"
, property "width" "60%"
, property "height" "30%"
, property "border-left" "3px solid #fff"
, property "border-bottom" "3px solid #fff"
, property "transform" "rotate(-45deg)"
]
]
]
]
[ if model == Initial then
span
[ css
[ animation
[ ( "from", [ property "opacity" "0" ] )
, ( "to", [ property "opacity" "1" ] )
]
, property "animation-duration" "1s"
]
]
[ text "Click Me!" ]
else
text ""
]
]- See full examples.
See the Origami module documentation for an explanation of how this code works.
miyamoen/elm-origamiはrtfeldman/elm-cssをフォークして改変した package です- 主に違うところは
elm-cssの typed-css の要素を取り除いて内部の型を整理したところです
- 主に違うところは
elm-cssの typed CSS な部分が気に入らないelm-cssは CSS に型付けをしようという package で、昔は CSS ファイルを生成していましたが今は node に直接付与するスタイルになっています- CSS の各プロパティを型がある状態で記述できますが、型は少しわかりにくいですし覚えるのが少し煩雑です
- elm-origami では無理して型付けする必要がないと考えています
- そのため
property関数のみ提供しています- CSS には同じ property でもいろいろな記述方法があったり新しい property が増えたりしますが、そのすべてを常に使うとは限りません
- 型付けをするなら用途が必要十分でよく設計された小さな package を作るのがよいと思います
- 型付けされた property 関数を提供しないことで実装が小さくなります
- そのため
cssを複数使ったとき順番通り合成されますelm-cssではcssを複数使用したときの挙動が不確定です
List (Attribute msg)をbatchできるelm-origamiには新規性がほぼありません- 見てわかる通り日本語をしゃべる存在が作ってます
elm-cssに入った変更を追いかけたり追いかけなかったりする- container queries入れてみたいな
- cascade layer入れてみたいな
- 特に意味はないです
- 他と区別が付く名前なら何でもよかった
- 一応 CSS を node に折り込んでいるような雰囲気の意味で折り紙にしました
- 2.0.0
- 複数のcssで適用されたStyleが合成されるようになった
- Selector型がなくなった
- use
is(),where()for multiple selectors
- use