レスポンシブ優先設計
echo.cssは、ほぼすべてのオブジェクトに、現在の画面の幅に対して最も適切と考えられるスタイルを定義しています。
グリッドやコンテナ等のオブジェクトは、画面サイズでスタイルが変化することが一般的です。
しかし、他のオブジェクトが固定のスタイルのままでは「デスクトップではボタンが小さすぎる」「スマートフォンでは余白が大きすぎる」という問題が生じます。
このため、echo.cssでは、画面サイズによりスタイルが変化する挙動を標準（優先）としています。
下記は .echo-title, .echo-button, .echo-input, .echo-card のサンプルです。画面サイズを変更すると、文字サイズ、ボタンの高さ、カードの余白が変化します。
レスポンシブにしてはならない状況への対応
ウェブサイトのデザインによっては、画面サイズによってスタイルが変わってはならない場合があります。予想される例は、以下のとおりです。
- グリッド内に配置されるカードなど、オブジェクトの幅がほとんど変化しない場合
- デスクトップで2カラムとなるウェブサイトで、サイドバー内のオブジェクトの幅がほとんど変化しない場合
- ビットマップの背景画像を使用したリッチデザインのインターフェースを作成する場合
echo.cssでは、このような状況に対応するため、可能な限り「画面サイズによりスタイルを変化させない挙動」を .echo-***-fixed という共通名称のサブクラスとして定義しています。
下記は変化させない挙動のサンプルです。画面サイズを変更しても外観は変化しません。
混乱を防ぐために
レスポンシブデザインを多用すると、デザインカンプを作成するための具体的なサイズがわかりにくくなり、混乱を招きます。echo.cssでは、できる限りわかりやすくなるよう、以下の配慮をしています。
- スタイルガイドに変化値・変化率を明記する（次項「レスポンシブグループ」、後述「フォントサイズ」）
1rem = 16pxかつ (breakpoint) がxs = 360px, xxl = 1440pxのときに、可能な限りピクセルを保つようにするemとremを使い分ける（後述「単位の扱い」）
高度：レスポンシブグループ
画面サイズに対するオブジェクトの変化（特に文字サイズ）のパターンは、可能な限りグループで整理し、挙動を統一しています。
display
ヘッダ・本文・フッタが別々のパターンで変化し、かつ、ヘッダは他と比較して非常に大きく変化します。 .echo-hero, .echo-flip が属しています。
body
文字サイズが本文を前提に変化します。 .echo-body, .echo-box, .echo-form が属しています。
article
文字サイズが狭い範囲での表示、もしくは補足的な情報を前提に変化します。 .echo-card, .echo-headline, .echo-media が属しています。
title
文字サイズが、見出しレベルが小さい数字になるほど大きく変化します。 .echo-title が属しています。
form
文字サイズだけでなく、最低高さも変化します。 .echo-nav, .echo-input, .echo-select が属しています。formグループとbuttonグループはまったく同じ挙動です（フォームに並べたときの体裁を揃えるためです）。
button
formと同じ挙動で、さらに最大幅も変化します。 .echo-button が属しています。また、大きなボタン xl, xxl があります。
なお .echo-toggle はこのグループには属していませんが、 .echo-button.echo-button-square と同じ高さと幅を持ちます。