frontend framework and template
DESCRIPTION
Foundation, Gumby, HTML5 BoilerplateTRANSCRIPT
Front-end Framework&
TemplateFoundation, 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 class="small-6 large-4 columns"><div class="panel">s6 l4</div></div></div><div class="row"> <div class="large-3 columns"><div class="panel">large-3</div></div> <div class="large-6 columns"><div class="panel">large-6</div></div> <div class="large-3 columns"><div class="panel">large-3</div></div></div><div class="row"> <div class="small-6 large-2 columns"><div class="panel">s6 l2</div></div> <div class="small-6 large-8 columns"><div class="panel">s6 l8</div></div> <div class="small-12 large-2 columns"><div class="panel">s12 l2</div></div></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 class="large-8 columns"><div class="panel">l8</div></div></div><div class="row"> <div class="small-6 large-5 columns"><div class="panel">s6 l5</div></div> <div class="small-6 large-7 columns"><div class="panel">s6 l7</div></div></div><div class="row"> <div class="large-6 columns"><div class="panel">l6</div></div> <div class="large-6 columns"><div class="panel">l6</div></div></div>
＊サンプルにパネルを追加して表示を見やすくしました
large と small の違い画面が広いとき 画面が狭いとき
Foundation でのパネル<div class="row"> <div class="large-3 columns"> <div class="panel">regular panel</div> </div> <div class="large-3 columns"> <div class="panel callout">callout panel</div> </div> <div class="large-3 columns"> <div class="panel radius">panel radius</div> </div> <div class="large-3 columns"> <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• MIT ライセンス
• ダウンロードしたアーカイブファイルに含まれる 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
＊ ui.html より
＊ ui.html より
＊ ui.html より
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• MIT ライセンス
• シンプルでわかりやすい
• カスタマイズ可能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><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset=“utf-8">（略） </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <p>Hello world! This is HTML5 Boilerplate.</p>（略） <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <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/