More Related Content
Similar to Concrete5スターターテーマ考察 (8)
More from Atushi Sugiyama (6)
Concrete5スターターテーマ考察
- 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などはコメントで併記
• 右サイトバーの2段組みのみ
- 5. Blank HTML5 Reset Template
レイアウトはすべて自分で構築していきたいので
テーマのベースになるのはHTML5ベースのひな形のみの
まさに真っ白なテーマがいい人
- 7. • 条件付きコメント(for IE)
• CSSを初期化はnormalize.css
• Modernizr.js
• 480px, 768px,960pxの段落ち
画像のmax-widthなどは設定されていない
• ページタイプは全幅と右サイトバーの2段組みの2つ
• Boilerplateサイトのベースのコードとは異なるナビ用のスタイルは
割愛されている。
- 9. Blank 960 Grid System Theme
FREE
http://960.gsの仕様に準拠。レスポンシブは考慮されていないが
モバイルを別テーマにする場合などPCのみで考えると
オーソドックスなグリッドシステムでレガシーブラウザにも対応
GRID
- 10. • 条件付きコメント(for IE)
• Reset CSS
• 960.cssでのグリッドレイアウト
• 画像のmax-widthなどは設定されていない
• デフォルトでコンテナの12分割のグリッド
• ブレイクはclearクラス
- 13. Blank 960 Grid System Theme
スマホ用のテーマを別にするかPCだけのテーマなどで
レイアウトをIEの下位互換まで求められた場合に
以外に有用かもしれません。
段組みをタグ囲みでなくclearでブレイクする仕様ですので
ブロックデザインのCSSクラス名にgrid_8などを追加し
hrやdivでclearで段をクリアすればレイアウトすることが可能。
- 19. • 初期化および仕様はBootstrap3に準拠
• Theme Settingで仕様を決定
• BootstrapのPresetもDashbordから変更可能
• ページの設定のカスタム属性からスキンやナビゲーションタイプ、エディタ
へのクラスも追加される
• home4種類を加えたページタイプ13種類
• オートナビ、ページリスト、コンテントなどのテンプレート
• eCommerceプラグイン(有料)向けのテンプレート
• オートナビプロ、ページリストプロのテンプレート
• IE8に対応させる場合はhtml5shiv.jsとrespond.min.jsを追加して対応。
- 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%幅の2列、デスクトップサイズになると3列
- 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%幅の2列、デスクトップサイズになると3列