コードのダウンロード

ダウンロード CSS ファイル バージョン 0.1

ファイル構造

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

CSSファイルについて

  • MT7 の CSS は Bootstrap を基に構築されています。
  • オリジナルの 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 で保持されている変数の上書きします。
  • mt-styles.scss : 本スタイルガイド用の CSS(プロダクトには利用しない)
  • mt.scss : Bootstrap も含めてすべての CSS ファイルの結合を行います。