Edited at
ElmDay 3

CSSができなくても安心!elm-uiで簡単レイアウト!

elm-ui


「CSSワカンナイ...」「CSSフレームワークでうまくレイアウトできない...」

CSSわかんないですか?CSSフレームワーク使ってみても結局思い通りにレイアウトできなくて辛くないですか?どうですか?

elm-uiはそんなあなたの救世主、次世代レイアウトシステムです(誇大広告です、適当に言ってます)

AltJS的にJSはバイトコードみたいなもので直接触るものじゃないはずです。elm-uiではCSSをバイトコードとして扱うことができます。他人の作った抽象にのっかろう


「そのなんとかuiで何ができるの?」

レイアウトできるよ

とりあえず楽天のこのページを見てきてくれ。適当なところで要素の検証をしてdomを覗いてもらえばclassが

hc bg-247-247-247-255 p-10-22 spacing-10-10 tc s c wf ct cl

こんな感じで書かれているのが分かると思います。

またstyleタグがちょくちょく書かれています

あと拙作だけどBiblipolaもelm-uiだし、Elm 2048もelm-uiで作ってます


使い心地

一種のCSSフレームワークだと思ってもらっていいかなと思います。el, column, rowというレイアウトが組み込まれた基本要素でhtmlを組み立てていきます。

また、styling(要素の装飾、背景色とかボーダーとか)はelm-uiで用意されたものを付けてくことになります


「え、じゃあelm-uiで用意されてなかったら?」

自分でcss書け

とはいえレイアウトは全部やってくれるので、そんなに難しいことはないと思います。

Elm 2048だとアニメーションだけcssで書いてます

あと思いつくのはグラデーションとかですかね。


まとめ

elm-uiいいぞ

今回はこれくらいにしといて次回(未定です)からelm-uiでどうレイアウトできるか、使い方などを記事にしていこうと思います(未定です)

でも普通にドキュメント読めばいいと思うよ。英語だけど