シンプルなベースから作り始めたい人のためのConcrete5スターターテーマ考察

1. シンプルなベースから
作り始めたい人のための
!
スターターテーマ考察
pictron

2. サイトを新規で構築するのにベースとなるテーマには
デザイン要素がなるべく含まれていないほうが
効率がいいと思っている方。
ただグリッドシステムやスタイルシートのリセットな
んかはあったほうがいいかも？
そんなスターターテーマの考察あれこれ…

3. Blank HTML5 Reset Template
FREE
http://html5reset.org/の仕様に基づいたhtml5仕様でリセットした
まさに真っ白なテーマ
Modernizr,IE7/8 classなどをデフォルトで実装。
主な仕様はhttp://html5reset.org/参照

4. • 条件付きコメント（for IE）
• CSSを初期化はreset.css
• Modernizr.js
• モバイル対応のviewportなどはコメントで併記
• 右サイトバーの２段組みのみ

5. Blank HTML5 Reset Template
レイアウトはすべて自分で構築していきたいので
テーマのベースになるのはHTML5ベースのひな形のみの
まさに真っ白なテーマがいい人

6. Blank HTML5 Boilerplate
FREE RESPONSIVE
グリッドシステムではなく、一般的なメディアクエリーでのカラム指定。
主な仕様はhttp://html5boilerplate.com/参照

7. • 条件付きコメント（for IE）
• CSSを初期化はnormalize.css
• Modernizr.js
• 480px, 768px,960pxの段落ち
画像のmax-widthなどは設定されていない
• ページタイプは全幅と右サイトバーの２段組みの２つ
• Boilerplateサイトのベースのコードとは異なるナビ用のスタイルは
割愛されている。

8. Blank HTML5 Boilerplate
faviconやアプリアイコン、条件付きコメントなどの
セオリーはおさえつつ
基本的な段落ちのメディアクエリーのひな形を参考にしながらも
シンプルなテーマがいい人

9. Blank 960 Grid System Theme
FREE
http://960.gsの仕様に準拠。レスポンシブは考慮されていないが
モバイルを別テーマにする場合などPCのみで考えると
オーソドックスなグリッドシステムでレガシーブラウザにも対応
GRID

10. • 条件付きコメント（for IE）
• Reset CSS
• 960.cssでのグリッドレイアウト
• 画像のmax-widthなどは設定されていない
• デフォルトでコンテナの12分割のグリッド
• ブレイクはclearクラス

11. 960.cssでのグリッドレイアウト
12 grid
<div class="container_12">
.grid_12
</div>
.clear
.grid_8.grid_4
.clear
.grid_4 .grid_4 .grid_4

12. グリッドクラスをブロックCSS
スタイルで設定
クリアクラスをHTMLブロッ
クで入力

13. Blank 960 Grid System Theme
スマホ用のテーマを別にするかPCだけのテーマなどで
レイアウトをIEの下位互換まで求められた場合に
以外に有用かもしれません。
段組みをタグ囲みでなくclearでブレイクする仕様ですので
ブロックデザインのCSSクラス名にgrid_8などを追加し
hrやdivでclearで段をクリアすればレイアウトすることが可能。

14. Basic Bootstrap
FREE RESPONSIVE
http://archive.goradiantweb.com/blog/design/free-basic-bootstrap-theme/20$の有料テーマFlatstrapのマイナーバージョン、カスタムテンプレートで
グリッドやメニューを適用できる。Bootstrapのバージョンはv2.3.2
GRID

15. • 初期化および仕様はBootstrap2.3.2仕様
• ページタイプ６種類、オートナビブロック、サーチブロック付属
• ページタイプhomeのカルーセル部分はブロック化されていないソースに記述。
• ナビはカスタムテンプレートFlatstrap headerが適用できる
• pbpostというページタイプはProblogというブログ作成の有料プラグイン
• typegrapfyはBootstrapの解説ページ

16. Bootstrap2.3.2でのグリッドレイアウト
12 grid
<div class="container">
.span12
</div>
.span8.span4
.span4 .span4 .span4
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>

