Vueのアドベントカレンダーをウォッチしていてて、Nuxt.jsであるアプリを作っている途中です。
色々な記事でElementUIが取り上げられているので、私も使ってみましたが正直微妙になってきたので止めることにしました。
単体でレスポンシブのサイトは簡単に作れない。
ElementUIはUIパーツのライブラリです。
レイアウトも部品として影響していますが、提供している部品の数はさほど多くありません。
そして、モバイル向けに配慮した機能は全く提供されません。
そのため、レスポンシブ対応するためには、一からやるか他のCSSフレームワークを組み合わせる必要が出てくると思います。
タイポグラフィ、レイアウトなどが簡単にできるわけではない
ElementUIはあくまでもUIライブラリです。
私はコレを最初に見た時、Bootstrapみたいだから簡単にきれいなレイアウトが整うんだろうなと思っていました。
しかし違った。
class="text-center"とだけ書いて中央寄せしたいけど、そういうものは提供されていません。
<el-col/>などの要素をラッピングするレイアウトパーツにはmarginやpaddingがいい感じに入っているわけではなく、そこも手を入れなければいけません。
classだけビャーって書いてある程度整うCSSフレームワークが使いたかったんです。。。
突然出てくる中国語
とりあえずドキュメントの最初に出てくるのが中国だったり、
typographyのとこの文字が中国語だったり、
Githubのissueに中国語が投げつけられていたり、
私には馴染めませんでした。
本当に欲しかったもの
前にBootstrapでの開発体験がとても良かった思い出があります。
本当にほしいのはBootstrapのようなclassを書いたら整い、部品としての見た目が整うCSSフレームワークだったのです。
ですが、Bootstrapは正直jQueryとベッタリしすぎている印象があります。
cssのみ導入するのもありなんでしょうが、公式ドキュメントを読んでも動かせないパーツが多いのはつらいです。
そこでBulma
https://bulma.io/
Vueのアドベントカレンダーでも何人かの方が使っておられましたが、Bulma良さそうです。
CSSフレームワークであり、JSの要素は一切提供しません。
これであれば、classを書くだけである程度のデザインができるはず。
cssはあまり書きたくはない！
さすがに足りないパーツはありそう
JSの動きが必要とするコンポーネントは何もないので、switch,slider, 複数選択のセレクトボックスなど、そういうものは無い。
そういうものが必要になったら、bulmaを基軸にしたUIコンポーネント探して、それでもなかったら自作になるのかなと思います。
https://buefy.github.io/#/
https://bulma.io/extensions/