個人ブログや、小さめのWebサイトなどを作ろうとするとき、CSSをイチから書いても良いのだけど、結構めんどくさい。
特にレイアウト周りはだいたい書くことが決まってくるし、なんなら「Grid LayoutだけできるCSSフレームワークないかな」と考えたりする。
BootstrapやBulma、最近流行ってる（ように自分の目には見える）Tailwindなどの高機能CSSフレームワークを使っても良いのだけど……「あそこまで色々必要なのかな（いや、そこまで必要ないし使わない）」など考えると、やっぱり先述したようにレイアウトだけ、ブログや簡単なページ作成だけに特化した軽量のものがほしくなる。Webアプリケーションを作るというなら使おうという気持ちになるが、……個人ブログとか単発の広告ページくらいだと「仰々しいな」と思うのだ、私は。
そういった「非全部盛りな軽めのCSSフレームワークってあるのかなぁ」とネットの海を彷徨い、いろいろあることを知ったので備忘録として残しておく。
実際に触ったものもあれば、GitHubリポジトリに上がっているコードを眺めて「これ、次機会ができたとき使ってみようかな」と思ったもの、知人から教えてもらったものもある。
有名CSSフレームワークと違って、最終commit日時がだいぶ古いものばかりだが、「レイアウトだけできる」、「簡単なブログ向け」というターゲットを考えたら「そんなにメンテナンスすることもないか」と思える。
気になる人は気になるのかもしれないが……CSSだからいざとなったら自分でForkして使っても良いんじゃないかな（大雑把）。
forkするまえにライセンスは確認しよう。
Flexbox Grid
いろんなところで紹介されているFlexboxを利用したGridLayoutフレームワーク。
class名もBootstrapと似てるので、Bootstrap経験者には使いやすそう（というか使いやすかった。
Basis
Basis : A lightweight responsive Sass/CSS framework based on flexible box
Flexboxにcomponentやutilityを足したようなフレームワーク。
componentのデフォルトのスタイルはシンプルなものになっているので、自分でカスタマイズしても使えそう。
Typographyが日本語書体にも対応してるっぽい。
自分が使うとしたら、動くモックが見たいって言われたときに使うかなぁ。
1000ch/grd
Grd - A CSS grid framework using Flexbox
すっっっごいシンプルなGridLayoutフレームワーク。Flexboxを使ってるので、CSS Gridみたいな縦方向のレイアウトには弱いかもしれない。 名前からするとCSS Gridつかってるのかな？って一瞬思ったけど、そうではなかった。 それでもこれはこれで、よさそう。 サイトに動くデモが用意されているので気になる人は確認してみると良さ。
Simple.css
Normalize.cssみたいなHTMLのスタイリングを整えたものを提供するフレームワーク。 知人……というか、@okuramasafumi に教えてもらった（ブログで使ってる……らしい）。 GridLayoutは提供していないので、先述のレイアウトフレームワークと合わせて使うと良さそう。
Iota
Iota | A responsive micro-framework for the grid spec powered by CSS custom properties
CSS Gridを利用したレイアウトを提供するフレームワーク。
.grid というclass名だけでViweportに応じてよろしくレイアウトしてくれるっぽい。SUGEEEE
「gapいらん」というときは、任意のclass名を追加して、grid-gap: 0; と上書きしたり、CSS Variavbleを使ってカラム数をカスタマイズしたりもできるみたい。
使い方を覚えればいろいろ使えそう。とくにランディングページみたいなレイアウトが横方向だけじゃなく縦方向もよろしくいい感じにしたいみたいなケースではFlexboxよりCSS Gridを使ったほうが幸せになれるので、単発の広告ページに使えそうだなぁ。
🍙
これから先も思いついては探したりすると思う。
見つけたら Simply CSS Frameworks - ksmxxxxxx notes というScrapboxページを作ってあるので、ここに追加していく……はず。
