BootstrapやHTML5ボイラープレートなどのWebフレームワークは、（開発者ではなく）デザイナーに何かを提供しますか？

これは、開発よりも設計に関するものです。

完全に手書きのCSSとHTMLを使用して、ゼロからサイトを構築します。

BootstrapやHTML5 Boilerplateなどのプリビルドcssテンプレートについては、しばらく前から知っています。私は過去にそれらを簡単に見てきましたが、実際にそれらを何かに使用することはありませんでした。CSSをリセットしたり、必要に応じてJavaScriptを含めたり、ビューポートを設定したりしても問題はありません。

今晩、基本的なHTML5 / CSSページをコーディングしました。レイアウトの点で本当に驚異的なものはありません。単にジャンプオフポイント。その後、Bootstrapに同じレイアウトの渦巻きを付けることにしました。かなり標準的な960ピクセル、ヒーロー画像ページを含む3列です。

Bootstrapを変更していると、自分の時間の80％以上がどのクラスまたはIDが何かに適用されるかを学習し、それをCSSで見つけて調整することに費やされていることがわかりました。Bootstrapが私をまったく救うつもりはないことが明らかになりました。実際、Bootstrapは、*過度にテンプレート化されたCSSにより、制作時間を大幅に増加させます。

*（「過度にテンプレート化された」とは、特定のWebサイトにはおそらく使用しないCSSが大量に存在することを意味します。全体に不要なCSSがあるわけではありません。）

Bootstrapに精通していれば、クラス/ ID名とスタイルシートの一般的な場所に精通していることを理解しています。だから、私はそれが私がかかっていた時間に少し曲がりたいと思っています、それのいくつかは私自身の不慣れのためであることに気づきました。

ただし、Bootstrap et。等 単に松葉杖であり、彼らは自分たちのブランドのコードをスプーンで与えることによってデザイナーを不自由にしている。したがって、サードパーティのソリューションに完全に依存する消費者ベースをロックし、すべてまたは少なくとも大部分の機能を実現します。Dreamweaverを使用できる場合にのみWebサイトを設計できるユーザーを思い出させます。そして、Dreamweaverにアクセスできず、変更が必要な場合、天国は禁止されています。

サイトを構築するとき、標準クラスとID名の独自のセットを使用します。CSSは、私にとって直感的な方法で構成されています。クイックセットアップ用のビルド前テンプレートの独自のセットがあります。したがって、私が構築するサイトは、かなり迅速に編集できます。事前構成済みのフロントエンドパッケージを使用するということは、自分自身に頼るのではなく、命名規則とその構造を学ぶ必要があるということです。

• BootstrapやHTML5 Boilerplateなどのテンプレートシステムの大きな長所を誰かに賞賛できますか？
• それらがあなたにとって価値があるのはなぜですか？
• 使用しているシステムに慣れているだけなので、簡単にナビゲートできますか、それともアイテムを探し回る必要がありますか？
• 必要な場合、それらなしでサイトを構築できますか？

私は先月かそこらで多くのフレームワークを研究してきました。私は実際にはどのソリューションにも飛び込みませんでしたが、私の候補リストにあるいくつかのフレームワークの選択肢は、Foundation、Intuit、YAMLとBaseです。

これらの良い点は、彼らが「ブートストラップ」の外観を持っていないことであり、応答性の世話をしながら、デザイナーに彼らの仕事（デザイン）に奨励するようです。

ここでフレームワークの大きなリストと、この中に詳細記事。

前述のように、私は調査のレッグワークを完了しましたが、テストを開始していないため、フレームワークのいずれかを提唱するコメントが役立ちます。

主な利点は次のとおりです。

• ラピッドプロトタイピング（速度など）
• 組み込みのクロスブラウザ一貫性

グリッドを作成する必要があり、作成する必要があるグリッドが事前に作成されたCSSフレームワークに適合する場合、ロジックは、フレームワークを使用して途中にいるということです。

とはいえ、私はあなたに同意する傾向があります。CSSフレームワーク、IMHOは、目標の90％を満たせば素晴らしいですが、もしそうでなければ、デフォルトと単なる構築を修正するためにより多くの時間と労力を費やしているという点で、ビジュアルデザインテンプレートに似ています独自のゼロから。

