MT7 スタイルガイド

MT7 スタイルガイドは、一貫性のあるデザイン、アクセシビリティ、汎用性・拡張性を考慮した最低限の品質を保つためのガイドラインです。

コードのダウンロード

ダウンロード CSS ファイル 最終更新: 2022-06-06 11:17:40

ファイル構造

mt7/
├── html/
│   ├── _includes/
│   ├── _layouts/
│   ├── bootstrap/
│   ├── components/
│   ├── dist/
│   └── images/
├── scss/
├── dist/
│   ├── css/
└── docs/
  • /html/ 本スタイルガイドの開発用ファイル
  • /scss/ CSS ファイル一式
  • /dist/ プロダクトで利用する CSS ファイル
  • /docs/ 本スタイルガイドの観覧環境

CSSファイルについて

  • MT7 の CSS は Bootstrap 4 を基に構築されています。
  • オリジナルの UI コンポーネントを作る際は、クラス名の先頭に必ず .mt- を付けます (例: .mt-content)。
  • オリジナルの UI コンポーネントのクラス名は、BEM に沿った名称にします（例: .mt-content__list--selected）。
  • Bootstrap の見た目を保持しつつ、カスタマイズした見た目を提供したい場合は body タグにある class="mt" を利用して継承クラスで定義します。
  • 書体や余白の単位は rem を使うこと。枠線のような細かいバランス調整のためであれば、px でも良い。
scss/
├── _modifier.scss
├── _variables.scss
├── mt-styles.scss
└── mt.scss
  • _modifier.scss : Bootstrap で定義されている UI コンポーネントの見た目を調整、又はオリジナルの UI コンポーネントの追加。
  • _variables.scss : 色は書体など、Bootstrap で保持されている変数の上書きします。Bootstrap で提供されている _variables.scss を基に作られています。
  • mt-styles.scss : 本スタイルガイド用の CSS（プロダクトには利用しない）
  • mt.scss : Bootstrap も含めてすべての CSS ファイルの結合を行います。