ダウンロード
GitHubのリポジトリから、最新のパッケージをダウンロードしてください。
https://github.com/webbingstudio/echo-css/archive/master.zip
パッケージを解凍すると、SCSS、CSS、ドキュメント(これ)、スタイルガイドがすべて含まれているプロジェクトが展開されます。
CSSだけを使用する
echo.cssはCSSだけを気軽に使用することができます。ただし、色名の変更など、Sassを活用した高度なカスタマイズは利用できないことをご了承ください。
CSSファイル /dist/css/echo.min.css
のみを、あなたのウェブサイトに読み込ませてください。
<link rel="stylesheet" href="/css/echo.min.css">
Sass・Gulpを活用する
展開したファイル一式を、あなたのプロジェクトのディレクトリに配置してください。
/dist/
が、ドキュメントルートとなります。
不要なファイルについて
以下のファイル・ディレクトリは削除してください。 /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
に記載されたカラーコード、フォント名を変更して、動作を確認してみてください。