フロントエンド開発プログラマーとして、優れた 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 開発ツールもサポートしています。
PetalLESS をベースにした最新の CSS 関連 Web 開発フレームワーク。
このクラス ライブラリは非常にシンプルで、現在のバージョンは 0.6 です。しかし、実際の開発にも応用できるフレームワークです。グリッド、フォント、ボタン、入力など、非常に明確なドキュメントが含まれています。
Petal の開発チームはそれほど大規模ではありませんが、非常に高い成果を上げています。 2017 年半ばには有名なフレームワークになると思います
Pure CSSPure 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 CSSSASS をサポートし、学習が非常に簡単なもう 1 つのミニマリスト UI フレームワークです
コンポーネント ページでは、必要なものが紹介されています。それについてすべて。新しいプロジェクトを開発するために非常にシンプルな CSS フレームワークが必要な場合は、必ずニーズを満たすことができます。さらに詳しく知りたい場合は、Vital CSS 開発チームのこのブログを参照してください
スケルトンレスポンス スタイル、ウルトラ。 -軽量で超シンプルなフレームワーク。新しい Web サイトの開発に必要なインフラストラクチャを提供します
基本的なスタイルがいくつか含まれていますが、派手すぎるものはありません。実際、自分のニーズに合わせてフレームワークをすばやく簡単に変更できます
Skeleton は最も安定した小さなフレームワークです。ここにデモページがあります。
UIキット機能豊富なフロントエンドクラスライブラリ。 オプションのファイルやフォルダーが多数あり、CSS はスタイル、画像はアイコン、js は javascript
ページに挿入した後、各 js を DOM 要素やコンポーネントに関連付けることができるため、他のクラス ライブラリと簡単に統合できます。たとえば、vue や React
もこのクラス ライブラリを使用して UI コンポーネントをセットアップおよび作成できます。ドキュメント ページには、Web サイトの作成に役立つ多くの例が含まれています
Materialize
Google のマテリアル デザインは、同社の製品の標準となっています。 Web デザインの世界にゆっくりと影響を与えている、例えば、Materialize
この無料のオープンソース フレームワークは、マテリアル デザインを自分でコーディングすることなく、純粋なマテリアル スタイルのページを作成する最も簡単な方法です
純粋な CSS クラス定義、JavaScript クラス ライブラリおよびコンポーネントを提供します。 。ここでいくつかの実践的な例を確認できます。
これらの Web フロントエンド フレームワークにはそれぞれ独自の利点があり、誰にとっても適したフレームワークが常にあります。この記事があなたの仕事の効率化に役立つことを願っています。
関連する推奨事項:
素晴らしいフロントエンドフレームワークvue.jsに初めて触れました
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
