echo.css version 2.6.2

CSS framework optimized for CMS theming



More

CMSサイト制作に最適化

"echo.css"は、SMACSS, FLOCSSを設計ベースとしたCSSフレームワークです。特に、WordPress等のCMSを組み込んだウェブサイトの制作に最適化しています。
CMSによく見られる機能を想定したコンポーネント、コンテンツの微調整を行う補助クラスを数多く実装しています。
ぜひ「スタイルガイド」をご覧ください。

Style guide

チーム制作を想定

実務のウェブ制作において、たった一人でサイトのすべてを担当することはまれです。ほとんどの場合、ディレクター、デザイナー、コーダー(もしくはフロントエンドエンジニア)が相互に協力しあって進めていきます。
このときコーダーは、デザイナーの意向やディレクターの変更指示を、コードの整合性を保ちつつ反映できるかが問われます。
echo.cssは、将来的な拡張や想定外対応を意識した、すべての人に理解しやすい設計を心がけています。

マルチバイト言語への配慮

日本、中国、韓国などの東アジア圏では、英語圏のシングルバイト言語に加え、特殊なマルチバイト言語を使用しています。
文字の種類は数千字におよび、画数が多い、精細な文字も少なくありません。このため、タイポグラフィやウェブフォントサービスにも、特殊なルールが見られます。
echo.cssは、東アジア圏の言語で書かれたウェブサイトを美しく、効率的に制作できるよう配慮しています。


echo.css 
他にもこんなことができます

コーディングルール変換

echo.cssは、コードの読みやすさを優先し、コーディングルールにSMACSSを採用しています。
しかし、Sassを使用できる環境では、簡単な設定でコーディングルールをBEMに変更できます。また、各クラスの接続子、接頭辞も詳細にカスタマイズ可能です。

精細なカラーテーブル

echo.cssは、3色までのデザインカラーと、2色のシステムカラーを使用できます。アクセシビリティに配慮し、WCAG 2.1の最低限レベルの達成基準を満たしています。
Sassを使用できる環境では、それぞれの色に対し、背景に使用したときと、テキストに使用したときで異なる色を設定できます。

Font Awesome対応

Font Awesomeは、最もウェブサイトに採用されているアイコンフォントのひとつです。echo.cssでは、Font Awesomeを同時に使用することを想定し、ボタンやナビゲーション内にアイコンを表示した場合の見た目の最適化を行っています。

Atomic Designとの互換

Atomic Designとは、コンポーネント単位でウェブサイト内のUIを制作していくデザインの手法です。Atomic Design自体はコーディングのために作られたものではありませんが、その思想はCSSモジュールに通じるものがあります。
echo.cssでは主要コンポーネントの構造をAtomic Designにならうことで、デザイナーとの意思疎通を容易にしています。


echo.css 
商用利用・再配布OKです

echo.cssは、MITライセンスを宣言しています。商用・非商用にかかわらず、自由にお使いください。

また、WordPressのテーマに使用した場合に限り、GPLv3ライセンスとなります。これは、WordPressはテーマディレクトリへの登録にあたり、コードの100%GPLを求めているためです。

このCSSフレームワークをもとに、多くのCMSでより良いテーマが公開されることを望みます。もしも不具合や指摘などありましたら、作者の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