ブートストラップvsファンデーションvsブルマvsセマンティックvs UIkit

ブートストラップvsファンデーションvsブルマvsセマンティックvs UIkit

ブートストラップvsファンデーションvsブルマvsセマンティックvs UIkit
СОДЕРЖАНИЕ
02 июня 2020

過去数年にわたって、エンドユーザーの閲覧習慣はさまざまなデバイスを含むように進化してきました。その結果、レスポンシブWebデザインは、今日開発されているすべてのWebサイトにとって必要不可欠です。ただし、プロジェクトごとにレスポンシブデザインを最初から作成すると、時間がかかる場合があります。生活を楽にする優れたソリューションの1つは、CSSフレームワークを使用することです。このようなフレームワークは、基本的なレスポンシブデザインの原則を処理します。この比較では、世の中で最も優れたCSSフレームワークのいくつかを見て、どれが最適かを確認します. ブートストラップvsファンデーションvsブルマvsセマンティックvs UIkit.


この投稿は、次のプロジェクトに適切なCSSフレームワークを選択するためのガイドです。私は、あなたがフロントエンド技術とレスポンシブWebデザインの原則の基本的な知識を持っていることを前提としています。各CSSフレームワークは、Bootstrap vs Foundation vs Bulma vs Semantic vs UIkitのさまざまな側面をカバーするようにテストされています。各フレームワークの起源と、その主な機能について説明します。各フレームワークのクイックスタートガイドも提供します.

ブートストラップvsファンデーションvsブルマvsセマンティックvs UIkit

この投稿の最後では、各フレームワークの主な機能と制限を理解し、ニーズに最も適したものを特定するためのより良い立場になります。始めましょう:

  • ブートストラップ#
  • 財団#
  • ブルマ#
  • セマンティック#
  • UIkit#

ブートストラップ (getbootstrap.com)

ブートストラップ対

Bootstrapは、Webサイトを迅速に開発するためのレスポンシブなモバイルファーストCSSフレームワークです。これはこのリストで最も人気のあるCSSフレームワークであり、GitHubには13万を超えるスターがいます。ブートストラップには、HTML、CSS、JavaScriptで開発されたすぐに使用できるコンポーネントが含まれています.

Bootstrapは2011年にTwitterで最初に開発されましたが、最終的には独立したプロジェクトに発展しました。現在の安定バージョンは4.3です。現在開発中のBootstrap 5は、jQueryの使用をバニラJSに置き換え、古いブラウザーのサポートを廃止し、現在のテストプラットフォームを変更します.

Bootstrapを使用するには、新しいWebページを構築するときに次のことを行う必要があります。

  • HTML5 Doctypeを使用する
  • ビューポートメタタグを作成する
  • ブートストラップCSSをヘッドタグにインポートする
  • jQuery、Popper.js、bootstrap.min.jsの順にスクリプトをインポートして、BootstrapのJavaScript機能を使用します

こちらがスターターテンプレートです.




このチュートリアルでは、これらのフレームワークにCDNでホストされるバージョンのリソース(CSSおよびJSファイル)を使用します。ここにクイックスタートがあります ガイド ブートストラップ上.

堅牢なモバイルファーストアプローチに加えて、フレームワークの成熟度を所有する重要なコミュニティサポートがあります。さらに、Bootstrapは、 承認されたフレームワークとキット サードパーティの開発者が選択できるように、Bootstrapのキットとパッケージも用意されており、プロジェクトと簡単に統合できます。 Bootstrap用の無料のUIキットを以下に示します。最初にモバイルになることに加えて、タッチスクリーンのいくつかのサポートがあります。 Bootstrapは成熟したプロジェクトであるため、多くのアクセシビリティ機能をサポートしています.

Bootstrapの最大の欠点は、ページの重みの増加です。数百キロバイトは、平均ページサイズが約2MBである世界では重要ではないかもしれませんが、最高の効率を目指す開発者に関係する場合があります。 jQueryへの依存は懸念事項ですが、jQueryの削除がBootstrap 5のロードマップの一部であることを知っておくことは励みになります.

��長所:

  • モバイルファースト、レスポンシブWebデザインフレームワーク
  • 良いコミュニティサポートとドキュメント

