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

2.

Unzip

3.

Link CSS

<link rel="stylesheet" href="/path/to/css/echo.min.css">

4.

Read Styleguide

Enjoy!

Browser compatible

Chrome
latest

Safari
latest

Edge
latest

Firefox
latest

Windows X and MacOS 10.15+

Internet Explorer 11の対応状況はこちら

Past versions

Version 2.6.1: Package | Style guide

Version 1.3.0: Package | Style guide