New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

グリッドシステム基本方針 #5

Open

witchdoktor opened this issue Nov 2, 2017 · 1 comment

Assignees

Labels

Milestone

Collaborator

witchdoktor commented Nov 2, 2017

ブロックおよびブロック外コンテンツレイアウトのためのグリッド

1カラム

グリッドの全体幅はFlex
12分割
ガッター30px
左右端のガッターは15px
メインメニューは220px固定

2カラム

グリッドの全体幅はFlex
12分割
ガッター30px
左右端のガッターは15px
メインメニューは220px固定
セカンダリカラムは320px固定

ブロック外コンテンツ（現在はマスターの条件絞り込みフォームで利用）

こちらは1カラムのグリッドに載せるカタチで。
画面幅1023px以下の場合は段組みを消してcol-12にする

ブロック内コンテンツでグリッドを使用するパターン

ブロック内グリッド基本

input部はFlex、中にrowを入れてグリッドを利用することができる
ガッターは30px、できれば左右のガッターは0にしたい

horizontal（ラベルとインプットが水平配置）な入力フォームの場合

ラベル幅は190px（実装してから変更の可能性あり）
ラベルの右マージンは15px（同上）

以上

witchdoktor added the design-guide label

witchdoktor assigned witchdoktor and yasui05821

Yangsin added this to the Not release milestone

Collaborator

yasui05821 commented Nov 2, 2017

@witchdoktor
ありがとうございます！コーディングに反映させていただきます！

yasui05821 removed their assignment

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment