さっそく始める

ダウンロード

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 に記載されたカラーコード、フォント名を変更して、動作を確認してみてください。