Typeplate

TypeplateというCSSフレームワークを知った。必要最小限のものがうまくコンパクトにまとまっているのと、これの導入時点ではマルチ・クラスを強要しないようになっているのが良い。BootstrapやPureのような重量級のものとは違ってこれだけでOKとはならないものだけど、文書の基本的な体裁を整えるという面ではどのようなウェブサイトでもうまく動いてくれそう。

インストールにはBowerを使うのが良い。CSSでもSassでもファイルひとつなのでコピーしても良いけど。

Sassの!defaultフラグについてはSassの!defaultフラグの使い方と使われ方でもどうぞ。

Sassライブラリでは全ての変数が!defaultフラグを付けて定義されているので、簡単に上書きできる。例えばデフォルトのフォント・サイズを16px、フォントをHelvetica Neueにしたい場合は以下のように書く。

$serif-boolean: false;
$font-size: (16px / 16px);
$custom-font-family: "Helvetica Neue";

@import 'typeplate';

出力されるCSSでは以下のようになる(コメント内はデフォルトで実際には出力されない)。

html {
  /* font: normal 112.5%/1.65 serif; */
  font: normal 100%/1.65 "Helvetica Neue", sans-serif;
}

このような形でHTMLの様々な要素に直接スタイルが当てられていく。そういう意味ではブラウザーのデフォルト・スタイルシートを改善するものといった捉え方をすると良いかも。Normalize.cssが化粧下地としたら、Typeplateはナチュラルメイクというか。

一方でプル・クオートのような特徴的なモジュールはクラス経由で利用することになる。ドキュメントにマークアップ例が書かれていることからもわかるように、クラスを振る要素まで考慮されてスタイルが考えられているので、プル・クォートを作りたいならaside要素にpull-quoteというクラスを振るという縛りがある。この縛りには不自由な所があり、生産性という面に限ってはマイナス。それ以外の面においては良い縛りだと思う。「文字を大きくするには<h1>タグを使いましょう」的な使われ方をしかねないという恐れもちょっとあるけど。

h1要素等に対して直接スタイルをしている所や.pull-quoteのようなセマンティックな側面を持つクラスはともかく、.deltaなどといったユーティリティ・クラスが出力されてしまう所はちょっと惜しいなと思った。さすがにあんまり必要なさそうなのでプレースホルダー・セレクターで作り直して、CSS版はそれを使って.delta等のユーティリティ・クラスを出力するようにした方が良さそう。

このウェブサイトのDocumentsに置いてる文書群で使ってるnatural.scssをもっときちんと作ったものというと適当かも。CSSフレームワークというととかくリッチにヘビーになりやすい世界なので、Pearsと共に一石を投じる存在なんじゃないかと思う。なんかの時に使ってみたい。