third impactマークアップ担当者向けドキュメント
基本的にはここのページで完結しますので、まずは環境構築を済ませましょう。
MacOSでの開発という前提で進めています。Windows向けの環境は整ってないので、Macを持ってない方はVagrant+Virtualboxで仮想環境を作るか、もしくはMacを買いましょう。
また、作業にはgitを使用しますので、使ったことない人は覚えてください。
1.GithubのWikiに一通り目を通す
https://github.com/kawazrepos/Kawaz3rd/wiki
2. LESSを書けるようにしておく
Getting started | Less.js
3. bootstrapを書けるようにしておく
CSSとか[Bootstrap](http://getbootstrap.com/css/)
4. すでに書かれているLESSやHTMLを見ておく
Kawaz3rd/src/kawaz/statics at develop · kawazrepos/Kawaz3rd
Kawaz3rd/src/kawaz/templates at develop · kawazrepos/Kawaz3rd
5. Jinja2の書き方を何となく学んでおく
Django テンプレート言語 — Django 1.4 documentation
環境構築が終わったら、このような流れで作業を行います
-
エディタ（Sublime textやVimなどお好みで）でhtmlやlessを編集する
-
編集した内容をリポジトリにpushし、作業が終わっているならPullRequestを送る
-
コードレビューしてもらい、LGTMならmerge、ダメなら修正して再度pushする
一般的に「issue駆動開発」と呼ばれるものです。
GitHub Organization: Issues+Pull Requestでチケット駆動開発する手順 - Qiita
ここにhtmlファイルが入っています
Kawaz3rd/src/kawaz/templates
lessファイルはここ
Kawaz3rd/src/kawaz/statics/less
その他画像やjsの入ってるディレクトリも近い階層にあるので、なんとなく見て覚えておきましょう。
htmlはもちろん生のhtmlではなく、Pythonで書かれたテンプレートエンジン「Jinja2」の書式で書かれています。
ここらへんは通常のissue駆動開発と同じです
「コードレビューで突っ込まれる時にありがちなこと」後述します
Jinja2は結構マイナーなものなので、とりあえず「テンプレートエンジン」というものを知らない方は、「テンプレートエンジンとはなんぞや」というところを調べてみましょう。（下記リンクはPHPのものですが）
見て覚えましょう
Jinja2には「block」という概念があり、これを継承させながらテンプレートを組んでいます。
Webデザイン初心者でもできる、Bootstrapの使い方超入門
lessのコンパイルはファイル保存時に行ってくれるよう環境構築済みなので、lessファイルを編集するだけでOK。
幅は半角スペース二つ×2
インデント下げの位置は揃える
例
h1 {
padding: 8px;
border-left: 2px solid @text-color;
background: @gray-lighter;
font-size: 24px;
margin-top: 30px;
}
<span class="event-place">{{ event.place }}</span>
共通のプロパティがない、ユニークな要素にもidではなくなるべくクラスを使います
- インデント幅が違う
- 命名規則（クラスの命名など）
- 共通のプロパティでlessの関数を使わない
third-impactでは、DOM間の文章は日本語でそのまま書くのでは無く、一旦英語で書いてそれを日本語でローカライズ化させる、という方式です （一部面倒になって日本語で書いてしまっている箇所もありますが……）
テンプレートファイル上の該当箇所
実際の表示
やり方についてはこちらを参照してください
ローカライズファイルはコンフリクトしやすいので、いじる際は他の作業者とpushするタイミングを注意するようにしましょう