キタジマタカシ 
Flexbox ベースのレスポンシブ CSS フレームワーク Basis をアップデートしました。アップデート内容は下記の通りです。
- トランジション、アニメーション用クラスの追加
- 行間や余白の取り方にバーティカルリズムの考え方を適用
- ヒーローコンポーネントの追加
- ブレイクポイントを px ベースから em ベースに変更
- Normalize.css を最新版にアップデート
トランジション、アニメーション用クラスの追加
トランジション
CSS トランジションは1行で設定できるのでわざわざクラスを作る必要はないかなとも思ったのですが、サイトごとにトランジションの感じを変数で統一できるようにするためにクラスを用意しました。変数は下記のようになっています。
/**
* アニメーションにかかる時間
* @type second|milisecond
*/
$bs-transition-duration: .1s !default;
/**
* アニメーションのイージング
* @type string
* @see http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
*/
$bs-transition-function-timing: ease-out !default;
トランジション用のクラスとして、全プロパティにトランジションを適用する._u-animate、width・height にトランジションを適用する._u-animate-size、透明度にトランジションを適用する._u-animate-opacityが用意されています。
アニメーション
Web サイトの UI で使うような動きはだいたいトランジションでまかなえますが、注目を引かせるためにポイントとしてブルブル震える要素があると面白いかなと思い、アニメーション用のクラスも追加しました。デフォルトではマウスオーバーでアニメーションするようになっていますが、ミックスインが用意してありますので、それを使えばマウスオーバー時ではない任意のタイミングでアニメーションを適用できます。
結構気に入っているのでここに載せたかったのですが、このサイトは Basis を使っていないので載せれません…（TT
マニュアルサイトにサンプルがありますのでぜひブルブルさせてみてください。
行間や余白の取り方にバーティカルリズムの考え方を適用
見出しや段落などのデフォルトの行間・余白のバランスがどうもしっくりきていなかったので、バーティカルリズムの考え方を取り入れてみようとゴチャゴチャやってみました。
いろいろ調べたところ文字サイズが 16の倍数、行間・要素間の余白が 24 の倍数が良い的な感じだそうですが、素直にそのとおりに適用してしまうと見出しのサイズがどえらいことになってしまうので、行間・要素間の余白を基本 24 で 8 の倍数を使うようにしました。サイトごとに一から設計するのであれば 16/24 のバランスが良いのだと思いますが、フレームワークでやるとすると結構バランスの取り方が難しいなぁと。それほどおかしくなっていないので今の設計でまぁ問題ないだろう思っていますが、気になる場合はサイトごとに再調整したほうが良いかと思います。
サイトイメージにあわせて文字サイズや余白、行間は調整することが多いと思います。ゆったりしたサイトなら行間や余白を大きめにとるとか、読みやすさ重視のサイトなら文字サイズを大きめにするとか。そういうとき、僕は今まで目分量で何となく文字サイズ・行間・余白を設定していましたが、サイトを作るたびにしっくりくるバランスを考えないといけないのでめんどくさいなーと思っていました。今回 Basis にバーティカルリズムの考え方を取り入れたことでこの辺りの作業を効率化できるのでは、という狙いがあります。
各サイズは変数として定義されており、Basis を利用するサイトでこの変数を上書きすれば文字サイズ・行間・余白が連動して自動的に最適な数値に設定されるようになっています。デフォルトの値は下記のようになっています。
/**
* 文字サイズ
* @type rem
*/
$bs-font-size: 1.6rem !default;
/**
* 行の上底辺と文字の上底辺間の余白
* @type rem
*/
$bs-between-lines: .4rem !default;ちなみに、日本語の場合デフォルト値では少しきつめになるので、$bs-between-linesを少し大きめに上書きしたほうが良さそうでした。
ヒーローコンポーネントの追加
入れるかどうか迷ったのですが、基礎的な骨組みだけを入れる形ならジャマにならないかな…ということでヒーローコンポーネントを追加しました。
ヘッダー・フッターを含むヒーローエリア、背景画像固定のヒーローエリア、背景画像の上にオーバーレイを重ねるヒーローエリア、流行りのブラウザの高さいっぱいに広がるヒーローエリア、なんかが簡単に使用できます。高さや余白はサイトごとにそれぞれ変わる部分だと思うので初期値は入れていません。そのため、高さや余白についてはそれぞれで CSS の追加が必要です。
ブレイクポイントを px ベースから em ベースに変更
coliss さんに「Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要」という記事がでていまして、px ベースだと意図したとおりに動作しないブラウザがあるので em ベースにしたほうが良い、ということだったので Basis のブレイクポイントも em ベースに変更しました。
Normalize.css を最新版にアップデート
Normalize.css v4.0.0 がリリースされていたので反映しました。どのようなアップデートが行われているのかはちゃんと確認していませんが恐らく問題無いでしょう！
