Frontend framework and Template

Front-end Framework
&
Template
Foundation, Gumby, HTML5 Boilerplate
SSS(G) hiro345

自己紹介
twitter:
@hiro345
執筆活動:
日経Linux、@IT
興味のある分野:
Raspberry Pi、Java、Dart、
Linux、Web技術一般
blog:
http://www.sssg.org/blogs/hiro345/

紹介するもの
• Foundation | The Most Advanced Responsive Front-end
Framework from ZURB
http://foundation.zurb.com/
• Gumby - A Flexible, Responsive CSS Framework -
Powered by Sass
http://gumbyframework.com/
• HTML5 Boilerplate: The web’s most popular front-end
template
http://html5boilerplate.com/

Foundation
• MITライセンス
• index.html が参考になる
• ダウンロードをして展開をする。下記のようにす
ると、founcationに展開される。
• $ wget http://foundation.zurb.com/develop/download.html
$ mkdir foundation
$ cd foundation
$ unzip ../foundation-5.4.0.zip

Foundationで紹介する機能
• グリッドシステム
http://foundation.zurb.com/docs/components/grid.html
• パネル
http://foundation.zurb.com/docs/components/panels.html
• ボタン
http://foundation.zurb.com/docs/components/buttons.html
• ナビゲーション（トップバー）
http://foundation.zurb.com/docs/components/topbar.html

Foundation 基本コード
<!doctype html>
<html class="no-js" lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>タイトル</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

Foundationのグリッドシステム
<div class="row">
<div class="small-2 large-4 columns"><div class="panel">s2 l4 columns</div></div>
<div class="small-4 large-4 columns"><div class="panel">s4 l4</div></div>
</div>
<div class="row">
<div class="large-3 columns"><div class="panel">large-3</div></div>
</div>
<div class="row">
</div>
<div class="row">
<div class="small-3 columns"><div class="panel">s3</div></div>
<div class="small-9 columns"><div class="panel">s9</div></div>
</div>
<div class="row">
<div class="large-4 columns"><div class="panel">l4</div></div>
</div>
<div class="row">
</div>
<div class="row">
</div>
＊サンプルにパネルを追加して表示を見やすくしました

largeとsmallの違い
画面が広いとき画面が狭いとき

Foundationでのパネル
<div class="row">
<div class="large-3 columns">
<div class="panel">regular panel</div>
</div>
<div class="panel callout">callout panel</div>
</div>
<div class="panel radius">panel radius</div>
</div>
<div class="panel callout radius">panel callout radius</div>
</div>
</div>
＊callout は目立たせたいときに使う
＊radiusは角がちょっと丸くなる

Foundationボタン
<a href="#" class="tiny button">Tiny Button</a><br/>
<a href="#" class="small button">Small Button</a><br/>
<a href="#" class="medium button">Medium Button</a><br/>
<a href="#" class="large button">Large Button</a><br/>
<a href="#" class="small radius button">Small Radius Button</a><br/>
<a href="#" class="small round button">Small Round Button</a><br/>
<a href="#" class="medium success button">Medium Success</a><br/>
<a href="#" class="medium alert button">Medium Alert Button</a><br/>
<a href="#" class="medium secondary button">Secondary Button</a></p>
<a href="#" class="medium button disabled">Medium Disabled Button</a></p>
<a href="#" class="medium button expand">Medium Expanded Button</a></p>
＊サイズはtiny, small, medium, large
＊色をつけるにはsuccess, alert, secondary
＊角を丸めるにはradius, round
＊無効ボタンはdisabled
＊画面いっぱい使うボタンにはexpand

Foundationでのトップバー
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">Foundationサンプル</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>メニュー</span></a></li>
</ul>
<section class="top-bar-section">

<ul class="right">
<li class="active"><a href="sample_buttons.html">sample_buttons.html（Active）</a></li>
<li class="has-dropdown">
<a href="#">ドロップボタン</a>
<ul class="dropdown">
<li><a href="sample_grid.html">sample_grid.html</a></li>
<li class="active"><a href="sample_panels.html">sample_panels.html（Active）</a></li>
</ul>
</li>
</ul>

