以前komitsuboshi-cssというCSSフレームワークを作ったのですが、
- コーディングで楽したい一心で機能付けすぎた
- 使ってみると付けた機能が地味に使いにくかった
- 結局グリッドシステムの方を中心に使っていた
- WordPress対応にしたのはいいが、ランディングページなどを作るには無駄なコードが気になった。
- バージョン1に上げ辛い…
ってな感じで、半年ほど自分で運用してみた結果、機能をぐっと絞ったほうがWordPressにも転用しやすいという結論に至り、グリッドシステムの部分だけ独立させることにしました。
そうして作ったCSSフレームワークがこちらです。
GitHub - akinori-kawamitsu/lecss: CSS grid framwork. Using float, flex, and calc. IE8 supported.
IE8までのゾンビブラウザに対応させていることから、名称を、LECSS（Legacy CSS）としました。
「今時IE8とかふざけてんのか？」
という声が聞こえてきそうですが、実際1年前に東証1部に上場しているグローバル企業のサイトリニューアルの案件に参加したとき、「HTML5、ただし社内の偉い人がXPのIE8で見るからそれでも崩れない程度に。」という頭のおかしい要件だったので、このIT後進国ニッポンではまだゾンビに遭遇するかもしれないことからサポートに入れています。Win10+IE11開発者モードでの確認ではありますが、ゾンビブラウザに遭遇した場合の武器としてある程度使えるはずです。
Vista+IE9も今年の4月にはお亡くなりにならなければならないはずですが、どうなるんでしょうね。
こちらも、flexboxでよく使われる“横並びのボックスの高さを揃える”条件に対してはjQuery.matchHeigt.jsを使ってモダンブラウザと同様に表示されるようにしています。
ゾンビ対応以外の特徴について
そこそこ軽量
IE10以下を全部切り捨てた場合、使うCSSファイルは3つ、jsファイルは1つで、合計62kBです。
Bootstrapなどのてんこ盛りフレームワークに比べれば十分軽くなっています。さすがにPure.cssなど、軽量を売りにしてるフレームワークには惨敗します。
ほとんどグリッドシステムでしかない割にはサイズが大きいですが、その分細かい調整ができるようになっています。
グリッドは12+2
12分割のほか、5分割、7分割も使えるようにしています。
Bootstrap風のグリッドネーミング
学習コストを下げるために、col-**-12（12グリッド）、col-**-1by5（5分割）、col-**-1by7（7分割）という感じでグリッド名を付けています。
でかすぎないブレイクポイント
Bootstrap3などで不満だったのが、最小のブレイクポイントが640pxと、大きすぎることでした。640pxでスマホと同じ構成というのは冗長な感じで使いにくさを感じていました。Bootstrap4では544px、768pxにブレイクポイントが設けられて使いやすくなりましたね。
LECSSではブレイクポイントをデフォルトで470px, 768pxの2つに設定しています。それぞれ col-sp-**, col-tab-**, col-pc-** というグリッドのネーミングになります。Sassを使えば、これらの値は簡単に変更可能です。（変数はすべて_parameter.scssにまとめている）
またcontainerの最大幅はデフォルトで960px。これも_parameter.scssで変更可能です。
手抜き用グリッドも用意済み
グリッド名の -sp-, -tab-, -pc-といったターゲットメディアを付けないグリッド名を用意しています。
例えばグリッド名にcol-4としたとき、pcサイズでは3カラム、tabサイズでは2カラム（等分割）、spサイズでは1カラムで表示されます。
クラス名にsp,tab,pcのカラム分けをいちいち書く手間を省いています。
ファイルサイズが肥大化した原因の一つがこれです。
グリッドの親のクラス名を変更するだけでレイアウトをfloat,flexに切り替え可能。
Bootstrap3のrowにあたるクラス名をfloat, flexなどとしています。
子要素のfloatプロパティの指定よりも親要素のflexレイアウトが優先されるのでflexboxレイアウトの取り扱いが簡単になります。
グリッド間にmarginがある。
BootstrapもFoundationも、グリッドレイアウトではmarginを完全に殺しているのが個人的には不満でした。グリッドに背景を付けるとき、ボックスを入れ子にしないといけないのもあまりクールではないという印象を持っていたので、制作にあたってはmarginを入れてました。
これを実現するために、グリッドのwidthにはcalcを使っています。（calcを使えないIE8では%指定に書き換えています）
逆にmarginを付けたくない場面も出てくることがあるため、float-nm, col-**-**nm というクラスも用意し、マージンなし（no-margin）にも対応しています。
右詰、左詰め自由自在
floatレイアウトでは基本的に左からグリッドを詰めていますが、col-**-***r と末尾にrを付けるとそのグリッドは右詰めになります。
同様に、親要素にflex-rを使うと、右詰めのflexboxレイアウトになります。
margin, paddingの値をメディアクエリごとに変更できる
グリッドレイアウトでも、余白を広く取ると印象的なデザインにすることができます。
一方、広すぎる余白は狭い画面では見にくくなります。
両方を満たすため、margin, paddingの値を各メディアクエリごとに設定できるようにしました。
他の軽量フレームワークに比べてファイルサイズが肥大化している主な原因はこれです。
画像サイズが自動でいい感じになってくれる。
floatを設定している画像は、グリッド内に配置されていない場合、親ボックスの50%を最大値にしています。
そうすることで、画面幅が中途半端に狭くなった時、回り込んでいる文字が1行数文字しかない、というあまり美しくない状態を回避しています。
ただしこの設定はspサイズでは解除され、回り込んだ文字は画像下に配置、画像の最大幅は100%になります。
画像にキャプションも付けられる
WordPressなどで見られる画像の下にキャプションを付けるあれを実現するクラスを作っています。詳細はreadme.mdを読んでください。
設計思想とか経緯とか
グリッドシステムの作り方とかは、Bootstrap3から多くのことを学ぶことができました。「Bootstrapすげぇ」の印象は今も変わりません。
一方、実際に使うと微妙に使いにくい、というのも感じていました。2案件くらいBootstrapを使ってみましたが、その後はもう使っていません。ボタンなどのスタイルはほとんど上書きしますし、使わない機能もてんこ盛り、CSSファイルが大きくて読み込み時間の無駄が気になるなど。結局Bootstrapのグリッドの作り方を真似てグリッドを作る、という形で取り込んでやっていました。
Bootstrapは、CSSを知らない人が使うにはよいけれど、個別にデザインや装飾を作り上げるウェブデザイナーにとっては使いにくい、と私は判断しています。
その一方で、セマンティックなネーミングなど、学ぶものも山ほどあり、一度は使ってみたりコードを読んだりすべき優れたプロダクトでもあります。
先の「XPでIE8」というひどい案件は、同時に膨大なページ数の案件でもありました。その時の経験から、これだけの機能があれば大概のレイアウトに対応できる、という見通しができ、CSSフレームワークの作成に踏み切りました。機能面で欲張って最初に作ったkomitsuboshi-cssです。こちらはいまだ開発段階です。
そこからグリッドだけ抽出したことで、リリースに至りました。説明も充実させることができたと思います。
グリッドシステムに関しては、「痒いところに手が届くやつを」というのを目標に作っており、半年ほど使っていますがこの目標はほぼ達成できていると考えています。
