ダウンロード
GitHubのリポジトリから、最新のパッケージをダウンロードしてください。
https://github.com/webbingstudio/echo-css/archive/master.zip
パッケージを解凍すると、SCSS、CSS、ドキュメント（これ）、スタイルガイドがすべて含まれているプロジェクトが展開されます。
CSSファイル dist/css/echo.min.css を、あなたのウェブサイトに読み込ませてください。
<link rel="stylesheet" href="/css/echo.min.css">
文字サイズや背景色を強制的に変更する「ユーティリティクラス」を利用したい場合は、body全体を包括している要素（なければdiv要素等を追加する）に id="echo-document" を付与してください。
<body>
<div id="echo-document">
...
</div>
</body>色・フォントを自由に変更する
echo.cssでは、色・フォントのスタイルが分かれているCSSファイルも用意しています。
自分で色の追加や変更を行いたい場合は dist/css/echo-color.css, dist/css/echo-font.css を、dist/css/echo.min.css よりも後に読み込ませてください。
<link rel="stylesheet" href="/css/echo.min.css"> <link rel="stylesheet" href="/css/echo-color.css"> <link rel="stylesheet" href="/css/echo-font.css">
Sassを活用する
色の一括変更、利用予定のないクラスの削除を行いたい場合は、Sassの活用をお勧めします。
展開したファイル一式を、あなたのプロジェクトのディレクトリに配置してください。
/dist/ が、ドキュメントルートとなります。
不要なファイルについて
以下のファイル・ディレクトリは、このサイト用のファイルです。プロジェクトからは削除してください。localhostを構築している場合、 /styleguide/ を残しておくと、動作チェックができます。
- /index.html
- /doc_include/ 以下すべて
- /docs/ 以下すべて
- /styleguide/ 以下すべて
- /share/ 以下すべて
Gulpをインストールする
以下のコマンドを実行して、 /package.json に記載されたGulpパッケージをインストールしてください。
npm install
作業を始める
以降は、作業前に gulp コマンドを実行すると、 /_scss/ ディレクトリの変更が、常時 /dist/css/ に反映されるようになります。
npm run gulp
/_scss/_config_basic.scss に記載されたカラーコード、フォント名を変更して、動作を確認してください。