最も人気のある Web フロントエンド フレームワーク

フロントエンド開発プログラマーとして、優れた Web フロントエンド フレームワークの使用方法を学ぶことは非常に重要であり、優れた Web フロントエンド フレームワークは作業効率を大幅に向上させ、開発をより効率的にします。この記事では、2017 年に最も注目すべきフロントエンド開発フレームワークを紹介します。各フレームワークには、グリッド レイアウト、ボタン、フォーム、その他のページ要素の作成に役立つ独自のスタイルがあります。皆さんのお役に立てれば幸いです。

Bootstrap

ほぼすべての開発者は、Twitter の開発フレームワークであるブートストラップを知っています。 これはおそらく最も古いフロントエンド UI フレームワークの 1 つで、最初のバージョンは 2011 年にリリースされました。 これには、UI および JS コンポーネントのカスタマイズに役立ち、さまざまなナビゲーション、進行状況、ボタン、ブレッドクラム ナビゲーションなどを便利に開発できる、SASS クラス ライブラリの完全なセットが含まれています。

最新バージョンの Bootstrap 4 は、現在開発中です。すぐに解放されます。 bootstrap3 の場合、これは大きな変更となります。

Foundation6

Foundation クラス ライブラリは数年前から存在しており、最近大きなバージョン アップデートがあり、クラス ライブラリは Web サイト開発クラス ライブラリと電子メール開発クラス ライブラリの 2 つの主要なクラス ライブラリに分割されます

。あらゆるレイアウト タイプを開発し、応答性の高いメニュー、入力ボックス、タブなど、さまざまなページの関連コンポーネントを完全に制御するために使用できる最小限の UI フレームワークが提供されます。 UIコンポーネント。 また、Grunt/Gulp、npm、SASS/compass などの主流の Web 開発ツールもサポートしています。

Petal

LESS をベースにした最新の CSS 関連 Web 開発フレームワーク。

このクラス ライブラリは非常にシンプルで、現在のバージョンは 0.6 です。しかし、実際の開発にも応用できるフレームワークです。グリッド、フォント、ボタン、入力など、非常に明確なドキュメントが含まれています。

Petal の開発チームはそれほど大規模ではありませんが、非常に高い成果を上げています。 2017 年半ばには有名なフレームワークになると思います

Pure CSS

Pure CSS はモジュール設計です。 フォーム、グリッド、チャート、ナビゲーション ボタンなど、さまざまなコンポーネント用の小さなクラス ライブラリが多数あります。

使用するクラス ライブラリの数を自由に選択できます。 基本クラス ライブラリは、Normalize およびその他の単純なリセット CSS を使用して、統一された UI インターフェイス効果を作成します。ただし、カスタム グリッドを追加して開発時間を節約することはできます

すべてのクラス ライブラリは、ツールを使用して統合および最小化できます。そして、チームは拡張クラスの作成に役立つ簡単なガイドを提供しています

私は個人的に、Pure は Bootstrap と同じくらい成功するフレームワークになるだろうと考えています。多くのブログではあまり言及されていませんが、間違いなく最高のフレームワークの 1 つに入るはずです

セマンティック UI

このフレームワークは現在バージョン 2.2 であり、グリッド、タイプ、色、入力などの多くの典型的な機能を備えています。

3000 種類以上のテーマをカスタマイズできます。また、Google、Amazon、Twitter、その他の Web サイトのスタイルをシミュレートするテーマも提供しており、簡単に複製して編集することもできます

既製のレイアウトから選択して、独自の開発テンプレートとして使用することもできます。 Semantic UI には多くのカスタム要素があり、これらのデザインは非常に異なっていることがわかります

Milligram

超小型のクラス ライブラリを探している場合、これは非常に良い選択です。圧縮後のサイズは 2kb です

非常にシンプルで美しいプロジェクトです。現在のバージョンは 1.3 で、安定しており、実際の開発の準備ができています。 npm、Yarn、Bowerなどを使用してインストールできますが、Normalizeが必要なので、このクラスライブラリを含める必要があります

CSS圧縮ツールを使用して、それをマージしてHTTPリクエストの数を節約できます

唯一あまりフレンドリーではないのはドキュメントです。もちろん、ドキュメントをうまく活用できれば、Milligram の使用は非常に簡単です

Vital CSS

SASS をサポートし、学習が非常に簡単なもう 1 つのミニマリスト UI フレームワークです

コンポーネント ページでは、必要なものが紹介されています。それについてすべて。新しいプロジェクトを開発するために非常にシンプルな CSS フレームワークが必要な場合は、必ずニーズを満たすことができます。さらに詳しく知りたい場合は、Vital CSS 開発チームのこのブログを参照してください

スケルトン

レスポンス スタイル、ウルトラ。 -軽量で超シンプルなフレームワーク。新しい Web サイトの開発に必要なインフラストラクチャを提供します

基本的なスタイルがいくつか含まれていますが、派手すぎるものはありません。実際、自分のニーズに合わせてフレームワークをすばやく簡単に変更できます

Skeleton は最も安定した小さなフレームワークです。ここにデモページがあります。

UIキット

機能豊富なフロントエンドクラスライブラリ。 オプションのファイルやフォルダーが多数あり、CSS はスタイル、画像はアイコン、js は javascript

ページに挿入した後、各 js を DOM 要素やコンポーネントに関連付けることができるため、他のクラス ライブラリと簡単に統合できます。たとえば、vue や React

もこのクラス ライブラリを使用して UI コンポーネントをセットアップおよび作成できます。ドキュメント ページには、Web サイトの作成に役立つ多くの例が含まれています

Materialize

Google のマテリアル デザインは、同社の製品の標準となっています。 Web デザインの世界にゆっくりと影響を与えている、例えば、Materialize

この無料のオープンソース フレームワークは、マテリアル デザインを自分でコーディングすることなく、純粋なマテリアル スタイルのページを作成する最も簡単な方法です

純粋な CSS クラス定義、JavaScript クラス ライブラリおよびコンポーネントを提供します。 。ここでいくつかの実践的な例を確認できます。

これらの Web フロントエンド フレームワークにはそれぞれ独自の利点があり、誰にとっても適したフレームワークが常にあります。この記事があなたの仕事の効率化に役立つことを願っています。

関連する推奨事項:

20の強力なPHPフレームワーク

グローバルPHP開発フレームワークランキングリスト

実践的なWebフロントエンドJSおよびUIフレームワークの紹介

PHPを開発するときに皆さんも使っていますよね

フロントエンドフレームワーク?

🎜🎜素晴らしいフロントエンドフレームワークvue.jsに初めて触れました🎜🎜