BootstrapとPureを比較

    「Bootstrap」と「Pure」の概要

    「Bootstrap」と「Pure」は、CSSフレームワークです。CSSに関する専門知識がなくても簡単に見栄えの良いWebデザインを作成できます。

    ■「Bootstrap」とは

    Bootstrapは、HTML/CSS/JavaScriptでWebサイト/Webアプリを開発するためのWebフレームワークです。世界で最も人気のあるWeb(CSS)フレームワークとされています。

    「応答性の高いグリッドシステム」「豊富な組み込みコンポーネント」「jQueryで構築された強力なプラグイン」などを使用して、レスポンシブデザインを構築できます。

    ■「Pure」とは

    Pureとは、超軽量CSSフレームワークです。汎用的に使用できるCSS設定をまとめてあり、さまざまなWebプロジェクトで活用できます。

    「軽量」「高速」「JavaScript不使用」「少ないCSS記述量」「既存サイトへ適用性が高い」などの特徴があります。

    「開発スタイル」比較

    ■Bootstrap

    BootstrapはWeb開発に必要となる機能を備えているため、Bootstrapを主軸とした開発に適しています。

    ■Pure

    PureはWeb開発プロジェクトを開始するための基本的かつシンプルなスタイルを提供します。

    機能満載のフレームワークは不要で、特定の限られたコンポーネントを求める開発プロジェクトに向いているフレームワークです。

    「開発効率」比較

    ■Bootstrap

    Bootstrapはテンプレートが一式揃っているため、効率的に開発できます。既存要素の拡張機能を利用することで、開発の幅を広げることができます。

    特に、関連コンテンツ(記事/チュートリアル/プラグイン/拡張機能/テーマなど)の登録数は、他のCSSフレームワークを圧倒するほどに充実しています。

    ■Pure

    Pureは、軽量かつ自由度が高いため、他のツールや独自設定と組み合わせて必要な部分のみに使用できます。

    癖がなく使用しやすいため、学習コストも削減できます。

    「メンテナンス性能」比較

    ■Bootstrap

    カスタマイズオプションを利用したメンテナンスを行えます。

    ただし、テンプレートがJavaScript/jQueryで制御されているため、メンテナンスを行いにくい一面もあります。

    ■Pure

    軽量かつ自由度が高いため、メンテナンスを行いやすいメリットがあります。

     

    参考元サイト

    「Bootstrap」基本情報

    ■概要

    Bootstrap(ブートストラップ)とは、Webサイト/WebアプリをCSSで開発するためのWebフレームワークです。「レスポンシブデザイン」や「グリッドシステム」などの特徴があります。

    ■基本説明

    Bootstrapは、HTML/CSS/JavaScriptでWebサイト/Webアプリを開発するためのWebフレームワークです。

    世界で最も人気のあるWeb(CSS)フレームワークとされています。

    「応答性の高いグリッドシステム」「豊富な組み込みコンポーネント」「jQueryで構築された強力なプラグイン」などを使用して、レスポンシブデザインを構築できます。

    HTML/CSSなどのWebデザインの知識がない人でも簡単に見栄えの良いWebデザインを作成できます。

    ■経緯

    モバイルファーストへの潮流

    近年、スマートフォンやタブレットなどのモバイルデバイスの利用者が爆発的に増えたことで、モバイルデバイスでのWebデザインにも対応できるさまざまなCSSフレームワークが登場してきています。

    「Twitter Bootstrap」→「Bootstrap」

    Bootstrapは、Twitter社内で開発されたもので、「Twitter Bootstrap」と呼ばれていました。

    その後、「Bootstrap」と呼ばれるようになっています。

    ■オフィシャルサイト情報

    オフィシャルサイト

    →Bootstrap(The most popular HTML, CSS, and JS library in the world.)

    ライセンス情報

    Bootstrapのライセンスは「MIT license」です。

    詳細について、こちらを参照ください。
    →Bootstrap →Documentation →License FAQs

    ダウンロード

    →Bootstrap →Download

    ■同様製品

    同様な機能を提供する製品として、次のようなものがあります。

    オープンソース製品:「Primer」など。


    「Pure」基本情報

    ■概要

    Pure(ピュア)とは、超軽量CSSフレームワークです。さまざまなWebプロジェクトで使用できる一連のCSSモジュールを提供します。

    ■基本説明

    Pureは、Yahoo!が開発した軽量級CSSフレームワークで、汎用的に使用できるCSS設定をまとめてあるWeb開発用モジュール群です。

    「軽量」「高速」「JavaScript不使用」「少ないCSS記述量」「既存サイトへ適用性が高い」などの特徴があります。

    ■ユースケース

    Pureは、次のようなサイトに向いています。
    ・アクセスが激しい大規模サイト
    ・販促用サテライトサイト
    ・初動のレンダリング速度を重視したいサイト など

    主な特徴

    ■簡単インストール

    Pure.cssは簡単に導入できます。

    同様のCSSフレームワーク「Bootstrap」などでは、「ファイル一式ダウンロード」→「index.html作成」→「CSSへのリンク行を記述」などの作業が必要です。

    Pureの場合、作成しているHTMLファイルのヘッダエリアにlink属性として1行記述するだけで利用できます。

    ■UIコンポーネントスタイル

    Pureでは、ネイティブHTML要素に加えて、一般的なUIコンポーネントのレイアウトとスタイルを利用できます。

    デザイン上の細かい設定は各Webサイト開発者が行う前提となっており、最低限の設定のみ提供されています。

    Pure由来のクラスは明確に区別されているため、他ツールや独自設定との組み合わせの管理を行いやすいメリットがあります。

    ■レスポンシブレイアウト

    Pureは、Bootstrapと同様なレスポンシブレイアウト機能を提供します。

    「グリッド」「メニュー」などを使用することで、すべての画面サイズに対して美しいレスポンスレイアウトを作成できます。

    ■スタイルオーバーライド

    Pureは最小のスタイルのみを提供するため、簡単にオーバーライドして利用できます。

    ■スモールフットプリント

    Pureの最小限フットプリントサイズは「4KB程度」しかありません。

    モバイルデバイスでも軽快に動作できます。

    ■対応ブラウザ

    Pureがサポートするブラウザは以下の通りです。
    ・IE 8+
    ・Firefox
    ・Chrome
    ・Safari
    ・iOS
    ・Android

    外部連携

    ■Bootstrap連携

    Pureは、「Bootstrap」や「jQuery」を含む他のライブラリと連携できる設計になっています。

    開発者は、CSSフレームワークとしてPureを使用して、アプリケーションに必要な特定の「Bootstrap」や「jQueryモジュール」を組み込むことができます。

    ■「Google AMP」対応

    Pureは、Googleの「AMP(Accelerated Mobile Pages)」に対応しています。

    →Accelerated Mobile Pages Project – AMP

    補足情報

    ■同様製品

    同様な機能を提供する製品として、次のようなものがあります。

    オープンソース製品:「Bootstrap」など。

    ■オフィシャルサイト

    オフィシャルサイト

    →Pure

    ライセンス情報

    Pureのライセンスは「Yahoo! Inc. BSDライセンス」です。

    詳細について、こちらを参照ください。
    →GitHub →pure/LICENSE.md

    ダウンロード

    →Pure →Get Started

     

    参考元サイト

    ※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。