25
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ElmAdvent Calendar 2018

Day 3

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

Last updated at Posted at 2018-12-03

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でどうレイアウトできるか、使い方などを記事にしていこうと思います(未定です)

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

25
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?