1. Initializr
2. 320 and up
3. inuit.css
4. Skeleton
5. Foundation
Initializr
head要素
<!doctype html> <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--> <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--> <!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title> ... </title> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script> </head>
コンディショナルコメント
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--> <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--> <!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
Paul Irish氏が提案するIEの過去バージョンに対するCSSハック
Conditional stylesheets vs CSS hacks? Answer: Neither!
IE対応
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IEの最新のレンダリングエンジンが適用される。
Google Chrome Frameがインストールされている場合は、Google Chrome Frameで表示。
Viewport
<meta name="viewport" content="width=device-width">
デバイス横幅に合わせてコンテンツを表示するため「device-width」を指定。
modernizr.js
Respond.js or html5shiv.js
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
modernizr.js は様々なブラウザを HTML5 と CSS3 に対応させる JavaScript ライブラリ。
IE で CSS3 Media Queries を有効にする Respond.js も組み込まれている。Respond.js の替わりに html5shiv.js を選択することも可能。
すべてに共通しているが、<html lang=”en”> を <html lang=”ja”> に変更するのをお忘れなく。
Body要素
> ディフォルトのマークアップ構造
<body>
<div id="header-container">
<header class="wrapper clearfix">
<h1> ... </h1>
<nav> ... </nav>
</header>
</div>
<div id="main-container">
<div id="main" class="wrapper clearfix">
<article>
<header> ... </header>
<section> ... </section>
<footer> ...</footer>
</article>
<aside> ... </aside>
</div>
</div>
<div id="footer-container">
<footer class="wrapper">
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/script.js"></script>
</body>
各エリア内に、header, article, footer 要素を内包している構造が特徴的。
JavaScript は body 要素の最後で読み込んでいる。こうすることでフロントエンドのパフォーマンスが向上する。
jQuery の読み込みは、オンライン時は CDN、オフライン時は内部ファイルを参照するように切り替えている。
CSS
モバイルファースト設計
ブレイクポイントは min-width: 480px、min-width: 768px、min-width: 1140px の3つが指定されており、カラムを float で並び替えるだけのシンプルな設計。
320 and up
head要素
<!doctype html> <!-- HTML5 Boilerplate --> <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--> <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> <head> <meta charset="utf-8"> <title> ... </title> <meta name="description" content=""> <meta name="author" content=""> <!-- http://t.co/dKP3o1e --> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- For all browsers --> <link rel="stylesheet" href="css/320andup.css"> <!--[if (lt IE 9) & (!IEMobile)]> <script src="js/selectivizr-min.js"></script> <![endif]--> <!-- JavaScript --> <script src="js/modernizr-2.5.3-min.js"></script> <!-- For iPhone 4 --> <!-- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png"> --> <!-- For iPad 1--> <!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> --> <!-- For the new iPad --> <!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png"> --> <!-- For iPhone 3G, iPod Touch and Android --> <!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> --> <!-- For Nokia --> <!-- <link rel="shortcut icon" href="img/l/apple-touch-icon.png"> --> <!-- For everything else --> <link rel="shortcut icon" href="/favicon.ico"> <!--iOS --> <!-- <meta name="apple-mobile-web-app-capable" content="yes"> --> <!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> --> <!-- <link rel="apple-touch-startup-image" href="img/splash.png"> --> (省略) </head>
あらゆるデバイスに対応する目的で、とにかく複雑な head 要素が特徴。
Apple touch icons の振り分けも細かい。
CSS
Media Queries も細かく設定されているが、中身は空。
細かいデバイス指定を想定して、一からとことん作り込みたい人に向いている。
inuit.css
head要素
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <title> ... </title> <!-- The framework --> <link rel=stylesheet href=../core/css/inuit.css> <!-- Plugins --> <link rel=stylesheet href=css/igloos.css> <!-- Your extension --> <link rel=stylesheet href=css/style.css> <!-- humans.txt --> <link rel=author href=humans.txt> <!-- Favicons and the like (avoid using transparent .png) --> <link rel="shortcut icon" href=icon.png> <link rel=apple-touch-icon-precomposed href=icon.png /> </head>
シンプルでありながら必要なものは揃っている。
CSS をプラグイン化しているのが特徴。
CSS
CSS をプラグイン化して扱っており、それらを「igloos」と呼んでいる。
igloos.css で @import で読み込むのがディフォルトの使い方。
> igloos.css
@import url(grid.inuit.css); /* grid */ @import url(keywords.inuit.css); /* keywords */
breadcrumb, ie6, dropdown, 12-col, annotate, keywords, centred-nav という7つのプラグインCSS が用意されている。
グリッド
全体を12グリッドで分割。
%指定。
Skeleton
head要素
<!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> <head> <!-- Basic Page Needs ================================================== --> <meta charset="utf-8"> <title>Your Page Title Here :)</title> <meta name="description" content=""> <meta name="author" content=""> <!-- Mobile Specific Metas ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- CSS ================================================== --> <link rel="stylesheet" href="stylesheets/base.css"> <link rel="stylesheet" href="stylesheets/skeleton.css"> <link rel="stylesheet" href="stylesheets/layout.css"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Favicons ================================================== --> <link rel="shortcut icon" href="images/favicon.ico"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> </head>
CSS
Grid, Typography, Buttons, Forms という4つのコンポーネントCSSが含まれている。
CSSはシンプルで読みやすい。
layout.css がユーザCSS。
グリッド
<div class="container"> <div class="sixteen columns"> ... </div> <div class="one-third column"> ... </div> <div class="one-third column"> ... </div> <div class="one-third column"> ... </div> </div>
全体を16グリッドで分割。ピクセル指定。
3分の1カラムは .one-third、3分の2カラムは .two-thirds を指定する。
PC向けの 960px 幅を基本としており、グリッドはピクセル指定なのが特徴。
PCファーストなので、ブレイクポイントは max-width 指定。いずれもピクセル指定となっている。
Foundation
head要素
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Welcome to Foundation</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<script src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
CSS
Media Queries の指定がわりと細かい。
The Grid, Typography, Buttons, Forms, Navigation, Tabs, Elements, Orbit, Reveal という9つのコンポーネントCSSが用意されている。
グリッド
全体を12グリッドで分割。
%指定
総評
Initializr か inuit.css がイイ感じだと思います（・∀・）オススメ！