Form with interactive operability
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo/signup
docs/styleguide
src
stylesheets
vendor/font-awesome
.gitignore
Gruntfile.coffee
README.md
index.html
package.json

README.md

Prototype PingPong Form

Development

start => deploy => doc の順で回す。

start

$ grunt
# grunt watch タスクを実行。
# http://localhost:8080/ を開く。
# slim, scss ファイルを監視して自動コンパイル、ファイル変更の際にページを再読み込みする。

deploy

grunt deployvalidation 処理したり、CSS のプロパティに prefix をつけたりする:

$ grunt deploy
# grunt htmllint, csslint, autoprefixer タスクを実行。

doc

README.md やスタイルガイドに変更がある時は grunt doc を実行する:

$ grunt doc
# grunt styleguide タスクを実行。
# ファイルの変更に合わせて http://localhost:8080/docs/styledocco/ を更新。

変更が無い時は git add => git commit のいつもの流れ。

スタイルガイド

StyleDocco を使ってる。

contents to be included

各ファイルの先頭にはファイル名を書く。そして、このボックスにはファイルに含めるモジュールのことについて書く:

// # Base
// ここではできるだけ User Agent Style に上書きするようなスタイルのみ書くように心がけましょう

ページ固有のスタイルシートの場合は ( Page ) {file-name} のように書く:

// # ( Page ) Signup
// 新規会員登録ページで使うモジュール

format

/* hoge */ ではなく // hoge の形式でコメントを書く。( /* hoge */ の形式で書くとコンパイル後の CSS にコメントとして残ってしまうため。 )

insertion position

Style Guide ページでは、#form-modules 内の .docs.codes がちゃんと関連づくようにスタイルガイドを書く。 以下のように書くと form-input-checkboxForm Input Text の項目内に入ってしまうので良くない:

// # Form Input Text
.form-input-text {
  ...
}

.form-input-checkbox {
  ...
}

// # Form Input Radio