もうBootstrap3使っても良いんじゃねぇ？

IE8以下に対応したきゃ、IE専用のCSS書けば良いじゃん。

新規ならいいけど既存のを置き換える気力はないな

昨日から2→3を始めた、置換えは気が遠くなるが2で止めたままにしとくのも先が無いんでやるしかない。

2の時にGrid systemを12→30にしてたんだけど3からはCustomizeページでcolumns数を変更出来なくなったから
それをどうすっかな・・・

そもそもBootstrapの設計が悪いんだよ。
ウェブで推奨されるセマンティックなやり方とは
逆行する時代遅れの設計。

適用するスタイルに合わせてclass名を
バンバン追加していくスタイル。
これじゃメンテナンス性が悪すぎる。

修正時にあちこちHTMLを変更する羽目になる。
classに入れるクラス名は原則一つ
デザインの修正でHTMLは修正しない。全部CSSで行う。

それが昔から目指していた
スタイルとHTMLの分離。
CSSの存在理由なのに。

まーレスポンシブとか考えたらグリッドシステムが一番楽そーなんだけどね
3になって行ごとにROW入れなくてよくなったのが良い

>>5
class Aの特性とclass Bの特性を持った要素はclass CとしてA+Bの内容を定義するの？

巨大なCSSが出来上がるなｗ

>>7
その通り。

SCSSを使ってclass Aとclass Bを定義しておいて
「class CはAとBを継承する」と書けば
その内容は簡単に定義できる。

>>8
巨大なCSSは、小さいSCSSから生成するので人間の負担はない。

それよりも人間が書かないといけない
巨大なHTMLはメンテナンス性が悪い。

CSSは一箇所に書けば終わりだが、
Bootstrapなんかを使うと、使用しているページ全てに
ごちゃごちゃ書かないといけない。

>>9
じゃ、3つのクラスの組み合わせが発生する場合、3C1+3C2+3C3=3+3+3=9つのクラスを定義するわけだね。
3つのクラスの組み合わせが発生する場合（以下略）

(誤) 3つのクラスの組み合わせが発生する場合（以下略）
(正) 4つのクラスの組み合わせが発生する場合（以下略）

3C1+3C2+3C3は3+3+1=7だろ

>>9
例えば、テーブル関連で言うと
table
table-bordered
table-striped
table-condensed
というクラスが定義されてるわけだけど、具体的にはどうすればいいわけ？

>>13
table-hoverもある。5つのクラスの組み合わせが発生するね。

>>9
SCSSは知らんけど、それができるなら
.your_own_class : extend bootstrap_class_a, bootstrap_class_b
みたいに定義してけばいいだけじゃないの？

rowとかspanはDIVにしか使わない事にしてるのは当たり前？

>>13
その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だけを弄って変えるもの。

補足。「原則として」と書いているのは、
CSSの限界によってdivやspanを入れなければ
出来ないことがたまにあるから。

HTML5とCSS3によって大きく改善されたけどね。
実際に今開発しているスマホ用サイトではほとんどdivやspanを使わずに
無駄な要素を入れることなくCSSだけで表現出来てる。

>>10
> じゃ、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.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

言うだけなら誰にでもできる（笑）

WHY WE DON’T USE TWITTER BOOTSTRAP
http://blog.idyllic-...se-Twitter-Bootstrap

TWITTER BOOTSTRAP - IT'S NOT ALL ROSES
http://theled.co.uk/...--its-not-all-roses/

Please stop using Twitter Bootstrap
http://css.dzone.com...e-stop-using-twitter

Why Twitter Bootstrap is bad for the internet
http://blog.guy.ht/2...ad-for-the-internet/

だからBootstrapをセマンティック病患者に見せるなとあれ程言ったじゃないか

セマンティックかどうかよりも
メンテナンス性が悪くなるのが嫌だな。
HTMLがごちゃごちゃするし、
デザイン変更時に全HTMLを書き換えなきゃいけないし。

多分、Bootstrapをありがたがってる人って

1. 自分でデザインを作れない。（デザインなんかどうでもいい。おきせのデザインでいい）
2. CSSを簡単な物以外自分で書けない。
3. JavaScript書けない
4. とりあえず動けばいい

って人なんじゃないかって思う。

デザインを自分で好きに作りたい人は
Bootstarapをカスタマイズせずに使うなんてありえないし
カスタマイズしようと思えば、Bootstarapに合わせた書き方を
しなければいけなないという面倒くささのせいで使いたくなくなると思う。

流行ってるからと飛びついた馬鹿デザイナーが勝手に幻滅してるだけだよ
>>20が理解できない奴多すぎ

流行ってすらいないものに飛びつく奴も馬鹿だけどな。


フレームワークには流行り廃りはあるけれど
根本的な考え方が大きく変わることはないんだ。

マークアップとデザインの分離。それがCSSの本質。
BootstrapはそのCSSの本質に当てはまっていない。
だからバッドプラクティス。それだけの話。

グリッドシステムだけあればいいんだけど

>>25

4以外全部はずれ。ただ、時間をかけずにそれなりのものをちゃっちゃと作りたいだけです。

と、いう理由でBootstrapをこれから使おうかと思ってるんですが、
夢物語だと知って放りなげるかもしれません。

個人的には>>28と、あと、お手軽なテーマでもあればそれで十分だったりします。

どう考えてもBootstrapは逆に時間がかかるだろ。

将来修正はしません
ファイルの数は10個ぐらいですってなら
まだわかるけどな。

Bootstrapってプロトタイプつくためのもんだろ。
だれが使っても同じデザインにならないようなものを
プロダクトで採用できるかってーの。

捨てるためのフレームワークだよ。
それをわかってない奴は馬鹿だけどな。

働き者の馬鹿ほど時間を掛けてフルスクラッチしたがる
でBootstrapより使い物にならんオレオレフレームワークの誕生って訳だ

そもそもCSSにフレームワークなんていらん。
SASS（SCSS）というCSSを改良した文法があればいい。
あとはCSSの正しい使い方通りに使うだけ。

将来修正しませんじゃなくて、
「こういう感じでいいなら早く一定レベル以上のデザインを提供できますよ、
こだわりたいなら、当然お金と時間がかかりますよ」
ってやるのが商売ってもんで、
それをやらずに何でも客のいいなりに毎回フルスクラッチなんてばからしくてやってられません。

やってる会社だらけなので、商売やりにくいですけどね…

Bootstrap + LESSでいいじゃない

>>33
いやだから全員がイチからCSS書くのヤだからFWがあるわけで。

Bootstrap使ってる奴は、いろんなの作ってきて結果的にBootstrap使ってたり
趣味で使ってたりする奴だろ。

このスレでBootstrapは面倒とか、メンテ性が良くない、とかツマラナイ事言ってないで
建設的な意見をしろよ。俺も。

社内ツールのWebアプリ書く時に、デザインをほぼ考慮しなくて良いのでBootstrapは大変重宝している。

Bootstrapをdisってる人って、サイトテンプレートなんかも認めないんだろうな。
どっちかというと、サイトテンプレートの方が酷いのが多いけどね。

>>36
Bootstrapのような変なフレームワークはいらん。
正しくCSSを使っているフレームワークならいいよ。

>>39
> Bootstrapをdisってる人って、サイトテンプレートなんかも認めないんだろうな。

なんで？？？

勝手に決め付けるなよ。

頭おかしいんじゃないのか？

正しくCSSを使っているなら問題ない。
Bootstrapは間違ったCSSだからクソなんだよ。

何が正しくて何が間違っているかの定義は
CSSはデザインを分離するものであるという
CSSが出来た理由に合っているかどうかだ。

>>37
> このスレでBootstrapは面倒とか、メンテ性が良くない、とかツマラナイ事言ってないで
> 建設的な意見をしろよ。俺も。

SCSSってでてるじゃん。

class属性に値を詰め込む方法ではなくて
class属性に入れるクラス名は原則一つ。

これでやれって。

>>42

W3Cのhtml4あたりの勧告やDTDを読んでらっしゃい。
そこはhtml5になってもかわらないよ、恐らく。

>>43
そりゃそうだよなぁ。
CSSができたのはHTML4からだからなぁ。

一部の欠点をもってして利点を全否定する馬鹿は手に負えん
開発速度を最重要視したフレームワークだぜこれ
そのために十数年前から口やかましく言われてる禁じ手をあえて採用してるんだろ
全員がメンテナンス性やデザインを重視するなら他のを選んでるっての

>>45
Bootstrapが開発速度を重視しているからって、
他のやり方よりも開発速度が速いことにはならないんだが。
つまりSCSSでも開発速度は速い。

開発速度には普通メンテナンス速度も含まれるわけだが
この点でBootstrapは遅い。

そして君が言う通り禁じてというかダメなやり方を採用しており
メンテナンス性やデザイン性を重視するときに使えない。

>>46
メンテナンス性は、SCSSとかLESS使えよ

>>46
はいはいSCSS一番でございます

フレームワークの要旨を説明してるのに
なんで下層レイヤーの言語と比較するようなアホな論争に持ってこうとしてるんだか
フレームワーク同士の比較なら建設的なんだがな

>>46
俺俺CSSライブラリが使われてるのをメンテする方が大変だけどな。

まあ、Webデザイナーとかコーダーとか言われる人たちの素晴らしいデザインには使えないかもしれないが、センスの
かけらもない一プログラマには有用だよ。俺みたいな。

>>50

同意ｗ

今仕事でBootstrap3を使ってる奴はデザイナー向けブログに踊らされてるきちがい
リポジトリみれば分かることだがまだ修正もしないといけないのたくさんあるのに
今使うのは人柱のようなものだ
自分のサイトで使う分にはいいが、人様のサイトを作るなら使うのはまだ早い

ん？デザイナーはBootstrapごときは使わないんじゃ？

Bootstrap 2ならともかく、今3を人様のサイト用に使うのはチャレンジャーすぎる

>>49
俺俺CSSライブラリって何？

CSSってさ、デザインだよ？
つまりオリジナルのデザインは
すべて俺俺CSSライブラリってこと？

意味がよくわからないなぁ。

CSSにフレームワークっていうのが
そもそも考え方としておかしいんだよね。

ただのデザイン集なのに。

教えてください
PC用ではただのリスト、スマフォではドロップダウンて感じの
デザインにしたい場合、cssカスタマイズしてxs-xxxみたいなクラスを
自前で書いて、classに両方の場合のクラスを読み込ませるようにしないといけないんですか？
(極力共通のHTMLでPCスマフォ対応したい)

>>57
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でやる方法は知らん。

Bootstrapが標準でPC用ではリスト
スマホではドロップダウンにしてくれる
デザインを用意してくれているのなら
それを使えばいいだけだが。

CSSフレームワークに期待するな。
フレームワークというよりも
ただのデザイン集だ。
用意されていなければ自分で作るしかない。

もともとCSSはマークアップとデザインを分離するものだから、
PC用ではリスト、スマホではドロップダウンっていのは
CSSの想定される使い方としてできるんだよ。

HTMLには、デザインであるリストやドロップダウンという
内容を書かない。

CSSに書くことで、同じHTMLでデザインを変えることが出来る。

だけどBootstrapはデザインをHTMLに固定化させてしまうから難しくなる。
BootstrapはCSSの間違った使い方をしてるからこうなるのも仕方ない。

フレームワークがダメなのではなく、間違ったCSSの使い方を
しているのがBootstrapのだめなところだよ。
CSSを正しく使っているフレームワークならもちろんOKさ

>>58に追記

どうやって読み込むファイルを分けるかは、HTMLを動的に生成する方法を使うか、
JavaScriptで適切なCSSを読み込むか、bodyのclass属性を変更する。

>>58-61
ありがとうございます
Bootstrapの機能ではなく、CSSの基本的な機能とかJavaScriptによる
動的な方法しかないということですね
なんとなくですが、data-target="xs:hogehogeClass, lg:hagehageClass"みたいな記述をすれば
ウィンドウのサイズがXX〜XXならXXXというクラスを読み込める
みたいなのを期待してしまっていたので・・・

>>62
Bootstrapはフレームワークを名乗っちゃいるが
ただのデザイン集だからね。
CSSでできることしか出来ないし用意された
デザイン以外を簡単に作る方法も用意してない。

> ウィンドウのサイズがXX〜XXならXXXというクラスを読み込める
ウインドウサイズが〜というのがCSS3 Media Queriesだよ。
HTMLに書いているのは同じクラスだけど、そのクラスに
適用されるデザインをウインドウサイズなどで変えることが出来る。

でもこの機能はBootstrapとは相性が悪くてね。
Bootstrapが希望通りのデザインを用意していないのなら
Bootstrapで定義されているクラスを上書きするしか無いよ。
そしたらBootstrapで用意されたクラスを使っているのだから
○○なデザインになるはずなのになってないみたいに意味不明なことになるけどね。

ま、ちゃんとしたCSSの使い方をしろってことさ。

みなさんはグリッドシステムそのものを批判してるの？

批判してるのは適材適所が理解できないサルだけだよ

>>64
使ったこと無いが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とかいうクラスなしで動くってさ。
ま、これが普通だよね。

今まで2人で開発してたものを公開しissueも多い状態だから挙動が変わりやすい不安定なバージョンなのに
今からBootstrap3にあわせて作っても無駄
6ヶ月は寝かせておいたほうがいい

>>66
どんなものかとダウンロードしてサンプル見たんだが、こんなのが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で充分。

>>57
いやームズいっすわー
Bootstrap3じゃHTMLとCSSが癒着してるからムズいっすわー
難問っすわーねぇー
http://jsfiddle.net/eGWeV/

>>71
メンテ不能w

リスト→コンボ化のために実質1ルールも追加しないといけないとかマジありえないっスよね
生意気なブートストラッパー共をSCSSでビシっと黙らせてやっちゃって下さいよー

>>69
セマンティックすぎワロタ

>>71
そういうのがあちこちのHTMLにあると
思うとぞっとするね。

>>71