補遺：

もう1つの潜在的な利点を追加する必要があります。

• それは文書化されたシステムです

エンタープライズ環境では、フロントエンド開発者が複数いる場合があり、プロジェクトはフロントエンド開発者の複数の異なるチームで数年にわたることがあり、文書化された基礎となるプレゼンテーション層フレームワークが役立ちます。

それはあなた自身の自作のフレームワークが文書化できないと言うことではなく、それは文書化がしばしば優先事項ではないということです。

私はHTML5 Boilerplateには精通していますが、Bootstrapには精通しているので、それについてお話します。どちらも2つの異なるタスクを対象としていることに注意してください（H5BPはレスポンシブで正規化されたテンプレートであり、BootstrapはHTML / CSS / JSウィジェットのコレクションであり、レスポンシブグリッドです）。実際、それらは一緒に使用できます。

ただし、Bootstrap et。等 単に松葉杖であり、彼らは自分たちのブランドのコードをスプーンで与えることによってデザイナーを不自由にしている。したがって、サードパーティのソリューションに完全に依存する消費者ベースをロックし、すべてまたは少なくとも大部分の機能を実現します。Dreamweaverを使用できる場合にのみWebサイトを設計できるユーザーを思い出させます。そして、Dreamweaverにアクセスできず、変更が必要な場合、天国は禁止されています。

ここでは、ブートストラップソースへの完全なアクセス権があるため、類推は失敗します。何かがうまくいかない場合は、変更できます。私にとっては、松葉杖の反対です。ソースコードを使用してcssのテクニックを学ぶことができます。

「ウェブサイトの設計」は、Cコード作成者がアセンブリ言語の詳細な知識を持っている必要があると思う以上に、金属に近い必要があることに同意しません。HTML / CSSの調整は単にセレクターを拡張し、必要なものを追加するだけなので、そのたとえでさえフラットになりますが。

BootstrapやHTML5 Boilerplateなどのテンプレートシステムの大きな長所を誰かに賞賛できますか？

私にとって、Bootstrapのキラー機能は、一貫性があり、簡単に適用できるウィジェットスタイルとJavascriptコンポーネントです。ボタンのように見えるリンクが必要ですか？'.btn'クラスを追加します。テーブルが欲しいですか？'.table'クラスを追加します。ナビゲーション要素が必要ですか？番号なしリストを設定し、ナビゲーションクラスを追加します。

ドロップダウン、ポップオーバー、アラートなどは、データ属性を持つ要素に簡単に追加できます。ブートストラップには、ウィジェットに簡単に統合できる非常に見栄えの良いアイコンのセットが含まれています。

それらがあなたにとって価値があるのはなぜですか？

• サイトのプロトタイプをすばやく作成できます
• クロスブラウザおよびクロスプラットフォームのCSSのデバッグはすべて私のために行われました。
• 幅広い変数を選択できるCSSを簡単にカスタマイズできるため、レイアウトをすばやく試してプロトタイプを作成できます。
• 標準ナビゲーションウィジェット
• ソースコードはオープンで無料です。新しいmixinが必要な場合や必要に応じて動作を変更する場合は、手を汚し、LESSをカスタマイズできます。

使用しているシステムに慣れているだけなので、簡単にナビゲートできますか、それともアイテムを探し回る必要がありますか？

Bootstrapの最大の機能の1つは、その優れたドキュメントです。簡単にナビゲートでき、CSSセレクターは直感的で覚えやすいです。

必要な場合、それらなしでサイトを構築できますか？

はい、しかしそれは明らかにより多くの仕事です。UXに集中し、見栄えの良い仕上がりのウィジェットと一貫した機能を備えたレイアウトの迅速なプロトタイプを作成できます。

テンプレーティングシステムとフレームワークのいいところは、彼らはあなたに多くの時間を節約できることである場合に限っあなたは、彼らはあなたがしたいように動作します。そのため、Bootstrapを使用すると、JSカルーセルを実行するためのセマンティクスを学習すると、実装するのはほとんど犯罪的に簡単になります。また、起動する前に自分でロールバックするか、Railsでbootstrap-sassのようなものを使用してこれらの変数をオンザフライで変更すると、Bootstrapがはるかに簡単になります。後ですべてを変更する必要がなくなります。

