Sass の mixin ライブラリとしても利用できるようになった Basis v4.0.0 を公開しました。

Flexbox ベースのレスポンシブ CSS フレームワーク Basis をアップデートしました。主なアップデート内容は下記の通りです。

• Sass の Mixin ライブラリとしても利用できるように全体的にリファクタリング
• v3.0.0 で追加したタイポグラフィ機能の強化
• IE9 対応の見直し

Sass の mixin ライブラリとしても利用できるようになりました

$bs-use-mixin-only: true;とすることで Basis の各クラスの出力を行わずに、ミックスインだけを利用できるようになります。ミックスインライブラリとして使用したい場合は、Basis を使うプロジェクトのメイン Sass ファイルで次のように Basis をインポートしてみてください。

$bs-use-mixin-only: true;
@import /PATH/TO/basis/src/scss/basis;

例えば、グリッドを使いたい場合は下記のように使用できます。

.staffs {
    @include bs-c-row();
    .staff {
        @include bs-c-row__col(1, 3);
    }
}

<div class="staffs">
    <div class="staff">1/3</div>
    <div class="staff">1/3</div>
    <div class="staff">1/3</div>
</div>

v4.0.0 で Sass の構成を全体的に見直し、/basis/core/mixin/helperに便利ミックスインを、/basis/core/mixin/componentに Basis のコンポーネントを構成する基本的なミックスインを配置するようにしました。/basis/core/mixin/componentにはサンプルコードをコメントで書いていますので、基本的な使い方はそちらをご確認ください。

はじめての試みだったので基本的なコンポーネントだけの対応で、modifier まわりはほとんど対応していません。ミックスインライブラリとして使う場合はその辺は自分でやりたいだろうなぁという考えでそうしていますが、自分で使い込んでみて使い勝手を見て今後はどうしようかなぁという感じです。

タイポグラフィ機能の強化

v3.0.0 でバーティカルリズムをとりいれましたが（アニメーション機能の追加やバーティカルリズムの考え方を取り入れた Basis v3.0.0 を公開しました。）、そのバランスを崩さずに文字サイズや行間、余白の調整ができるように各種変数を用意しました。

/**
 * 基本となる文字サイズ
 * @type  rem
 */
$bs-font-size: 1.6rem;

/**
 * 各見出し要素の、文字サイズに対する拡大率
 * 文章中で h5、 h6 は使わない設計の場合は h2 や h3 の scale を小さめにしたほうがバランス良さそうです。
 * @type  int
 */
$bs-h1-font-size-scale: 3;
$bs-h2-font-size-scale: 2.5;
$bs-h3-font-size-scale: 2;
$bs-h4-font-size-scale: 1.5;
$bs-h5-font-size-scale: 1;
$bs-h6-font-size-scale: 1;

/**
 * 文字の上下辺と行の上下辺間の余白
 * 日本語の場合は .6rem くらいが良さそう。
 * @type  rem
 */
$bs-between-lines: .4rem;

/**
 * 余白の大きさの係数
 * Basis では文字サイズと行間の大きさに連動して自動的に段落間の余白も適切な大きさに設定されるようになっていますが、
 * もっと余白は大きめに取りたい、という場合はこの変数の数値を大きくしてください。
 * @type  int
 */
$bs-margin-coefficient: 1;

@import /PATH/TO/basis/src/scss/basis;

また、バーティカルリズムを崩さないためには適切な文字サイズ・行間のバランスを崩さないことが大切だと思いますので、文字サイズと行間を一度に自動設定できるミックスインも作りました。

.foo {
    @include bs-font-size-line-height(1.4rem);
}

IE9 対応の見直し

Basis は基本的に IE10+ 対応ですが、別途 CSS を読み込むことで IE9 にも「それなりに」対応できるようになっています。

<!--[if lt IE 10]>
<link rel="stylesheet" href="/PATH/TO/basis/dist/css/plugin/basis-ie9/basis-ie9.min.css" />
<![endif]-->

この IE9 用の CSS を全体的にリファクタリングしました。グリッド周りはこれまでよりも IE9 対応できる modifier が増えました。が、Flexbox の挙動全てを IE9 にも対応させるのは厳しくそれっぽく対応しているだけなので、完全な対応を行いたい場合は別の CSS フレームワークをお使いになるのが良いかと思います。