もうBootstrap3使っても良いんじゃねぇ？
／ ＼
/ ヽ
. ,i' ', どぉ〜だいみんな！
;i' _...._ |
｢l ｒ ―- ､ ｒ' - ┘ ｈ 糞 ス レ だ ろ ？
|.i' "_..二. 〉 ｚ@ﾆ= |.|
. |l i′ ￣ ｀ |j ―┐ ＿ ＿ ＿ ＿ ┃┃
. ｀! r′ __ぅ l＿＿＿ __ノ オ ´ `ー'´ `ー'´ `ー'´ ｀ ･ ･
. ', /;';';';';',:, ） ,'＼ ＼ミﾆヽ､
. ', （ｉﾆ＝ﾃ７ ,' ｝、 ＼ミ二ﾆ
;, ヾ二フ ,' /::＼ ＼ミﾆ
／ ヾ､ , , , , , , , , , ,i' /ﾆ三＼ ＼ミ
ィ （ `(´.）';';';';';ジ ／二三二＼
／ ＼＼ /_二ヽ__(⌒)／二三二三二＼
＼ ＼＼（ __i＿ ｀)二:三二三二三二ヽ
二＼ ＼ ! : ｀｝ﾆ三二三二三二三｝
三二＼ │ ￣ ￣ ﾌ二三二三二三二ﾆ/
二:三二＼/ﾄ､ _｀￣ﾉ´二:三二三二三二／
ﾆ二三二/ ｀Ｔ´＼三三三三三ﾆ‐''"
.二三二/ |
2の時にGrid systemを12→30にしてたんだけど3からはCustomizeページでcolumns数を変更出来なくなったから
それをどうすっかな・・・
ウェブで推奨されるセマンティックなやり方とは
逆行する時代遅れの設計。
適用するスタイルに合わせてclass名を
バンバン追加していくスタイル。
これじゃメンテナンス性が悪すぎる。
修正時にあちこちHTMLを変更する羽目になる。
classに入れるクラス名は原則一つ
デザインの修正でHTMLは修正しない。全部CSSで行う。
それが昔から目指していた
スタイルとHTMLの分離。
CSSの存在理由なのに。
3になって行ごとにROW入れなくてよくなったのが良い
class Aの特性とclass Bの特性を持った要素はclass CとしてA+Bの内容を定義するの？
その通り。
SCSSを使ってclass Aとclass Bを定義しておいて
「class CはAとBを継承する」と書けば
その内容は簡単に定義できる。
>>8
巨大なCSSは、小さいSCSSから生成するので人間の負担はない。
それよりも人間が書かないといけない
巨大なHTMLはメンテナンス性が悪い。
CSSは一箇所に書けば終わりだが、
Bootstrapなんかを使うと、使用しているページ全てに
ごちゃごちゃ書かないといけない。
じゃ、3つのクラスの組み合わせが発生する場合、3C1+3C2+3C3=3+3+3=9つのクラスを定義するわけだね。
3つのクラスの組み合わせが発生する場合（以下略）
(正) 4つのクラスの組み合わせが発生する場合（以下略）
例えば、テーブル関連で言うと
table
table-bordered
table-striped
table-condensed
というクラスが定義されてるわけだけど、具体的にはどうすればいいわけ？
table-hoverもある。5つのクラスの組み合わせが発生するね。
SCSSは知らんけど、それができるなら
.your_own_class : extend bootstrap_class_a, bootstrap_class_b
みたいに定義してけばいいだけじゃないの？
そのtable-なんたらってのは、Bootstrapが用意したクラスか・・・？
本当にダサくて時代に逆行してるな。
HTMLの話をすればこれだけでいいだろ？
<table class="hoge">
<tr><td>a1</td><td>a2</td></tr>
<tr><td>b1</td><td>b2</td></tr>
<tr><td>c1</td><td>c2</td></tr>
</table>
でCSSは普通こう書くだろ？
.hoge { tableのスタイル }
.hoge tr { trのスタイル }
.hoge td { tdのスタイル }
いやさ、普通にCSSの使い方だよ？
このように書いていればマークアップとCSSが分離されていて、
HTMLを書き換えることなく、CSS＝デザインを担当するものだけで
デザインを書き換えられる。
なにも新しいことは言ってないよ。CSSが出来た時から言われているCSSの正しい使い方。
原則としてデザインを変えるときはCSSだけを弄って変えるもの。
fontタグがなくなったのもHTMLからデザインの部分はなくしましょうという流れの一つ。
borderつけたかったら、CSSを修正すればいい。
偶数行奇数行で色を変えたければ、CSSを修正すればいい。
余白を少なくしたければ、CSSを修正すればいい。
これだけなんだけど、具体的に何を聞きたいの？
CSSの書き方？ それともSCSSの書き方？
デザインを変えるだけならCSSしか修正しないのが原則なんで、HTMLはこのまま修正しないよ。
補足。「原則として」と書いているのは、
CSSの限界によってdivやspanを入れなければ
出来ないことがたまにあるから。
HTML5とCSS3によって大きく改善されたけどね。
実際に今開発しているスマホ用サイトではほとんどdivやspanを使わずに
無駄な要素を入れることなくCSSだけで表現出来てる。
> じゃ、3つのクラスの組み合わせが発生する場合、3C1+3C2+3C3=3+3+3=9つのクラスを定義するわけだね。
細かい計算は面倒なので結論だけを書くと、
定義するクラスは、HTMLで使用するクラスの数だけでよい。
HTMLで使用せずに、他のクラスのベースとしてだけ使うクラスは
クラスではなくSCSSのプレースホルダとして定義すればいい。
だから定義するクラスの数はHTMLで使用するクラスの数だけになる。
Sleek, intuitive, and powerful front-end framework
for faster and easier web development.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
http://blog.idyllic-software.com/blog/bid/235535/Why-we-don-t-use-Twitter-Bootstrap
TWITTER BOOTSTRAP - IT'S NOT ALL ROSES
http://theled.co.uk/blog/archive/2012/06/22/twitter-bootstrap---its-not-all-roses/
Please stop using Twitter Bootstrap
http://css.dzone.com/articles/please-stop-using-twitter
Why Twitter Bootstrap is bad for the internet
http://blog.guy.ht/2012/02/Why-Twitter-Bootstrap-is-bad-for-the-internet/
メンテナンス性が悪くなるのが嫌だな。
HTMLがごちゃごちゃするし、
デザイン変更時に全HTMLを書き換えなきゃいけないし。
1. 自分でデザインを作れない。（デザインなんかどうでもいい。おきせのデザインでいい）
2. CSSを簡単な物以外自分で書けない。
3. JavaScript書けない
4. とりあえず動けばいい
って人なんじゃないかって思う。
デザインを自分で好きに作りたい人は
Bootstarapをカスタマイズせずに使うなんてありえないし
カスタマイズしようと思えば、Bootstarapに合わせた書き方を
しなければいけなないという面倒くささのせいで使いたくなくなると思う。
>>20が理解できない奴多すぎ
フレームワークには流行り廃りはあるけれど
根本的な考え方が大きく変わることはないんだ。
マークアップとデザインの分離。それがCSSの本質。
BootstrapはそのCSSの本質に当てはまっていない。
だからバッドプラクティス。それだけの話。
4以外全部はずれ。ただ、時間をかけずにそれなりのものをちゃっちゃと作りたいだけです。
と、いう理由でBootstrapをこれから使おうかと思ってるんですが、
夢物語だと知って放りなげるかもしれません。
個人的には>>28と、あと、お手軽なテーマでもあればそれで十分だったりします。
将来修正はしません
ファイルの数は10個ぐらいですってなら
まだわかるけどな。
だれが使っても同じデザインにならないようなものを
プロダクトで採用できるかってーの。
捨てるためのフレームワークだよ。
それをわかってない奴は馬鹿だけどな。
でBootstrapより使い物にならんオレオレフレームワークの誕生って訳だ
SASS（SCSS）というCSSを改良した文法があればいい。
あとはCSSの正しい使い方通りに使うだけ。
「こういう感じでいいなら早く一定レベル以上のデザインを提供できますよ、
こだわりたいなら、当然お金と時間がかかりますよ」
ってやるのが商売ってもんで、
それをやらずに何でも客のいいなりに毎回フルスクラッチなんてばからしくてやってられません。
やってる会社だらけなので、商売やりにくいですけどね…
いやだから全員がイチからCSS書くのヤだからFWがあるわけで。
趣味で使ってたりする奴だろ。
このスレでBootstrapは面倒とか、メンテ性が良くない、とかツマラナイ事言ってないで
建設的な意見をしろよ。俺も。
どっちかというと、サイトテンプレートの方が酷いのが多いけどね。
Bootstrapのような変なフレームワークはいらん。
正しくCSSを使っているフレームワークならいいよ。
> Bootstrapをdisってる人って、サイトテンプレートなんかも認めないんだろうな。
なんで？？？
勝手に決め付けるなよ。
頭おかしいんじゃないのか？
正しくCSSを使っているなら問題ない。
Bootstrapは間違ったCSSだからクソなんだよ。
何が正しくて何が間違っているかの定義は
CSSはデザインを分離するものであるという
CSSが出来た理由に合っているかどうかだ。
> このスレでBootstrapは面倒とか、メンテ性が良くない、とかツマラナイ事言ってないで
> 建設的な意見をしろよ。俺も。
SCSSってでてるじゃん。
class属性に値を詰め込む方法ではなくて
class属性に入れるクラス名は原則一つ。
これでやれって。
W3Cのhtml4あたりの勧告やDTDを読んでらっしゃい。
そこはhtml5になってもかわらないよ、恐らく。
そりゃそうだよなぁ。
CSSができたのはHTML4からだからなぁ。
開発速度を最重要視したフレームワークだぜこれ
そのために十数年前から口やかましく言われてる禁じ手をあえて採用してるんだろ
全員がメンテナンス性やデザインを重視するなら他のを選んでるっての
Bootstrapが開発速度を重視しているからって、
他のやり方よりも開発速度が速いことにはならないんだが。
つまりSCSSでも開発速度は速い。
開発速度には普通メンテナンス速度も含まれるわけだが
この点でBootstrapは遅い。
そして君が言う通り禁じてというかダメなやり方を採用しており
メンテナンス性やデザイン性を重視するときに使えない。
メンテナンス性は、SCSSとかLESS使えよ
はいはいSCSS一番でございます
フレームワークの要旨を説明してるのに
なんで下層レイヤーの言語と比較するようなアホな論争に持ってこうとしてるんだか
フレームワーク同士の比較なら建設的なんだがな
俺俺CSSライブラリが使われてるのをメンテする方が大変だけどな。
かけらもない一プログラマには有用だよ。俺みたいな。
同意ｗ
リポジトリみれば分かることだがまだ修正もしないといけないのたくさんあるのに
今使うのは人柱のようなものだ
自分のサイトで使う分にはいいが、人様のサイトを作るなら使うのはまだ早い
俺俺CSSライブラリって何？
CSSってさ、デザインだよ？
つまりオリジナルのデザインは
すべて俺俺CSSライブラリってこと？
意味がよくわからないなぁ。
そもそも考え方としておかしいんだよね。
ただのデザイン集なのに。
PC用ではただのリスト、スマフォではドロップダウンて感じの
デザインにしたい場合、cssカスタマイズしてxs-xxxみたいなクラスを
自前で書いて、classに両方の場合のクラスを読み込ませるようにしないといけないんですか？
(極力共通のHTMLでPCスマフォ対応したい)
Bootstrapをディスりに来たとしか思えないｗ
まあ、普通に考えれば、
<ul class="some-list">
<li> 1
<li> 2
<li> 3
</ul>
ってかいて、
1. スタイルシートを2つ用意する
2. bodyにクラスを指定する
のどちらかでやるだろうな。
1の方法は pc.css と smartphone.css 作って
それぞれ読み込むファイルを分ける。
2の方法はCSSは一つでbodyタグにクラスを設定することで
body.pc .some-list {}
body.smartphone .some-list {}
という風に定義できるようになる。
どうやって読み込むファイルを分けるかは、HTMLを動的に生成する方法。
そしてもう一つ。発想を変えてPC版、スマホ版という区別ではなく
画面の大きさなどで区別する方法。つまり CSS3 Media Queriesを使う。
Bootstrapが標準でPC用ではリスト
スマホではドロップダウンにしてくれる
デザインを用意してくれているのなら
それを使えばいいだけだが。
CSSフレームワークに期待するな。
フレームワークというよりも
ただのデザイン集だ。
用意されていなければ自分で作るしかない。
PC用ではリスト、スマホではドロップダウンっていのは
CSSの想定される使い方としてできるんだよ。
HTMLには、デザインであるリストやドロップダウンという
内容を書かない。
CSSに書くことで、同じHTMLでデザインを変えることが出来る。
だけどBootstrapはデザインをHTMLに固定化させてしまうから難しくなる。
BootstrapはCSSの間違った使い方をしてるからこうなるのも仕方ない。
フレームワークがダメなのではなく、間違ったCSSの使い方を
しているのがBootstrapのだめなところだよ。
CSSを正しく使っているフレームワークならもちろんOKさ
どうやって読み込むファイルを分けるかは、HTMLを動的に生成する方法を使うか、
JavaScriptで適切なCSSを読み込むか、bodyのclass属性を変更する。
ありがとうございます
Bootstrapの機能ではなく、CSSの基本的な機能とかJavaScriptによる
動的な方法しかないということですね
なんとなくですが、data-target="xs:hogehogeClass, lg:hagehageClass"みたいな記述をすれば
ウィンドウのサイズがXX〜XXならXXXというクラスを読み込める
みたいなのを期待してしまっていたので・・・
Bootstrapはフレームワークを名乗っちゃいるが
ただのデザイン集だからね。
CSSでできることしか出来ないし用意された
デザイン以外を簡単に作る方法も用意してない。
> ウィンドウのサイズがXX〜XXならXXXというクラスを読み込める
ウインドウサイズが〜というのがCSS3 Media Queriesだよ。
HTMLに書いているのは同じクラスだけど、そのクラスに
適用されるデザインをウインドウサイズなどで変えることが出来る。
でもこの機能はBootstrapとは相性が悪くてね。
Bootstrapが希望通りのデザインを用意していないのなら
Bootstrapで定義されているクラスを上書きするしか無いよ。
そしたらBootstrapで用意されたクラスを使っているのだから
○○なデザインになるはずなのになってないみたいに意味不明なことになるけどね。
ま、ちゃんとしたCSSの使い方をしろってことさ。
使ったこと無いがSCSSのグリッドシステムあるだろ
http://www.profoundgrid.com/
Semantic
The grid keeps your markup semantic and
works without any "grid_x" classes.
Unless you want to use them, in which case they are included.
grid_xとかいうクラスなしで動くってさ。
ま、これが普通だよね。
今からBootstrap3にあわせて作っても無駄
6ヶ月は寝かせておいたほうがいい
どんなものかとダウンロードしてサンプル見たんだが、こんなのがHTMLにごちゃごちゃ入ってたよ。
<article id="row1">
<div class="col6">6</div>
<div class="col6 push6">6</div>
<div class="col12">12</div>
<div class="center">
<div class="subgrid1">
<div class="subcol subcol6">
<div class="subgrid2">
<div class="subsubcol subcol1">1</div>
…
俺はマルチカラムレイアウトでがっつり複雑なレイアウトは作らないけど、どんなフレームワークにせよ、
こんなのと似た感じになるのはしょうがないんじゃないの？
黙ってspan6とかでやってれば勝手にレスポンシブってくれるからBootstrapで充分。
いやームズいっすわー
Bootstrap3じゃHTMLとCSSが癒着してるからムズいっすわー
難問っすわーねぇー
http://jsfiddle.net/eGWeV/
メンテ不能w
生意気なブートストラッパー共をSCSSでビシっと黙らせてやっちゃって下さいよー
セマンティックすぎワロタ
そういうのがあちこちのHTMLにあると
思うとぞっとするね。
<section class="thread">
<header>
正しいHTMLでデザインするとこうなる。無駄なclassは消え(必要に応じてつけてもいいが)、theadクラス以下に全てが集約される。
<b>360px</b> <b>600px</b> <b>over..</b>
</header>
<ul>
<li>
<a href="#59">>>59</a>
<p>Bootstrapでやる方法は知らん。</p>
</li>
<li>
<a href="#60">>>60</a>
<p>もともとCSSはマークアップとデザインを分離するものだから、PC用ではリスト、
スマホではドロップダウンっていのはCSSの想定される使い方としてできるんだよ。</p>
<p>HTMLには、デザインであるリストやドロップダウンという内容を書かない。</p>
<p>だけどBootstrapはデザインをHTMLに固定化させてしまうから難しくなる。
BootstrapはCSSの間違った使い方をしてるからこうなるのも仕方ない。 </p>
<p>フレームワークがダメなのではなく、間違ったCSSの使い方をしているのが
Bootstrapのだめなところだよ。CSSを正しく使っているフレームワークならもちろんOKさ </p>
</li>
<li>
<a href="#63">>>63</a>
<p>でもこの機能はBootstrapとは相性が悪くてね。
Bootstrapが希望通りのデザインを用意していないのならBootstrapで定義されているクラスを
上書きするしか無いよ。そしたらBootstrapで用意されたクラスを使っているのだから
○○なデザインになるはずなのになってないみたいに意味不明なことになるけどね。</p>
<p>ま、ちゃんとしたCSSの使い方をしろってことさ。</p>
</li>
</ul>
</section>
それがbootstrapか。
当たり前だけどSCSSはメディアクエリーにも対応。
デザイン変えても360px掲げるんですか？
論理構造と視覚表現の分離は忘れましたか？
「pseudo-elementsで実装しろバーカ」が正しい指摘だ
つまりどういうこと？
360pxって視覚表現じゃないぞ？
お前が何をしろと言ってるのかさっぱりわからん。
pseudo-elementsで何を実装したいんだ？ちゃんといってみろ。
説明をしなくちゃならんくなりそうだな。
まあ、レス来てからにするか。
360pxに視覚表現以外の意味はない
>>71のCSSがあって初めて意味を成すんだから
だからHTMLではなくCSSの疑似要素でデザインすべきだと言う指摘に繋げた訳
あなたには360pxが何か意味のある内容だと思えたのかな？
いやそう思ったんだからマークアップしたんだよね
意味がないものをマークアップするなんてセマンティックを理解してない証拠になっちゃうんだから
で初めに戻るけど360pxをどうしてb要素でマークアップしたの？
.thread クラスに属する<b>360px</b>って何？
そこを説明して下さい
と言うか>>71を書いたの俺だから先に言うけど
メディアクエリのデバッグ目的で置いただけなんだけどね
やっぱり「視覚表現」を勘違いしてるな。
まあ、説明は帰ってからしてあげるよ。
それまで考えてな。
セマンティック至上主義の話は板違い。
無意味な事にヒートアップしてすんませんした
もう相手にしません
ＨＴＴＰ：／／coliss.com/articles/freebies/freebies-bootstrap-3-psd.html
Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」
ＨＴＴＰ：／／phpspot.org/blog/archives/2013/09/bootstrap3wysiw.html
本日分の燃料
http://d.hatena.ne.jp/kiwanami/20130905/1378353853
も一つ燃料投下
設定ウインドウを作ったのですが、
画面中で最大の文字で「設定」って
そんなこと言わなくても分かるだろ！って思えます
どうやってますか？
http://getbootstrap.com/customize/#variables-modals
@modal-title-padding で15pxも取ってあるのか
高dpiを意識してるんかな
こういうのを見ると、逆に面倒になってないか？って思うな。
CSSってそんなもんじゃないだろ？
テキストエディタでちょこちょこって買い換えれば
済むもんだろ？
そこそこの完成品にするための制限としての規約なんだから
守っておけばいいし、足りなくなったり、気に入らなくなったら、
ムリしてbootstrap使う必要ないだろ
このスレは本質と全然違うところでしか議論が進んでない
大事なものまで消してそうで怖い。
サンプルプログラムを作ってるわけじゃあるまいし
規約を守るのが仕事じゃないんだろ。
無理して使うこと無い は、本当にそのとおり。
自分のセマンティック精神に合わなきゃ使わなくていい。
ちょいとしたWebアプリがPCでもiPadでもそれっぽく作れるから、
自分は用途に応じて使うよ。
100〜のスレッドの続きを読む