朝から晩までサービス開発してるお前に贈る
Twitter Bootstrap 入門
ダエサンいジ ニア は
今日覚えることお前のデザインはダサいCSSフレームワークは便利デザインはデザイナーに任せろ
1 お前のデザインはダサいあります
エンジニアが作るフォームや
サイトデザインは徹底的にダサい!
プログラミングでのお前ら
デザインでのお前ら
エンジニア「見た目とかどうでもいいでしょ」
エンジニア「見た目とかどうでもいいでしょ」
こコなだlらわドるのなイ ン デ ン ト も
ということで、Twitter Bootstrap使いましょうね
2CSSフレームワークは便利
聞け
Q. Twitter Bootstrapって何ですか?(都内 エンジニア 36歳)
A. CSSフレームワークです
CSSフレームワークとは
link要素で読み込むだけで、主要な要素や汎用クラスの
デザインが適用される便利CSS
導入前 導入後
Twitter Bootstrap以外にもいろいろ
多すぎて話にならんので省略 以下参考http://devsnippets.com/article/complete-guide-to-css-frameworks.html
Normalize Layout Rich
大体以下の3種で区分できます
reset.css的なブラウザ間の差異を減らす
タイプ
Gridレイアウトやカラムデザインなんかを提供するタイプ
インポートした瞬間からタブやらナビゲーションやら使えるようになるタイプ
JQueryなんかのプラグインがついてくることもある
bootstrapはこのタイプ
ようするに
ようするに
実際の使い方を私は詳細に解説することができるがここには余白が足りない
使い方は公式サイトのサンプルを見ながら少しづつ覚えていけばよいです
3デザインはデザイナーに任せろ任せてください
Twitter Bootstrap 流行ってます
= どこもかしこも似たようなデザイン
TwitterBootstrapの流行に梨花ちゃまもご満悦!
Bootstrap使っただけじゃ陳腐な時代デザインはちゃんとデザイナーさんに依頼しよう!でもその結合前やプロトタイプを手早くするために
CSSフレームワークを活用しよう!
TwitterBootstrapを使うとデザイナーさんはこれが嬉しい
3つのポイント
TwitterBootstrapを使うとデザイナーさんはこれが嬉しい
3つのポイント
TwitterBootstrapを使うとデザイナーさんはこれが嬉しい
3つのポイント
まだです
TwBsにあわせて書かれたHTMLはCSSが書き足しやすい
ちょっとvalidじゃないくらいでゴタゴタ抜かすな!
ボタンや要素の意味がclass名でわかる
やたら難解なクラス名にはもう突っ込む気も起きないし
挙句の果てには長すぎてスペルミスとか(笑)
とりあえず適当に使っておけばそこそこなデザインになる
デザインしないのにユーザービリティとか
笑わすな
デザイナーさんも大喜び!
TwitterBootstrapを使ったことでにこやかに依頼を受けてくれるデザイナーさんの図
デザイナーさんも大喜び!
TwitterBootstrapを使ったことでにこやかに依頼を受けてくれるデザイナーさんの図
まとめ
TwitterBootstrapで楽々Prototypingプロダクションのデザインはデザイナーさんへ
画像レスは楽しい
Enjoy Prototyping!
http://twitter.github.com/bootstrap
Twitter Bootstrap 入門Sho Kusano <@rosylilly>
巻末付録
スライド内で使われているレス画像はこのへんのものですhttp://simapantu.blog130.fc2.com/blog-entry-140.htmlhttp://matome.naver.jp/odai/2128376158890741601http://mudainodqnment.blog35.fc2.com/blog-entry-1342.html
Top Related