« [調査] IP Messengerプロトコル | トップページ | [Instapaper 文字化け修正ツール] 修正対象ブックマーク数の変更方法 »

[bootstrap] 個人用) デザインフロー備忘録

・CSSデザイン

1. 全体的な雰囲気、色使いの決定

http://bootswatch.com/http://kuler.adobe.com/で確認

2. CSS生成

http://stylebootstrap.info/
で書き換えたい部分を変更しながら修正
最後に"Get unique page for this style"
→ CSS保存とともに、URLをひかえておく


・ HTMLデザイン

http://jetstrap.com/build
で画面の必要なコンポネントを並べる。
なお、再読み込みとかで作業中の内容が簡単に消えてしまうので、
ざっとした配置を決める程度でIDとか作り込みをしない方が吉。

作り終わったら"Export" → "Download .zip"

※ CSS読み込み出来るが、Exportには反映されない模様


・ くみ上げ(モック作成)

1. jetstrap.com でダウンロードしたzipを解凍

2. http://twitter.github.com/bootstrap/よりダウンロードした
最新のbootstrapをassets配下と差し替え

3. 上記「CSSデザイン」で作成したbootstrap.cssファイルをassets/cssディレクトリにいれる。
なお、不一致となるためbootstrap.min.cssは削除。
また、bootstrap 2.1.1とは以下の差分が発生するため必要なら書き換える。


.table tbody tr.warning td {
background-color: #fcf8e3;
}
.table-hover tbody tr.success:hover td {
background-color: #d0e9c6;
}
.table-hover tbody tr.error:hover td {
background-color: #ebcccc;
}
.table-hover tbody tr.warning:hover td {
background-color: #faf2cc;
}
.table-hover tbody tr.info:hover td {
background-color: #c4e3f3;
}

4. apacheとかにいれて確認しつつ、Javascript組み込むなど直接HTMLをいじって完成
→ 実際のサイトは、このモックをliquidファイル化にして、ほぼそのまま利用

« [調査] IP Messengerプロトコル | トップページ | [Instapaper 文字化け修正ツール] 修正対象ブックマーク数の変更方法 »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/570099/55696858

この記事へのトラックバック一覧です: [bootstrap] 個人用) デザインフロー備忘録:

« [調査] IP Messengerプロトコル | トップページ | [Instapaper 文字化け修正ツール] 修正対象ブックマーク数の変更方法 »

2016年10月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

ついったー

無料ブログはココログ