DA01はブラウザの一貫性について語っています...それは私にとって大きな要因です。SOにいる多くの人々が、いくつかのことを行うためだけに大きなライブラリを追加することはリソースの浪費であることを思い出させますが、私がjQueryを使用しているのはそのためです。jQueryを使用すると、特定のブラウザーセットで機能することを知っているので、おそらく自分でもっと軽量なソリューションを実現できたとしても、jQueryがどのように書くことを望んでいるのかを学ぶ方が有益であることがわかりましたJavaScriptを実行します。

結局、HTML / CSSフレームワークには制限があります。私はできる限り手でコーディングしたいので、私はまだコントロールマニアです。しかし、私はこれらのテンプレート/フレームワークを設定するのに多くの時間を費やしたよりも賢くて高度な人々であるという事実を尊重します。

興味のない人は、大企業の大チームで働いていますか？

ブートストラップなどのフレームワークは、プロジェクト全体で一貫したコードの標準を作成するのに優れています。また、新しい開発者を募集する場合、人気のあるフレームワークの経験がある人はすでに構文に精通し、生産性を大幅に向上させることができます...大企業にとって素晴らしいニュースです。

また、..ブートストラップなどのフレームワークでは、より多くの画面サイズ、より多くのデバイス、より良い機能をサポートすることで常に更新し続けています。

これまでの回答のいくつかを読んで、彼らは非常に心が狭いように見えます、私は答えのほとんどが単独で、または非常に小さなチームで、この種のことは通常問題ではない小さなプロジェクトで働いている人々からのものであると仮定しています。

これまでのすばらしい回答で述べたことに加えて、これらのテンプレートのもう1つの利点は、デバイス間の一貫性です。組み込みのグリッドにより、あらゆるOS向けの設計が非常に簡単になります。

次の理由から、私はまだ自分のコードを書くことを好みます。

• すでに書いたことに精通している。何か変更する必要がある場合は、それがどこにあるかを正確に知っています。

• プロジェクト中心の構造。新しいサイト/アプリごとに以前とは異なるニーズがあるため、ファイルとリソースを個別に整理する必要があります。

• さまざまなデバイス用にカスタマイズされたビュー。

非常に制限されたページを作成していない限り、新しい要素にスタイルを追加し、既存の要素を上書きすることになります。

私はレスポンシブデザインを使用するのが好きなので、それらを使用しない主な理由は、各レスポンシブステップを「別々に」全体として設計することを好むためです。また、これらのテンプレートは通常、完全に微調整できない程度の剛性グリッドを使用します。

最大の利点は、見た目を推測するだけでなく、自分でサイズ変更を試すことができることです。

私は実際にナビゲーションをコーディングしてテキストコンテンツを追加する、非常に「コンテンツファースト」な開発アプローチを取っています。設計段階にあるときに予期していなかったことにさらされる傾向があります。

Twitter Bootstrapなどのフレームワークを使用することで、設計中にページを実際にテストでき、ユーザビリティの問題やその他のユーザーエクスペリエンスの課題を発見することもできます。フレームワークには多くの再利用可能なクラスがあり、使い慣れて時間を節約できます。

あなたは最初からたくさんコーディングすることを述べました。私は非常にカスタムまたは非常に軽量にする必要があるものがあるとき、私はスケルトンに行きます

長年、私はすべてを手作業でコーディングしていましたが、最近ではBootstrapを使用する傾向があります。なぜそうするのですか？