��短所:

  • 大きな依存サイズ(〜300KB)
  • 一部のコンポーネントが機能するためのjQueryへの依存

優れたサポートベースを備えた安定したプラットフォームを探している場合は、ブートストラップが最適です。デフォルトのコンポーネントをいじくりまわしたくない場合は、これが正しい選択です。ブートストラップは、アジャイル環境でソリューションをすばやく反復処理したい人に最適です.

財団 (foundation.zurb.com)

財団対

2011年にBootstrapの1か月以内に最初にリリースされたFoundationは、Webサイトだけでなく、アプリケーションや電子メール用のフロントエンドフレームワークのクラスです。 BootstrapとFoundationの比較を見てみましょう!

TwitterのBootstrapと同様に、FoundationはZurb財団の内部ツールとして始まり、その後、最終的にフレームワークとしてリリースされました。 Foundationのソースコードはオープンソースであり、モバイルファーストのレスポンシブデザインに重点が置かれています。 Foundationには、Bootstrapと同様のグリッドシステムがあり、12列から選択できます。さらに、JavaScriptもオプションです!

WebサイトでFoundationを使用するための大まかな手順は次のとおりです。

  • ダウンロード 財団のリソース
  • HTML5 Doctypeを使用する
  • ヘッドタグにFoundation CSSファイルを追加する
  • jQuery、what-input.js、Foundationのスクリプトを含める
  • bodyタグを終了する直前に、foundation()関数を呼び出してFoundationプロパティをさまざまなDOM要素にアタッチします。

クイックスタートテンプレートは次のとおりです。

$(document).foundation();

ダウンロードできます カスタムビルド 必要に応じてFoundationフレームワークの.

BootstrapとFoundationを比較しようとすると、いくつかのことが起こります。 Bootstrapはコミュニティからのより多くのサポートを提供し、操作が少し簡単で、見つめられたときに選択できる幅広いテーマを提供します。一方、Foundationでは、プロパティがコンポーネントに関連付けられているため、DOM要素にクラスを追加する必要なしに、コンポーネントをより柔軟に制御および自由に利用できます。また、財団は数年前から開発を行っているため、 多くのアクセシビリティ機能を提供します.

��長所:

  • モバイルファースト、レスポンシブWebデザインフレームワーク
  • アプリケーションとメールのサポートを提供します

��短所:

  • ブートストラップのような大きな依存サイズ
  • 初心者を圧倒する可能性のある膨大な数の機能

BootstrapとFoundationの間の機能に大きな変化はなく、どちらのプラットフォームを選択してもそれほど多くの損失はありません。そうは言っても、プロジェクトをより詳細に制御したい場合は、おそらくFoundationを使用する必要があります。.

これらの記事にも興味があるかもしれません:

  • 最高のAngular管理ダッシュボードテンプレート

ブルマ (bulma.io)

ブルマvs

Bulmaは、Flexboxに基づくオープンソースの軽量CSSフレームワークです。.

ブートストラップのレベルではありませんが、BulmaはGitHubでかなり人気のあるプロジェクトで、35,000を超えるスターがいます.

Bulmaは、モバイル性を重視したレスポンシブなフレームワークに合わせて設計されており、モジュール性を重視しています.

プロジェクトでブルマを使用するには、次の手順に従う必要があります。

  • HTML5 Doctypeを追加する
  • レスポンシブビューポートのメタタグを追加する
  • Bulma CSSファイルをヘッドタグに含めます
  • [オプション]アイコンを使用するfontawesomeスクリプトを追加する

テンプレートは次のとおりです。

Bootstrap vs Foundation vs Bulmaの議論に戻ると、Bulmaの学習曲線は穏やかになります。 BootstrapとFoundationに関するBulmaの大きな違いは、フレームワークにJavaScript要素がなく、CSSにのみ焦点が当てられていることです。 JavaScriptを除外すると、フレームワークも軽量になります。コミュニティは定期的にサポートを追加していますが、アクセシビリティに関しては、ブルマは部分的にしかアクセスできません。.

��長所:

  • 軽量のフレックスボックスベースのフレームワーク
  • モジュラー要素により柔軟性を実現

