version 3.1.2
つたわりやすい つかいやすい
わたしたちのCSSフレームワーク
More
レスポンシブデザイン
すべてのオブジェクトが、画面サイズに応じて適切に伸縮します。
「見出しだけ小さい」「ボタンだけ大きい」と悩むことはありません。
文字サイズなどの変化のパターンは役割ごとにグループ化。スタイルガイドの各ページに値が明記されているので、デザイナーとも簡単に共有できます。
複数カラムレイアウトでありがちな「ここでは伸縮してほしくない」にも対応しています。
色とフォント
echo.cssはグレースケールと2色のシステムカラーのみで構成しています。クリーンなウェブサイトづくりに最適です。
Sassを利用できる環境なら、日本のウェブフォントサービスの大問題「font-weight: bold で太さを変えられない」も変数設定だけで解決します。
パッケージには、色とフォントのスタイルだけを抜き出した、上書き用CSSも含まれています。色を変えたり、クラスを増やすカスタマイズが簡単にできます。
なんだ、
BEMじゃないのか
＼ まって！帰らないでー！ ／
echo.cssのコーディングルールはハイフンつなぎの「SMACSS」です。しかし…なんと！コーディングルールをBEMに変更することができます。接頭辞の「echo-」を消したり、FLOCSSのようにレイヤー接頭辞をつけるなども、自由自在です。
Sassの変数の修正が必要なのですが…BEM派なら大丈夫ですよね？
CMSに最適化
WordPress、Movable Type、Drupalなどの「コンテンツ・マネージメント・システム」。これらのテーマ制作のために、echo.cssは生まれました。
ブログやポータルサイトでよく見る、サイト回遊率を向上するオブジェクトを網羅しています。object-fitによる新しい画像トリミングなど、サイト運営を軽減する機能も充実しています。
echo.cssは
商用利用・再配布OKです
echo.cssは、MITライセンスを宣言しています。商用・非商用にかかわらず、自由にお使いください。
また、WordPressのテーマに使用した場合に限り、GPLv3ライセンスとなります。これは、WordPressはテーマディレクトリへの登録にあたり、コードの100%GPLを求めているためです。
もしも不具合や指摘などありましたら、作者のGitHubへプルリクエスト、もしくはSNSへご連絡ください。
Quick start
1.
2.
Unzip
3.
Link CSS
<link rel="stylesheet" href="/path/to/css/echo.min.css">
4.
Read Styleguide
Enjoy!
Past versions
Version 2.6.1: Package | Style guide
Version 1.3.0: Package | Style guide