Google の「Web Starter Kit」を WebMatrix で

f:id:daruyanagi:20140624213306p:plain

Twitter で小耳にはさんだ「Web Starter Kit」を少し試してみました（別に WebMatrix で、じゃなくていいんだが）。いわゆるボイラープレート（テンプレみたいなもん）ですね。

Mobile-optimized HTML boilerplate
Responsive multi-device layout
Visual component style guide
gulp.js build tooling (optional)
LiveReload
Cross-device synchronization of clicks, scrolls, navigation, and form-filling
Image optimization
JavaScript minification and optimization
CSS optimization
HTML minification
PageSpeed performance reporting
CSS autoprefixing

というのが特徴らしい。ブラウザーサポートはこんな感じ。

IE10, IE11, IE Mobile 10
FF 30, 31
Chrome 34, 35
Safari 7, 8
Opera 23, 24
iOS Safari 7, 8
Opera Coast
Android / Chrome 4.4, 4.4.3
Blackberry 1.0

IE11 で少しずれてるところがあった気もするけどキニシナイ。

f:id:daruyanagi:20140624213625p:plain

さっそくダウンロードし、アーカイブを展開しました。よくわからんのがぐちゃぐちゃ入ってる（gulp.js - the streaming build system のためのファイルなんだろうか？）けど、メインは app フォルダの中身みたい。このフォルダをさっそく［Microsoft WebMatrix で Web サイトとして開く］。

f:id:daruyanagi:20140624214238p:plain

スクリプトはメニュー関連のが最小限度。スタイルシートは SCSS で書かれていて、CSS にコンパイルされています。ほかに Web フォントやらアイコンやらが少し。

basic.html は HTML5 Boilerplate CSS を読み込んだだけのシンプルなスタイル。

<!-- build:css styles/components/main.min.css -->
<link rel="stylesheet" href="styles/h5bp.css">
<!-- endbuild -->

inde.html はいろいろ読み込んで Google デザインっぽくしたやつ。

<!-- build:css styles/components/main.min.css -->
<link rel="stylesheet" href="styles/h5bp.css">
<link rel="stylesheet" href="styles/components/components.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->