[2021-11] 新しくアプリとか作るときに、しばしば, どれにするかってなるので、メモしておく。以下に挙げるものから選べば間違いない。
とはいえ、Bootstrap の代替を謳うものは、わざわざそれらを選ばなくても、別に Bootstrap でいいような気もする。
Bulma: Free, open source, and modern CSS framework based on Flexbox An alternative to Bootstrap. 最新版は v0.9.3.
JavaScript が付いておらず, delete 要素なども全部自分でつくってやる必要がある。面倒!
UIkit A lightweight and modular front-end framework for developing fast and powerful web interfaces.
デフォルトではカクカクしたデザイン。最新はv3.8.1. 多くのコンポーネントを備える。Theme 機能は pro版.
次のように, クラス名に接頭語 uk- が付いて、見分けやすい.
<button class="uk-button uk-button-default">Button</button>
Spectre.css CSS Framework A Lightweight, Responsive and Modern CSS Framework. 最新は v0.5.9.
ほとんど, Bootstrap と同じクラス名になっている。
JavaScript が付いておらず, 例えば toast の [x]ボタンの挙動も自分で手書きしないといけない。めんどい。
<button class="btn btn-success">success button</button>
Bootstrap · The most popular HTML, CSS, and JS library in the world. 歴史あるCSSフレームワーク. 最新は v5.x. 軽くなった。Theme を適用できる。
Pros:
昔からある。jQuery 依存。Responsive. 取扱いやすい.
Materialize A modern responsive front-end framework based on Material Design.
v1.0.0. クラス名は独自。
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
JavaScript ライブラリが付いてきているが、何だか上手く動かない。そこまで調べようとも思わなかったので、見送り。
Utility-first なのは好かん。bg-gray-100 rounded-xl p-8 など。柔軟性はあるのだろうけど。
jQuery 前提. ほかにいいのがいろいろあるので、今から新たに作るときには避けるかな。2018年のv2.4.1 が最終。リポジトリの更新が止まっている。
[2022-01] Semantic UI の community fork として Fomantic-UI がある。更新が続いている。最新は v2.8.8. しかしやっぱり jQuery が必要なので、新規プロジェクトでは選びにくい。
ちょっと試してみたが, responsive にするのが難しそう。うーむ。v3.0 の開発も頓挫しているようだ。The future of Fomantic as v3.0 · Issue #319 · fomantic/Fomantic-UI
React であっても HTML + CSS framework がいいんじゃないかと思うが、一応、React 用ライブラリもリストアップしておく。
MUI (旧 Material-UI) と Storybook が双璧。その半分ぐらいで React-Bootstrap.
@mui/material - npm MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Material Design.
v5 にメジャーバージョンアップして, パッケージ名が変更になっている (最新は v5.1.0)。古い方を指したままの Web上などの解説に注意。こんにちはMUI！ 新しくなったMaterial UI v5
@storybook/react - npm Storybook for React is a UI development environment for your React components.
React だけではなく, Vue, Angular など様々なフロントエンドフレームワークに対応。
react-bootstrap - npm React-Bootstrap is compatible with various versions of Bootstrap.
React-Bootstrap v2.x は Bootstrap v5.x に対応。
Ant Design - The world's second most popular React UI framework
Cross-Platform Mobile App Development: Ionic Framework
これも CSS framework には JavaScript が付いていない。最近はこういうのばかりか。CSS framework のほうは選べない。React components, ViewComponents は面白そう。