��短所:

  • JavaScript要素なし
  • アクセシビリティの制限付きサポート

開発者として、Webのレスポンシブ要素の作成に役立つ軽量フレームワークを使用したい場合は、Bulmaを選択する必要があります。プロセスに行き詰まった場合に役立つフレームワークのサポートがかなりあります.

セマンティック (semantic-ui.com)

セマンティックvs

セマンティックは、直感的なユーザーインターフェイスを作成することを目的としたCSSフレームワークです。.

このフレームワークでは、わかりやすいクラス名を使用して、学習プロセスを容易にします。セマンティックのクラスは、論理的な概念をクラス名にリンクするために英語に触発されています.

プロジェクトでセマンティックコンポーネントを使用するには、次の手順を完了する必要があります。

  • HTML5 Doctypeを含める
  • セマンティックCSSファイルを読み込む
  • JavaScript要素を呼び出す前にjQueryを含める
  • セマンティックのスクリプトを含める

テンプレートは次のとおりです。

SemanticとBootstrap vs Foundationなどを比較すると、直感的な命名規則にも関わらず、Semanticは学習する複雑さが不足していることがわかります。ドキュメントは広範囲にわたっていますが、慣れるまでに少し時間がかかります。 AngularやReactなどのJavaScriptフレームワークとの統合は優れているため、これらのフレームワークを使用するアプリケーションでの使用に最適です。.

��長所:

  • 直感的なクラス名
  • JavaScriptフレームワークとの統合

��短所:

  • 大規模プロジェクトのニーズを満たせない可能性がある
  • コミュニティからの限定的なサポート

セマンティックは比較的習得しやすいフレームワークであり、JavaScriptフレームワークもサポートしています。要件にJavaScriptの使用が含まれる場合は、次のプロジェクトでのこのフレームワークの使用を必ず検討してください。.

UIkit (getuikit.com)

uikit vs

UIkitは、Webインターフェースを作成するためのモジュール性を非常に重視した、モダンで軽量なフレームワークです。.

これは比較的新しいオープンソースのフレームワークで、GitHubには約15,000個のスターがあります。 UIkitは、BrowserStackへの自動継続デプロイメントにより、レスポンシブデザインの作成を支援します.

プロジェクトでUIkitコンポーネントを使用するには、次の手順を完了する必要があります。

  • HTML5 Doctypeを含める
  • UIkit CSSファイルを読み込む
  • 機能とアイコン用のUIkitのスクリプトを含める

テンプレートは次のとおりです。

UIkitをBootstrap vs Foundation vs Bulmaと比較すると、UIkitには多数の機能があります。 JavaScript要素があるにもかかわらず、UIkitはjQueryに依存しないため、エンドユーザーのペイロードが小さくなります。アジャイル開発環境でWebアプリケーションのバージョンを迅速に反復するという点で、これらのフレームワークは完全に首位に立っています。.

��長所:

  • モジュール化に重点を置き、簡単に操作できるようにする
  • 要素はカスタマイズ可能で、柔軟性につながります

��短所:

  • 限られたドキュメントとコミュニティサポート

UIkitは構造と機能の制御に関して多くの自由を与えてくれますが、かなり新しいもので、フレームワークの問題に直面した場合、オンラインでのサポートが制限されます。したがって、フロントエンドのプログラミングスキルが十分に進んでいる場合にのみ、このフレームワークをプロジェクトで検討してください。.

ブートストラップvsファンデーションvsブルマvsセマンティックvs UIkit:最終的な考え

上位のCSSフレームワークのこの比較で話したことを要約すると、

  • 多くのサポートがある手間のかからないソリューションが必要な場合は、ブートストラップを使用してください
  • コンポーネントの自由度を高めるには、Foundationを試してください
  • プロジェクトに軽量な追加を確実にするには、BulmaまたはUIkitを試してください
  • Webアプリケーションが重いJavaScriptフレームワークを使用している場合は、セマンティックを選択する必要があります

2020年にはどのCSSフレームワークを使用しますか?下のコメントでお知らせください!

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Karol Kによるレイアウト、プレゼンテーション、編集.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector