推奨されます, 2021

エディターズチョイス

ブートストラップ代替のための20のベストフロントエンドフレームワーク

フレームワークはより速くより良い開発のための有用なフロントエンド開発者ツールの1つです。 フレームワークを使用すると、 よく構造化された、保守可能で段階的なWebサイトを構築できます。 あなたが使うことができるたくさんのすぐに利用可能な要素があるのでそれはまたあなたがあなたの時間を大いに節約するのを助けます。

今日では、フレームワークの数が大幅に増えています。ご存知のように、TwitterのBootstrapが最も優れています。 あなたが最も適切なフレームワークを選ぶのを助けるために、我々はBootstrap代替のために今日利用可能な21+最高のフレームワークをリストしました。 彼らはお互いに異なるユニークでからかいの機能を提供します。 チェックアウト!

1.ピュア

デスクトップとモバイルの両方で動作するWebアプリケーションを構築する予定の場合は、YahooのPureを使用することを検討する必要があります。 Pureは、モバイル機器に関してはBootstrapよりもはるかに優れたパフォーマンスを発揮します。 その名前が示すように、Pureは純粋なCSSフレームワークとしてのみ来ます。 Normalize.cssをベースにして構築されたPureは、わずか4.5KBの極めて小さいファイルサイズです(縮小およびgzip)

2. UIキット

UIkitは、無料で軽量かつモジュール式のフロントエンドフレームワークです。 LESSで開発されたUIkitは、よく構造化された、拡張可能で保守可能なコードを持っています。 それはまた敏感で、流動的でそして不安定である格子システムを提供する。 UIkitを使用すると、ナビゲーション、ボタン、モーダル、ドロップダウンなどをよりレスポンシブに構築できます。 その包括的なドキュメントは、あなたがUIkitを使い始めるのをより簡単にするでしょう。

3. MontageJS

MontageJSは、 現代のシングルページアプリケーション(SPA)の作成に特化した無料のオープンソースフロントエンドフレームワークです。 実績のある多くのフレームワークアプリケーションの基盤を利用することで、表現力豊かなHTMLコードを維持しながら開発プロセスを簡素化できます。 MontageJSを使用すると、DOMの更新を同期させて、よりスムーズなユーザーエクスペリエンス、再利用可能なUIコンポーネントの構築と拡張などを行うことができます。

4.下地

Groundworkは、 Gary Heptingによって作成および管理されている、軽量で柔軟性のある応答性の高いフロントエンドフレームワークです。 SassとCompassの上に構築されたGroundworkは、 柔軟で流動的で安定した素晴らしいグリッドシステムを提供します。 そのグリッドシステムを使用すると、任意の画面サイズに合うレイアウトのレイアウトタイプを構築できます。

5.ガンビー

Gumbyは柔軟なレスポンシブフレームワークで、迅速なWeb開発のためにSassの力を使って構築されています。 そのカスタマイザはあなたがあなたの最高の好みに合うようにあなたが全体のUIキットデザインを簡単に微調整してカスタマイズすることを可能にします。 Gumbyには列のバリエーションが異なる複数の種類のグリッドがありますが、デフォルトでは、960グリッドシステムが標準装備されています。

6. HTML5の定型文

その名前のように、HTML5 BoilerplateはあなたにHTMLの新機能の最も標準を満たすために最適化されたHTML5対応テンプレートを提供します。 このテンプレートを使用することで、Internet Explorerのような古いものであっても、あらゆる種類のブラウザに対応できる高速で堅牢でレスポンシブなサイトを作成できます。

スケルトン

スケルトンは、12列のグリッドシステムを使用する軽量のCSSフレームワークです。 BootstrapやFoundationとは異なり、Skeletonはボタン、リスト、テーブル、開発プロセスのキックスタートを目的としたフォームなどの基本的なコンポーネントのみを提供します。

8.ブートフラット

Bootflatは、強力なBootstrap 3で構築されたオープンソースのCSSフレームワークです。Bootflatは、 すばやく簡単に繰り返しの少ない方法で見事なフラットWebデザインを作成するように設計されています。 したがって、そのUIキットはあなたがあなたのウェブサイト、iOSまたはAndroidのプロジェクトで使用できる美しいPSDユーザーインターフェースパックが付属しています。

イヌイット

Inuit.cssは、モバイルファーストのアプローチに焦点を当て、すべてのデザインをあなたに任せるもう一つの素晴らしいCSSの名声です。 他の多くのフレームワークが独自に設計されたデザインCSSを使ってきていますが、Inuit.cssはそうではありません。 Inuit.cssはOOCSS(Object Oriented CSS)方式で動作します。これは、再利用可能なCSSを記述するための高速でスケーラブルで保守可能な方法です。

10. 960グリッドシステム

