This template is frontend project template.
.
├── app # ソースファイルディレクトリ。このディレクトリ内にあるファイルを編集する
├── config # 設定ファイル情報
├── test # ユニットテストのソースファイルディレクトリ
├── node_scripts # Nodeタスクスクリプト格納ディレクトリ
├── .editorconfig # エディタ設定情報
├── .eslintrc.yml # ESLintのルール設定
├── .gitignore # Gitのバージョン管理除外設定
├── .node-version # 使用するNodeJSのバージョンが記載されたテキストファイル
├── .stylelintrc.yml # stylelintのルール設定
├── package.json # npmパッケージ設定ファイル
├── setup.sh # ローカル環境構築用スクリプト
├── tsconfig.json # TypeScript設定ファイル
├── tslint.json # TSLint設定ファイル
├── yarn.lock # 開発時点での依存関係ファイル
└── README.md
app/client
├── iconfonts # アイコンフォント用SVGファイル格納ディレクトリ
├── images # 画像格納ディレクトリ
├── htdocs # ドキュメントルートファイル格納ディレクトリ
├── scripts # JavsScriptファイル(*.js)格納ディレクトリ
├── styles # SugarSSファイル(*.sss)格納ディレクトリ
└── views # Pugファイル(*.pug)格納ディレクトリ
app/client/styles
├── bundles # CSSをまとめたバンドルファイルCSS格納ディレクトリ
├── parts # パーツ関連のCSS格納ディレクトリ
├── vars # 変数を定義したCSS格納ディレクトリ
├── _default.sss # 要素型セレクタのデフォルトスタイルを定義したファイル
├── _iconfonts.sss # アイコンフォントの@font-faceを定義したファイル
└── _mixins.sss # 全体的によく利用する mixin を定義したファイル
app/client/styles/parts
├── atoms # 原子(Atoms)パーツに関するCSS格納ディレクトリ
├── molecules # 分子(Molecules)パーツに関するCSS格納ディレクトリ
├── organisms # 有機体(Organisms)パーツに関するCSS格納ディレクトリ
├── templates # テンプレート(Templates)パーツに関するCSS格納ディレクトリ
└── pages # ページ(Pages)パーツに関するCSS格納ディレクトリ
./setup.shyarn start# GTM development mode
yarn dist:dev
# GTM production mode
yarn dist:prodスプライト画像生成は特別なコマンドを実行する必要はなく、
app/images/_sprites/ ディレクトリ配下の画像を background-image で指定するだけ で自動的に作成されます。
また、Retina表示させたい画像の場合は、必ずファイル名の末尾に @2x をつけてください。
(例 : [email protected] といったファイル名にする)
逆に、Retina表示させたくない場合は @2x をつけないファイル名としてください。
＜例＞
＜SugarSSコンパイル前＞
.textbox
&__searchButton
background-image: url('../../images/_sprites/icons/[email protected]')＜SugarSSコンパイル後＞
.textbox__searchButton {
width: 18px;
height: 18px;
background-image: url('../images/[email protected]?15d472c0ec0');
background-position: 0 0;
background-size: 46px 46px;
}アイコンフォントの作成は app/styles/_iconfonts.sss ファイルに以下の例のように @font-face 指定を記述するだけで利用可能です。
@font-face の src プロパティに指定されたディレクトリ内のSVGファイルからアイコンフォントファイルを自動生成します。
作成されるルールセットは以下の規則で命名されます。
iconfont-(@font-faceで指定されたfont-family名)-(拡張子を除いたSVGファイル名)
上書きするスタイルについては @font-face のルールセットの後に記述してください。
(以下の例では、add.svg、anchor_link.svg、apartment.svg ファイルがiconfontsディレクトリに格納されている場合になります)
＜SugarSSコンパイル前＞
@font-face
font-family: 'example'
src: url('../../iconfonts/*.svg')
font-weight: normal
font-style: normal
font-display: swap＜SugarSSコンパイル後＞
@font-face {
font-family: 'example';
src: url('../fonts/example.eot?15f306853f8');
src: url('../fonts/example.eot?15f306853f8#iefix') format('embedded-opentype'), url('../fonts/example.woff?15f306853f8') format('woff'), url('../fonts/example.ttf?15f306853f8') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
[class^='iconfont-example-']::before, [class*=' iconfont-example-']::before,
[class^='iconfont-before-example-']::before, [class*=' iconfont-before-example-']::before,
[class^='iconfont-after-example-']::after, [class*=' iconfont-after-example-']::after {
font-family: 'example', sans-serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconfont-example-add::before {
content: '\EA01';
}
.iconfont-before-example-add::before {
content: '\EA01';
}
.iconfont-after-example-add::after {
content: '\EA01';
}
.iconfont-example-anchor_link::before {
content: '\EA02';
}
.iconfont-before-example-anchor_link::before {
content: '\EA02';
}
.iconfont-after-example-anchor_link::after {
content: '\EA02';
}
.iconfont-example-apartment::before {
content: '\EA03';
}
.iconfont-before-example-apartment::before {
content: '\EA03';
}
.iconfont-after-example-apartment::after {
content: '\EA03';
}あとは、アイコンフォントを利用する要素に生成された iconfont-example-XXX の名称のルールセットをクラス属性に指定するだけで適用できます。
本プロジェクトにおいてはAtomic Designを採用しています。