<ul class="left">
<li><a href="#">左側のボタン</a></li>
</ul>
</section>
</nav>

Gumby
• ダウンロードしたアーカイブファイルに含まれるdemo.html, ui.html が参
考になる
• カスタムダウンロード可能
http://gumbyframework.com/customize
• コードはGitHubからダウンロード可能。下記の手順だと、Gumby-2.6.3に
展開される。
$ wget -O Gumby-2.6.3.zip
https://github.com/GumbyFramework/Gumby/archive/2.6.3.zip
$ unzip ~/Gumby-2.6.3.zip

Sass
• Sassを使うならツールが必要。下記ではCentOSでrbenvの環境を用意し、Gemパッケージの
compass、sass、modular-scaleをインストール
• compass compileはGumby-2.6.3ディレクトリをカレントにして実行
• compass watchを実行しておくと、sassファイルの更新を監視して自動でCSS生成
• カスタマイズは、Gumby-2.6.3/sass/_custom.scss に記述すること
$ sudo yum -y install git
$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
$ rbenv install 2.1.2
$ rbenv global 2.1.2
$ gem install compass modular-scale sass
$ compass compile
$ compass watch

HTML5 Boilerplate
• シンプルでわかりやすい
• カスタマイズ可能
http://initializr.com/
• コードはGitHubからダウンロード可能。下記で用意すると
、html5-boilerplate-4.3.0というディレクトリに展開される
$ wget -O html5-boilerplate-4.3.0.zip
https://github.com/h5bp/html5-boilerplate/archive/v4.3.0.zip
$ unzip ../html5-boilerplate-4.3.0.zip

HTML5 Boilerplate 特長
•HTML5対応
•主要ブラウザ対応
Chrome, Opera, Safari, Firefox 3.6+, IE6+
•CSSを標準化するNormalize.css を同梱
http://necolas.github.com/normalize.css/
•最新のjQueryのCDN版を利用可能。
＊ローカル用も同梱（4.3.0ではjquery-1.10.2.min.js）
http://jquery.com/
•最新のModernizr(4.3.0ではmodernizr-2.6.2.min.js)を採用
http://modernizr.com/

HTML5 Boilerplateの
ファイル基本構成
.
├── css
│ ├── main.css
│ └── normalize.css
├── doc
├── img
├── js
│ ├── main.js
│ ├── plugins.js
│ └── vendor
│ ├── jquery.min.js
│ └── modernizr.min.js
├── .htaccess
├── 404.html
├── apple-touch-icon-precomposed.png
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
└── favicon.ico
index.html
404.html

HTML5 Boilerplate
基本コード
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>サンプル</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script src=“js/vendor/jquery-1.10.2.min.js”></script>')
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>

同梱のindex.htmlに記述されて
いるその他のコード
<!DOCTYPE html>



 <html class="no-js"> 
<head>
<meta charset=“utf-8">
（略）
</head>
<body>

<p>Hello world! This is HTML5 Boilerplate.</p>
（略）

<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>

まとめ
• 用途に応じてフレームワークを選択しよう
• HTML5 Boilerplateのようなものも利用すると最新動向をチェックしなくて
作り始めることができるので、短納期・短期間公開のWebページ（イベン
ト告知ページなど）には便利
• フロントエンドのフレームワークをカスタマイズするにはSassなどが必須
• ツールはYEOMANを使うのがいいかもしれない。
検索すると下記がある模様
yeoman-foundation
generator-gumby
generator-h5bp
＊The web's scaffolding tool for modern webapps | Yeoman:
http://yeoman.io/

Frontend framework and Template

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Similar to Frontend framework and Template

Similar to Frontend framework and Template (20)

More from hiro345

More from hiro345 (11)

Recently uploaded

Recently uploaded (8)

Frontend framework and Template