960グリッドシステムは、960ピクセル幅のコンテナに基づいてWeb開発ワークフローを合理化できるフロントエンドフレームワークです。 コンテナーは、内容を簡単にレイアウトするために12、16、さらには24列にスライスすることができます。

11.実現する

Googleのマテリアルデザインの原則に基づいて構築された、マテリアライズはモダンなレスポンシブフロントエンドフレームワークとして登場しました。 このフレームワークは、マテリアルデザインのルックアンドフィールを複雑にすることなく自分のWebサイトに実装する場合に非常に適しています。 カードデザイン、リップル効果アニメーション、Sass mixin、モバイルメニューのドラッグアウトなどを備えています。

12.ジート

Jeetは、今日利用可能な高速で柔軟性のある最先端のグリッドシステムです。 Jeetは、直感的でクリーンな方法でグリッドをその場で構築するのに役立ちます。 それはほとんどすべての現代および古いブラウザをサポートします。

スージー

Susyは自動グリッドシステムで、あなたが望むどんな種類のコラムでもWebレイアウトを構築するのを助けることができます。 それはあなたの選択のデザインを構築するためにあなたに自由と柔軟性を与えます。 あなたのデザインが5、12、24、48または異なる列を持っているかどうかを処理することができます。

14.メトロUI

Metro UIは、Windows 8 Metroスタイルのインターフェイスに触発された12グリッドベースのフレームワークです。 使い方は非常に簡単で、ボタン、タイル、メニュー、日付選択などの一般的なコンポーネントがたくさんあります。 あなたが簡単に始めるためにニュースポータルテンプレートもあります。

15. HTML KickStart

HTML KickStartは、非常に高速なWeb開発のための超スリムなHTML、CSS、およびJavascriptの定型句です。 HTML KickStartは、Font Awesomeのアイコンサポートを使用してTwitter Bootstrapに基づいて開発されました。 用意されたメニュー、リスト、表、ボタン、グリッドシステム、そして多くの素晴らしい要素を使って、あなたはあなたのWebプロジェクト作成のプロセスを最大10時間あるいはそれ以上まで節約するでしょう。

16.シンプルグリッド

シンプルグリッドは非常に軽量でレスポンシブなグリッドシステムです。 それはその派手なボタン、メニュー、テーブルなどを持っている他のフレームワークのようではありません、Simple Gridは純粋なグリッドだけを提供します。 グリッド機能は1140 pxの画面サイズに基づいており、12桁のカラムをカスタマイズして最適なレイアウトにすることができます。

17.財団

Foundationは、おそらくTwitter Bootstrapにとって最も過酷なライバルです。 それは非常によく文書化された、安定した、柔軟なそしてオープンソースのフロントエンドフレームワークです。 レスポンシブでモバイル向けのWebプロジェクトを迅速に作成するための便利なツールが多数あります。 それはIE7を除いて、今日利用可能なほとんどすべてのブラウザをサポートします。 多くの開発者がHTMLとCSSのみにFoundationを使っていますが、 SassRailsで移植することもできます。

18.マテリアルUI

Material UIは、 Material Design仕様を実装するもう1つのフレームワークです。 マテリアライズとの違いは、FacebookのReact Javascriptライブラリの愛によって構築されたことだけです。 それはあなたがあなたのWebページで自由に使うことができるたくさんの美しいUIコンポーネントを持っています。

トップコート

TopCoatは、スピードを念頭に置いて設計されたWebアプリケーションを開発するためにAdobeチームによって開発された堅牢なフロントエンドフレームワークです。 TopCoatの細部はすべて、パフォーマンスの優先順位に合わせて最適化されています。 それはまたあなたのプロジェクトで使用するためのカスタマイズ可能なテーマ、オープンソースフォントそしてPSD UI Kitも提供します。

20.インク

Inkは、Bootstrapが行うのと同じように、HTML、CSS、およびJavascriptを使用してより迅速なUI開発のために開発されたフロントエンドフレームワークです。 テーブル、タブ、データピッカー、モーダル、ソート可能リスト、ツリービュー、ギャラリー、フォームバリデーターなどの再利用可能なインターフェイス要素を使用して、モダンなレイアウトを簡単に作成できます。 また、JS Coreエンジンを使用して、DOM操作、通信機能、おしゃれなページ効果を得ることもできます。

21.温泉UI

温泉UIはPhoneGapとCordovaでうまく機能するハイブリッドフレームワークです。 AngularJS、jQuery、Font Awesome、およびTopCoatを基盤とするOnsen UIは、すばらしいモバイルアプリケーションを開発するための有望なツールになります。 Onsen UIは、Webコンポーネントの概念を使用してモバイルアプリを簡単に構築するのに役立ちます。

どちらがあなたの好きなブートストラップの選択肢ですか? 下記のコメントでお知らせください。

Top