jetstrapが良さそうなので使ってみた

jetstrapはTwitter Bootstrapを使ったサイトのテンプレートをドラッグ＆ドロップで作成できるステキなサイトです

まずは、Signupが必要です。
SignupはTwitter, Facebook, Githubアカウントのいずれかが必要となります

私はGithubのアカウントでSignupしてみました
Githubでの認証が終わると次のような画面が表示されます

あとは、emailを登録して終わりという事でしょうね。

emailを入力してFinishボタンを押します

これで登録は完了！

登録が完了すると、次のような画面が表示され作成に入ります

作成する基となるデザインを選択するようですね

今回はFluidを選択して、どのようなに部品を組み合わせればいいかを見てみます

部品の構成は、一部を選択して階層をチェックするとわかります

上の画像で選択している青くなっている部分は

Conteiner＞Fluid Grid Row ＞ Span9 ＞ Hero Unit

となっています

Spanをうまく使って構成していけば良いようですね

ページの一番上にあるタイトルやナビゲーションはNav Bar Collapsibleで作っているみたいです

ただし、コンポーネントから選択する場合は、Navigationの中にあるCollapsible Navbarをドラッグ＆ドロップとなります。コンポーネントの名前と階層に表示されている名前が違うので注意が必要ですね

さらに、画面の上にぴったりと付ける場合には次のように

Fixed modeを「FIxed Top」とします

また、背景を黒くする場合にはTypeを「Inverse」にします

ナビゲーションの横にある、Email,Password,Sin inはNavvar Formの中に各要素(Text Input, Button Input)を入れて構成されています

こんな感じで作り方を見てから、自分のつくりたいデザインを構成していくのが早道だと思います

困った時や、カスタマイズしたい時は画面右下にある「HTML/CSS」をクリックするとHTMLとCSSの編集画面になります

コンポーネントを非表示にした場合には、画面左したに[Components]と書かれたボタンがあるので、それをクリックすると再表示されます。白色の半透明なボタンなので少し気づきにくいですね

まだ触ってみて30分くらいなので、あまり詳しくはお伝えできませんが、今日はここまで。

その他、詳細は公式の動画を見ると雰囲気が良く分かると思います

jetstrap - Broadband from Max Lynch on Vimeo.