echo.css version 1.3.0

CSS framework optimized for CMS theming



More

CMSサイト制作に最適化

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

Style guide

チーム制作を想定

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

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

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


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

Atomic Designとの互換

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

精細なカラーパレット

echo.cssは、フレームワーク内で4色までのコーポレートカラーと、2色のシステムカラーを使用できます。
Sassを使用できる環境では、それぞれの色に対し、背景に使用したときと、テキストに使用したときで色合いを変更できます。さらに、色名そのものも、プロジェクトに合わせて自由に変更可能です。

Font Awesome対応

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

コーディングルール変換

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


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

IE
11+

Firefox
latest

Windows X and MacOS 10.13+