Sketch.appでbootstrap3のレイアウトについて
- Large devices Desktops（1200px以上表示できるデスクトップ端末。最大コンテナ1170px）
- Medium devices Desktops（1200px以上表示できないデスクトップ端末。最大コンテナ970px）
の２つの設定数値のメモと設定方法です。
Large devices Desktops
設定
Version 42ではツールバーの[View][Canvas]から"Layout Settings..."から設定ウインドウを出す。
- Total Width: 1170px
- OffsetはCenterを押すだけ（数値は自動で入力される）
- Number of Columnsは12
- Gutter on outsideをチェックする
- Gutter Width: 30px（15pxの余白を左と右に入れることになる）
- Column Width: 68px（1170 / 12 = 97.5 からGutter Widthの30引いて四捨五入）
スクリーンショット
ショートカットキー ^L を押して
"Layout Settings..."で設定
Medium devices Desktops
- Total Width: 970px
- OffsetはCenterを押すだけ（数値は自動で入力される）
- Number of Columnsは12
- Gutter on outsideをチェックする
- Gutter Width: 30px（15pxの余白を左と右に入れることになる）
- Column Width: 51px（970 / 12 = 80.833... からGutter Widthの30引いて四捨五入）
スクリーンショット
その他
やってて気づいたけどTotal Widthに値を入れて、Number of Columnsに12とGutter Widthの30pxを固定で入れれば後は自動で残りの値を入力してくれるので、自分で計算する必要はなく最大コンテナのサイズだけを覚えておけば良さそう。
参考
グリッドシステム
http://greenapple-room.com/conc/user/TwitterBootstrap/Bs3/bootstrap_02_01.html