<section class="thread">
　<header>
　　正しいHTMLでデザインするとこうなる。無駄なclassは消え(必要に応じてつけてもいいが)、theadクラス以下に全てが集約される。
　　<b>360px</b> <b>600px</b> <b>over..</b>
　</header>
　<ul>
　　<li>
　　　<a href="#59">&gt;&gt;59</a>
　　　<p>Bootstrapでやる方法は知らん。</p>
　　</li>
　　<li>
　　　<a href="#60">&gt;&gt;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">&gt;&gt;63</a>
　　　<p>でもこの機能はBootstrapとは相性が悪くてね。
　　　　Bootstrapが希望通りのデザインを用意していないのならBootstrapで定義されているクラスを
　　　　上書きするしか無いよ。そしたらBootstrapで用意されたクラスを使っているのだから
　　　　○○なデザインになるはずなのになってないみたいに意味不明なことになるけどね。</p>
　　　<p>ま、ちゃんとしたCSSの使い方をしろってことさ。</p>
　　</li>
　</ul>
</section>

あ、headerタグの中にh1を入れるの忘れたｗ

無駄なdiv、無駄なspan、無駄なclass
それがbootstrapか。

<span class="badge size-indicator">360px</span> の指摘はしないんだな

何か指摘することでもあんの？

当たり前だけどSCSSはメディアクエリーにも対応。

>>80
デザイン変えても360px掲げるんですか？
論理構造と視覚表現の分離は忘れましたか？
「pseudo-elementsで実装しろバーカ」が正しい指摘だ

>>81
つまりどういうこと？
360pxって視覚表現じゃないぞ？
お前が何をしろと言ってるのかさっぱりわからん。
pseudo-elementsで何を実装したいんだ？ちゃんといってみろ。

なんとなく、論理構造や視覚表現とは何かという
説明をしなくちゃならんくなりそうだな。
まあ、レス来てからにするか。

>>82-83
360pxに視覚表現以外の意味はない
>>71のCSSがあって初めて意味を成すんだから
だからHTMLではなくCSSの疑似要素でデザインすべきだと言う指摘に繋げた訳

あなたには360pxが何か意味のある内容だと思えたのかな？
いやそう思ったんだからマークアップしたんだよね
意味がないものをマークアップするなんてセマンティックを理解してない証拠になっちゃうんだから

で初めに戻るけど360pxをどうしてb要素でマークアップしたの？
.thread クラスに属する<b>360px</b>って何？
そこを説明して下さい

と言うか>>71を書いたの俺だから先に言うけど
メディアクエリのデバッグ目的で置いただけなんだけどね

でもまぁ海外のサイトとか見てると、これでもかってくらいDIVりまくってるしな

>>84
やっぱり「視覚表現」を勘違いしてるな。
まあ、説明は帰ってからしてあげるよ。
それまで考えてな。

セマンティックが止まらない

思ったが http://toro.2ch.net/hp/ でやる話じゃね？

Webプログラマが使うCSSフレームワークという文脈ならあり。
セマンティック至上主義の話は板違い。

そうすね
無意味な事にヒートアップしてすんませんした
もう相手にしません

散々言っといて無意味なことって何よ？アホかいね。

これはスゴ過ぎ！Bootstrap 3のインターフェイスの全てを再現したPSD素材 -Bootstrap 3 PSD
ＨＴＴＰ：／／coliss.com/articles/freebies/freebies-bootstrap-3-psd.html

Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」
ＨＴＴＰ：／／phpspot.org/blog/archives/2013/09/bootstrap3wysiw.html


本日分の燃料

CSSガイドラインを翻訳してみた
http://d.hatena.ne.j.../20130905/1378353853

も一つ燃料投下

bootstrapのmodal-headerって太すぎないですか？
設定ウインドウを作ったのですが、
画面中で最大の文字で「設定」って
そんなこと言わなくても分かるだろ！って思えます
どうやってますか？

>>94
http://getbootstrap....ze/#variables-modals

@modal-title-padding で15pxも取ってあるのか
高dpiを意識してるんかな

>>95
こういうのを見ると、逆に面倒になってないか？って思うな。
CSSってそんなもんじゃないだろ？
テキストエディタでちょこちょこって買い換えれば
済むもんだろ？

なぜ規約を破る前提で語るんだよ
そこそこの完成品にするための制限としての規約なんだから
守っておけばいいし、足りなくなったり、気に入らなくなったら、
ムリしてbootstrap使う必要ないだろ

このスレは本質と全然違うところでしか議論が進んでない

グリッドシステムだけ使いたいからダウンロードしたら他のコードを全部消す。
大事なものまで消してそうで怖い。

>>97
サンプルプログラムを作ってるわけじゃあるまいし
規約を守るのが仕事じゃないんだろ。

>>97
無理して使うこと無い　は、本当にそのとおり。
自分のセマンティック精神に合わなきゃ使わなくていい。
ちょいとしたWebアプリがPCでもiPadでもそれっぽく作れるから、
自分は用途に応じて使うよ。