EC-CUBEon

Bootstrap32014/4/12 Gunma.web

#16@clicktx

about me

• Nome ：すぎむら むねのり

• Twitter: @clicktx

• Lingua: Perl

• Blog: http://perl.no-tubo.net/

• Professione: アマグラマー

EC-CUBEon

Bootstrap3

EC-CUBEon

Bootstrap3= EC-CUBE 用のデザインテンプレート

デモサイト

http://eccube-on-bootstrap3.no-tubo.net

# gunm aw eb でツイートします

特徴

レスポンシブ web デザイン

モバイル（特にスマートフォン）で使いやすい

なぜつくったか？

Bootstrap で作られているものがあった (*1) ので触発されて EC-CUBE 本体が 2.12 系 Bootstrap が 2 系

Bootstrap3 系を学ぶチャンス！

*1 eccube-bootstrap という EC CUBE 用のテーマを作りました。 - ALLAURMONOhttp://blog.nagaki.me/practice/released-eccube-bootstrap.html

作業

2/7 〜 4/5 （ 60 〜 70 時間程） メモ忘れあるかも

修正したファイル（ .tpl のみ）で 48ファイル

実は全部終わっていない… テンプレートは全 69 ファイル My ページとか、ショッピングプロ

セスとか

使用上の注意点

スマホ用テンプレートを手動で無効にする必要がある EC-CUBE 本家で販売されているレスポ

ンシブテンプレートはプラグインとして作られている

今回はデザインテンプレートとして製作しているので PHP 等のカスタマイズは出来ない

EC-CUBE でスマホ用と携帯用テンプレートを無効にする方法 | SPOT[ スポット ] http://p.tl/i2Qr

Bootstrap32 系と 3 系の違い

デザイン

デザインの違い

2 系 - リッチデザイン 3 系 - フラットデザイン

デザイン

2 系 - リッチデザイン 3 系 - フラットデザイン

好みは人それぞれかも知れません！

グラフィックアイコン

グラフィックアイコンの違い

2 系 – png + CSS スプライト 3 系 – web フォント

モバイルファースト

進化したグリッドシステム

モバイルデバイスが切り分けられた。 スマホ・タブレットが別々に扱える

各デバイス別にレイアウトを指定しやすくなった

各デバイス別に表示・非表示ブロックを指定しやすくなった

カラム指定系 class

col-xs-* … スマートフォン

col-sm-* … タブレット（縦）

col-md-* … タブレット（横）、 PC

col-lg-* … PC

*は 1 〜 12 の数字

カラムオフセット class

col-xs-offset-*, col-sm-offset-* …

*は 0 〜 12 の数字

表示・非表示指定 class

visible-xs, visible-sm …

hidden-xs, hidden-sm …

カラム指定 pull/push 系class

col-md-pull-*

col-md-push-*

*は 0 〜 12 の数字

3 カラムレイアウト作る時とか超便利！

EC-CUBE on Bootstrap3

おまけ機能

今日いらしている方の大半がスキなフレーズを取り入れました！

×

今日はエンジニアの集まりなんだから「 jk 」と言ったら答えは一つに決まってるだろ？ JK

vi/vimキーバインド

Twitter とか Facebook とかGoogle とか実装してて最近流行ってますよね！

vi/vim キーバインド対応

j,k … 次の項目・前の項目（移動）

h,l … 戻る・進む ( ブラウザ動作 )

H or 0 or ^ … 最初の項目へ

L or $ … 最後の項目へ

g … ページトップへ移動

G … ページボトムへ移動

/ or ? … 検索フォーム

- … ホームページヘ

github で公開予定ですhttps://github.com/clicktx/eccube-on-bootstrap3

ご清澄ありがとうございました