少し、フロントエンドの勉強をしていこうと思いまして。
ド素人ですが、今回はCSSフレームワークのさわりを試してみました。
CSSフレームワークといえばTwitter Bootstrapかと思いますが、今回はFoundationにしてみました。
Zurb Foundation
http://foundation.zurb.com/
なんとなく、Twitter Bootstrap以外で試してみたかっただけで、Bootstrapに対する何か深い意図があるわけではありません。
新規プロジェクト?の作成
まずは環境の準備からですが、正直なところ今のフロントエンドの事情はよくわかっていません…。これからキャッチアップですね。
今回は、GulpとBowerでやることにします。
Getting Started With Foundation CSS
http://foundation.zurb.com/docs/css.html
まずはnpmでGulpとBowerをインストール。
$ npm install -g gulp bower
「npm init」から、いろいろインストール。
$ npm init
$ npm install gulp gulp-filter gulp-webserver main-bower-files del --save-dev
bower init。
$ bower init
Foundationをインストール。
$ bower install foundation --save
gulpfile.jsを、こんな感じで作成。
gulpfile.js
var gulp = require("gulp"); var webserver = require("gulp-webserver"); var gulpFilter = require("gulp-filter"); var mainBowerFiles = require("main-bower-files"); var del = require("del"); gulp.task("webserver", function() { gulp .src("public") .pipe(webserver({ port: 8000, livereload: true })); }); gulp.task("clear-libs", function() { del.sync("public/js/vendor"); del.sync("public/css/vendor"); }); gulp.task("bower", ["clear-libs"], function() { var jsFilter = gulpFilter("**/*.js"); var cssFilter = gulpFilter("**/*.css"); return gulp .src(mainBowerFiles()) .pipe(jsFilter) .pipe(gulp.dest("public/js/vendor")) .pipe(jsFilter.restore()) .pipe(cssFilter) .pipe(gulp.dest("public/css/vendor")) .pipe(cssFilter.restore()); }); gulp.task("default", ["webserver", "bower"]);
これが今に合っているのか、よくわかりませんが…。
{ "name": "foundation-getting-started", "version": "0.0.1", "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "foundation": "~5.5.2" }, "overrides": { "foundation": { "main": [ "css/*", "js/foundation.min.js", "js/vendor/*" ] } } }
とりあえず、これでいってみます。
ページを作ってみる
とりあえず、Getting Startedに載っていた内容を元に、ベースのページを作ってみます。
public/getting-started.html
<!DOCTYPE html> <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]--> <html class="no-js" lang="en" > <head> <meta charset="utf-8"> <!-- If you delete this meta tag World War Z will become a reality --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation 5</title> <!-- If you are using the CSS version, only link these 2 files, you may add app.css to use for your overrides if you like --> <link rel="stylesheet" href="css/vendor/normalize.min.css"> <link rel="stylesheet" href="css/vendor/foundation.min.css"> <!-- If you are using the gem version, you need this only --> <link rel="stylesheet" href="css/app.css"> <script src="js/vendor/modernizr.js"></script> </head> <body> <!-- body content here --> <script src="js/vendor/jquery.js"></script> <script src="js/vendor/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html>
Gulpでの設定に合わせて、スクリプトなどのパスはちょっと変えています。
で、Gulpを起動。
$ gulp
ポート8000で、サーバーが起動します。
ここで
http://localhost:8000/
にアクセスしても、まだ真っ白です。
テンプレートのレイアウトを当てはめてみる
続いて、Foundationのテンプレートのページから、適当なテンプレートを当てはめてみます。
HTML Templates
http://foundation.zurb.com/templates.html
今回は、Blogのテンプレートにしてみました。
「HTML」と書かれた部分をクリックすると、HTMLが表示されるので
これを、ペタッと先ほど作成したHTMLファイルの
<body> <!-- body content here -->
に続けて貼ってみます。もうひとつdivくらい入れた方がいい気もしますが…。
それっぽいの出ました!
参考)
webpackでbower使って外部ライブラリの依存解決する
http://qiita.com/mizchi/items/674c76104e1a0f8a68f4
GruntとgulpでBower環境を作る
http://create-something.hatenadiary.jp/entry/2014/07/27/204633