ec-cube on bootstrap3 - gunma.web#16
DESCRIPTION
Gunma.web#16で発表したスライド。EC-CUBE用のデザインテンプレートを作った話。TRANSCRIPT
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
ご清澄ありがとうございました