Webアプリケーションを開発しようと思ったら、まず何をするでしょう。HTTPサーバを立てるでしょうか、Bootstrapのダウンロードを行うかも知れません。さらにjQueryやBackbone.jsやAngularjsなどを設定するかも知れません。 しかし今後はそんな面倒ごとをせず、Web Starter Kitをセットアップしましょう。これだけですぐにWebアプリケーションの開発がスタートできます。

Web Starter Kitの使い方

実行は gulp コマンドで行います。ビルドを実行します。

ビルド中。

こちらがメイン画面。もちろんレスポンシブ。

ここからUIを見ていきます。

ボタン。

リスト。

リンク。

アイコン。

アイコン+サークル。

パン屑。

テーブル。

グリッド。

カラー。

Googleっぽい配色も。

ハイライト。

コード表示。

こんな感じの表示も。

機能リスト。

ケーススタディ。

機能ブロック。

ナビゲーション。

作成はエミュレート機能と合わせると便利です。

Web Starter Kitの主な特徴はレスポンシブ、クロスデバイス同期、ライブブラウザリロード、パフォーマンス最適化、ビルトインHTTPサーバ、Sassサポートなどとなっています。

Web Starter KitはRuby/node製のオープンソース・ソフトウェア(Apache License)です。

Web Starter Kit google/web-starter-kit