17. Basic Bootstrap
前バージョンながらCSS Frameworkの恩恵を受けれて
ページタイプやブロックのテンプレートなど
無料テーマとしてはきちんと実装されている。
2.3.2でいいのであれば選択肢のひとつ。

18. Bootstrap
40$ RESPONSIVE
そのものずばりの名前の40$の有料テーマ。
Bootstrap 3でありBootstrapのテンプレートのレイアウトも
ページタイプとして選択してすぐレイアウトできる。
ページタイプ、ブロック、カスタムテンプレートなども充実。
GRID

19. • 初期化および仕様はBootstrap3に準拠
• Theme Settingで仕様を決定
• BootstrapのPresetもDashbordから変更可能
• ページの設定のカスタム属性からスキンやナビゲーションタイプ、エディタ
へのクラスも追加される
• home4種類を加えたページタイプ13種類
• オートナビ、ページリスト、コンテントなどのテンプレート
• eCommerceプラグイン（有料）向けのテンプレート
• オートナビプロ、ページリストプロのテンプレート
• IE8に対応させる場合はhtml5shiv.jsとrespond.min.jsを追加して対応。

20. Bootstrap3でのグリッドレイアウト
12 grid
<div class="container">
.col-md-12
</div>
.col-md-8.col-md-4
.col-md-4 .col-md-4 .col-md-4
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>

21. Bootstrap3でのグリッドレイアウト
Max container
width
None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
おおまかな分類 スマートフォン タブレット デスクトップ ラージ
col-xs-6 col-md-4
<div class="row">
</div>
col-xs-6 col-md-4 col-xs-6 col-md-4
モバイルサイズでは50%幅の２列、デスクトップサイズになると３列

22. Bootstrap3でのページタイプのコードサンプル
<div class="row">!
<div class="col-md-3 col-sm-3 col-lg-3">!
<?php !
$a = new Area('Sidebar');!
$a->display($c);!
?>!
</div>!
<div class="col-md-9 col-sm-9 col-lg-9">!
<?php !
$a = new Area('Main');!
$a->display($c);!
?>!
</div>!
</div>

23. Bootstrap
有料だけあって、Bootstrap3の標準テンプレートレベルの
実装はすぐできるようにページタイプ、テンプレートなども
充実、メジャー有料プラグイン対応も
ただBootstrapボタンのクラスや、カルーセルなどをGUIで入れる
ところは別売！

24. セットで125$→82.5$
自分でコードやクラスを追加してしまえば
すぐできますが
左にセットを購入すれば、コードレスで
Bootstrapの仕様を実装できます。

25. Foundation 5
45$ RESPONSIVE
http://foundation.zurb.com/
CSSフレームワークFoundationに準拠したテーマ。
ページタイプ、ブロック、カスタムテンプレートなども充実。
GRID

26. Foundation 5でのグリッドレイアウト
12 grid
<div class="container">
.large-12
</div>
.large-8.large-4
.large-4 .large-4 .large-4
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>

27. Foundation5でのグリッドレイアウト
Range 0, 640px 641px, 1024px 1025px, 1440px 1441px, 1920px
Class prefix .small- .medium- .large- .xlarge
おおまかな分類 スマートフォン タブレット デスクトップ ラージ
small6 medium4
<div class="row">
</div>
small6 medium4 small6 medium4
モバイルサイズでは50%幅の２列、デスクトップサイズになると３列

28. • 初期化および仕様はFoundation5に準拠
• Foudation5の
• オリジナルブロックが16個テーマに付属
• ページタイプ15種類
• オートナビのテンプレート4種類
• プロブログのテンプレート対応
• IE8以下は未対応

29. Foundation 5
有料だけあって、Foundation 5の標準仕様を
すぐ実装できるようにページタイプ、テンプレートなども
充実。各パーツを挿入して設定するだけで実現できる
オリジナルのブロックも多数実装。
Foundation5の機能を使うことでコードレスである程度の
サイト構築が可能。