【フロントエンドフレームワーク】Bootstrap 3とFoundation 5の5つの大きな違い（翻訳）_html/css_WEB-ITnose

[フロントエンド フレームワーク] Bootstrap 3 と Foundation 5 の 5 つの大きな違い (翻訳)

https://ruby-china.org/topics/17143

この記事の翻訳元: https:/ /medium.com /frontend-and-beyond/8b3812c7007c

開発者は Bootstrap を使用してください。フロントエンド開発者は Foundation を使用してください

ただし、Bootstrap と Foundation には多くの重要な違いがあると思います。覚えておく必要があるのは 1 つだけです:

ZURB と Twitter の 2 つの設計哲学は非常に明確であり、そのフレームワークの名前からもわかります: Bootstrap はブートストラップを意味します。言い換えれば、プロジェクト内のすべてを処理しようとします。

この観点を維持したまま、この 2 つの重要な違いをさらに列挙してみましょう:

1. Foundation は、を配置するだけです。要素の数は限られていますが、Bootstrap では想像できるすべての要素が提供されます。

ZURB の Foundation の設計目標は、たとえ事前定義された UI 要素を使用したとしても、他の Web サイトとあまりにも似てはいけないということです。

2. REM とピクセル

Foundation は REM を使用しますが、Bootstrap はピクセルを使用します。

ピクセルを使用するということは、高さ、幅、パディングを正確に定義する必要があることを意味します。

Foundation 5 では、EM ではなく REM が使用されるため、デバイスや画面サイズごとに、EM カスケードの問題が回避されます。 /font-sizing-with-rem/

REM を使用すると、 font-size: 80 % を直接使用できることになります。

REM を使用すると、次のことができることに注意してください。ピクセルの詳細を取り除くため、REM を使用して対処することは非常に価値があります。

Foundation は、ピクセルを REM に変換するための Sass mixin メソッドも提供します。この方法では、引き続きピクセルの方法を使用できます。ページの定義を考えています:

.element {  width: rem-calc(10px); // will be converted to REMs}

3. 柔軟なグリッド VS 事前定義されたグリッド

Foundation のグリッドは、現在のブラウザーの幅に自動的に適応できます。

Bootstrap は、突然変更されます。

Foundation 現在のブラウザの幅に柔軟に適応し、Transformer と同じ効果を発揮する新しい技術手段です。グリッドが変更されるとき: 小、中、大。すべての操作はズームインとズームアウトのみで、現在のブラウザーの幅に適応します。事前定義された画面サイズは必要ありません。主な理由は、さまざまなスタイルを定義することが推奨されるためです。

Bootstrap を使用すると、固定または多様なグリッドが得られます。つまり、グリッド コンテナーの幅を事前に設定するかどうかを設定する必要があります。

Foundation と Sass を使用すると、自由に調整できます。最大グリッドのサイズ (中と小は自動的に計算されます)、大画面の列数、および小画面の列数

4. モバイル ファースト VS はモバイル デバイスもサポートします

基本はこれに基づいて設計されています。そして、Bootstrap は、モバイル、タブレット、デスクトップ、特大画面用のデスクトップに事前に分類されるように設計されています。モバイルファーストの Web サイトを構築すると、間違いなく大きな画面でも使用できるようになります。したがって、Foundation は次のことを行うことをお勧めします: モバイルファースト

Foundation の Sass Media Query Mixin を使用すると、モバイル デバイスが何であるかをクエリする特定の Media Query はありませんが、どのようにすべきかを定義するために Media Query を使用することがわかります。何かを設計するときにデスクトップを最初に考慮すると、小さな画面をサポートする際に大きな問題が発生する可能性があります。携帯電話を最初に考慮すると、ユーザーにとって何が最適であるかに焦点を当てることができます。重要なのは、スペースの使用感が向上することです

Bootstrap にはより大きなコミュニティが必要です

これがコミュニティです。非常に巨大で包括的で、探しているものはほぼすべて見つかります

Foundation を選択した場合、ほとんどすべてのソリューションがブートストラップ用であり、独自のソリューションを構築する必要があるかもしれません。

結論

自分自身にいくつかの質問をしてください:

何かを使いやすくしたいですか?それともよりリアルなものにしたいですか?

CSS を整理して、それを基本コンポーネントにしたいですか?

答えは: Bootstrap. Foundation です。

この記事は WinDy によって公開されています。フォロー歓迎です。