1. ほんの少しの作業でレスポンシブレイアウトが得られます。私が取り組んでいたいくつかのウェブサイトでは、タブレットとモバイル向けに最適化されたレイアウトを得るために、わずかな微調整が必​​要です。レスポンシブnavbarは、私のお気に入りのブートストラップコンポーネントの1つです。
2. デフォルトのコントロールは、ブラウザとOSの間で一貫性がありません。もちろん、使用しているOSやブラウザが何であれ、これらは常にugいものです。ブートストラップを使用すると、まともな、一貫したルックアンドフィールの小さな作業を取得できます。とにかくすべてのコントロールのスタイルを変更したい場合、はい、Bootstrapはあまり時間を節約しませんが、私の経験では、ほとんどの場合、すべてのコントロールのスタイルを変更するのに十分な時間はありませんが、それでもstillいデフォルトにイライラしますコントロール。
3. 純粋なCSSで作業するときは、あらゆる小さなもの（色、境界線の太さ、グラデーション、影、境界線の半径、移行、およびリストが続きます）、個々に少し時間がかかりますが、全体としては大きな時間の流れです。期限のあるプロジェクトで作業するときは、できることとできないことを制限します。フレームワークを使用すると、CSSプロパティを微調整する代わりに、より粗いコンポーネントで考えることができます。
4. 一部のサーバー側フレームワークには、ブートストラップとの統合があります。たとえば、django-bootstrapを使用する場合、{{ form|as_bootstrap }}エラーメッセージの強調表示など、ブートストラップスタイルのフォームを取得することができます。

Bootstrapを変更していると、自分の時間の80％以上がどのクラスまたはIDが何かに適用されるかを学習し、それをCSSで見つけて調整することに費やされていることがわかりました。

それはあなたがそれを間違えるところです。Bootstrapを活用したい場合は、あまりカスタマイズしないでください。事前に構築されたコンポーネントを使用するときに、すべてを微調整する必要がある柔軟性を放棄します。IKEAのコンポーネントで部屋を飾るときに、木板をのこぎりで切ったり、彫ったりする時間を費やさないでください。

ブートストラップは、ビルド済みのコンポーネントから作業中のWebサイトにすばやくパッチを適用する必要がある場合に適しています。派手なデザインのサイトにコンポーネントを配置すると、そのコンポーネントは親指のように突き出ます。そのため、私は通常、この種のプロジェクトではBootstrapを削除します。

事前構成済みのフロントエンドパッケージを使用するということは、自分自身に頼るのではなく、命名規則とその構造を学ぶ必要があるということです。

これは実際、人気のあるパッケージを使用する利点です。「btn-group」、「btn btn-large」が何をしているのかを知っていれば、プロジェクトを他の開発者に引き渡すのは簡単です。あなたのCSSに変更を加え、コードを解読したり変更しようとすることはありません）。

使用しているシステムに慣れているだけなので、簡単にナビゲートできますか、それともアイテムを探し回る必要がありますか？

btn、table、row *、span *などの一般的なものは自然でしょう。ただし、主要コンポーネントのhtmlの場合、入力するのではなく、例からコピーして貼り付ける方がはるかに高速です。

必要な場合、それらなしでサイトを構築できますか？

何度もそこに行った。

それらは次の用途にのみ有効です。

1. コーディングに慣れていないが、デザインをサイトに持ち込むためのソリューションが必要なデザイナー。
2. 独自のフレームワークを構築したくない人のためにライン生産をストリーミングする方法。

個人的には、独自のメソッドを持っていますが、CSS、HTML、jQueryのコーディング方法をすでに学んでいるため、この方法を採用する意欲はありません。手がかりがなく、コーディングの方法を学ぼうとしている人々にとって、これらには利点があると思います。このようなものが5年前に見られたら良かったでしょう。また、あなたが述べたように、現在の生産方法でこれを実装するのに時間がかかります。

編集： あなたのスレッドをハイジャックしようとしていないが、私も同じことを疑問に思っているが、WordPressに関して。WordPressを軽く使用しましたが、フレームワークが有益かどうかわかりません。私は、大きな利益が得られるまで、昔ながらの方法で行くつもりでした。

ブートストラップは、レスポンシブレイアウトの出発点として適しています。しかし、デザインに関しては、かなり不足していると思います。テンプレートが過度に使用されているため、一種の「ブートストラップ」のような外観をしています。

しかし、ブートストラップの目的を意識する必要があります。Twitterで作成された社内アプリに一貫性を持たせることでした。おそらくmvpまたはプロトタイプとして、あまり考えられないアプリは本当に素晴らしいツールです。