Foundation5 SCSSの使い方


こちらにダウンロード手順がこまかくかいてあります。

Git
Ruby 1.9+
NodeJS

こちらが必要とのこと。僕のMacにはRuby2.0.0がインストールされています。

Foundationのアップデートをチェックするためにパッケージマネージャーのbowerを忘れずにインストール。

sudo npm install -g bower grunt-cli

今回はphotosというプロジェクトをDownloadsに作成するのでターミナルから

cd Downloads
foundation new photos

これでCompassモードでのプロジェクトが作成されます。

Scoutを使っていきます。
プロジェクトのフォルダを指定して、input フォルダにscss、outputにstylesheetsフォルダを新規作成です。
これで_setting.scssを編集することによって、stylesheetsフォルダの中にcssファイルが生成されていきます。

githubも立ち上げておきましょう。
もちろんwatchするフォルダはphotosになります。

最初のindex.htmlはtop-bar-navが入っていないのでカスタマイズするときに確認できません。
こちらから
gridテンプレートをもらってくるといいかもしれません。

2014-02-10 9.29 のイメージ

こんなふうにtop-bar-navとかが見えるようになればカスタマイズしやすくなります。あとボタン類は残しておいた方がいいですね。
ここまで進んだらscssフォルダの_setting.scssを編集してカラーリングを変えていきます。

今日はここまで。次回に続きます。

ご自由にどうぞ