上位 10 の HTML 5 フロントエンド フレームワーク_html/css_WEB-ITnose

6 年間フロントエンドを追い続けており、極度の怠け者である私は、ここ数年で有名なものから非常に有名なものまで、多くのフロントエンド フレームワークを読んできました。当初は15〜20個取りたかったのですが、いくつかのフレームワークを共有したいと思いますが、記事作成スキルについて先輩数人にアドバイスを求めたところ、容赦なく叩きのめされたため、ここでは目立たずに10個だけ取り出します。十分な言葉を得るために、それらを大きな鍋で煮込みます。以下のフレームワークは順不同です。思いついたことを書きます（フロントエンドなので、いつも気ままです^_^）。

Bootstrap

まず、これが最初に言及されるか、これがあると予想したかもしれません (笑)。フレームワークの世界全体。私が初めて道教に入ったとき、コード内のどんな文字でも自分で入力して自分を成長させよう、そうしないと負ける、と決意していました。その結果、私は周りのさまざまなゲイの友人に惹かれ、ブートストラップの旅を始めました。私はデザインとフロントエンドの才能に恵まれていますが、神は私に PS とさまざまなデザインツールを使用することを許可しただけで、デザインガールと同じ美学を与えてくれませんでした。これが私が最初に Bootstrap を選んだ理由の 1 つです。私が作ったものは、女の子の前ではカッコよく見えるかもしれませんが、長い時間が経つと、Bootstrap は人々をイライラさせるほど美しいと必然的に感じます。人々は私が作ったと感じます。この Web サイトは多くの Web サイトと衝突します。 Bootstrap の使用法は非常に簡単なので (これは Bootstrap の作者が無数の包囲戦を読み、その苦痛を理解した結果かもしれません)、小規模なフロントエンドであっても学習コストをほとんどかけずにすぐに使い始めることができます。

要約: Bootstrap の最大の利点は、人気があるということは、問題が発生した場合に解決を支援してくれる人がたくさんいるということです。は強力なツールであり、比較的調和のとれた使いやすいインターフェイスを備えています。これに注意を払うと、最新の V4 バージョンでは FlexBox レイアウトもサポートされるようになり、非常に優れたアップグレード エクスペリエンスが得られることがわかります。欠点は、クラスの名前付けが十分にセマンティックではなく、さまざまな略語があることです。そのため、私は最近ハイブリッド APP を構築し始めましたが、フレームワークを選択するときはそれが最初の選択肢です。 PC で作業していたときに、ハイブリッドの右クリック属性に取り組み始めたとき、Bootstrap はすぐに涼しい風に襲われ、別のフレームワークを選択する必要がありました。

AUI

2 つ目は最近登場した AUI ですが、著者は APICloud 開発者向けに特別に設計された UI フレームワークであると主張していますが、実際にはモバイル フロントエンド開発の多くの問題を解決します。よくある問題は、CSS フレームワークが主にハイブリッド開発を指向していることです。作者はかなり積極的で、さまざまな高度な CSS3 を随所で使用しているようで、これらの CSS3 の互換性を確認する必要があります。期待に応え、互換性の高い物件を選択しました。このフレームワークには、チャット インターフェイスやカウント リストなどのコンポーネントも用意されており、頭を悩ませていた多くの複雑な問題が解決されました。レイアウトを取得して直接使用できるようになりました。

要約: 私にとってこのフレームワークの利点の 1 つは、これが純粋な CSS フレームワークであることです。これは、複雑なエフェクトではない場合、いくつかの JS 機能を備えていることです。 , 純粋な CSS フレームワークを見つけることができます。CSS フレームワークを自分で変更することもでき、効率、品質、効率を考慮して CSS3 でアニメーションも実現できるようになったので、やはりこの CSS フレームワークを選択しました。私が不満に思うのは、このフレームワークのドキュメントが非常に優れており、優れていると言われていることです。

Amaze UI

3つ目の紹介は「Goose Girl UI」 細部にこだわるのが大好きなデザイナーに出会ったことがきっかけで使いました。あるとき、彼女が私のフォントを改善しようとしていたとき、彼女は大ブーイングで彼女を褒めてくれました。私は彼女のアイデアに基づいて問題を解決しなければならず、最終的に Amaze UI フレームワークを見つけました (怠け者だと言われても構いません)。公式の言葉によると、「コミュニティのオープンソース プロジェクトに基づいて構築されたクロススクリーン フロントエンド フレームワークであり、モバイルファーストで、小さなスクリーンから大きなスクリーンまで、最終的にはすべてのスクリーンへの適応を実現し、トレンドに適応します。」モバイルインターネット。」しかし実際には、私はこれが国内ブラウザのクロススクリーン適応と互換性の問題を解決するために気に入っているだけです。

概要: Amaze UI は一般に、中国市場の特性に合わせてより多くの要素を追加しており、フレームワークはクロススクリーンと適応をより適切に実行し、シリーズを準備しています。一般的に使用される Web ページ コンポーネントの多くは、互換性やさまざまなキーボードへの適応に取り組む時間外労働者の労働時間の削減に大きく貢献しています。このフレームワークは中国語植字にも最適化されており、中国の主流ブラウザと互換性があり、軽量で、デスクトップだけでなくモバイルデバイスにも適しています。

Frozen UI

少し前、QQ が瞬時に高くなっているのを見たことがあります。後で聞いてみると、QQ カスタマー サービスでもハイブリッド開発が使用されており、その中には QQ メンバーのフロントエンドが使用されていることがわかりました。 Frozen UI、そしてこのフレームワークはオープンソースです。私は初めてそれを試してみましたが、基本的なスタイルの効果はシンプルで、色も新鮮でした。比較的活発なコミュニティがあるため、コンポーネントは比較的豊富です。

概要: APICloud などで Frozen UI を使用してハイブリッド APP を作成したり、ネイティブ turkey を使用してフロントエンド開発用のアプリケーションにネストすると、非常に素晴らしいでしょう。このフレームワークは完璧です。 Android 2.3 以降と iOS 4.0 以降と互換性があり、Web アプリとして使用するのに最適です。欠点は、QQ メンバーのフロントエンドで誰が作成したのかがわかります。

WeUI

WeUI と FrozenUI はどちらも比較的特殊なフレームワークであり、公式 Web サイトさえありません。フレームワーク 言うまでもなく、サイズは 7 つほどしかありませんが、レビューの評価としては十分です。フレームワークが 16/1/23 にリリースされて以来、Star は 7K を超えましたが、それでもユーザーには吐き出す場所がないという可能性は否定できません。そのため、ユーザーはすべて git に行きます (笑)。

概要: WeChat デザイン チームによって設計されたこのデモを読んだ後、WeChat のパブリックになりたい場合は、これが最初の選択肢となるはずです。このフレームワークの欠点は、フレームワーク自体がおそらくユーザーが WeChat 以外のシナリオで使用できるようにすることを考慮していないことです。

SUI

「SUI は、ブートストラップに基づいて開発されたフロントエンド コンポーネント ライブラリです。また、一連のデザイン仕様書でもあります。SUI を通じて、美しいページを簡単にデザインして実装できます。」確かに、自分の脳細胞を節約するには、退屈な公式広告を直接引用する方が良いでしょう (囧...) もちろん、広告にあるように、以前に Bootstrap を使用したことがある場合は、簡単に SUI に切り替えることができます。タオバオがフロントエンドの敗者に与えるものです。

Semantic UI

私がこのフレームワークに出会ったのは、Bootstrap がきっかけでした。Semantic UI は github で公開されるやいなや、大きな注目を集めました。開発者からは、この 2 つを比較する人がたくさんいました。他の人の 3 つや 4 つの文だけで手放しで賞賛することはできません。実際に使ってみると、この UI は違うと感じます。 Bootstrap とは大きく異なりますが、コードの命名基準は大きく異なります。Semantic UI は、その命名がすべて複合的な方法で行われており、使用する場合はクラス名を非常に個別にする必要があります。拡張または追加するクラス名がそのクラス名と競合しないように注意してください。

Foundation

Foundation はフレームワーク業界のベテランとみなされており、フレームワークは現在でも非常に人気があると言われています。ブートストラップ開発の場合は、Foundation の使用を検討してください。事前に定義された UI 要素を使用する場合でも、公式が開発者により柔軟なフレームワーク エクスペリエンスを提供すると述べているように、他の Web サイトとあまり類似することはありません。

UiKit

UIkit は YOOtheme チームによって開発され、多くの WordPress テーマで使用されています (つまり、WordPress 愛好家であれば、このフレームワークはさらなる研究に適しているはずです)。また、フレームワークは GUI エディターおよび手動で編集できるため、柔軟で強力なカスタマイズ メカニズムが提供されます。このフレームワークは、LESS、jQuery、normalize.css、FontAwesome オープン ソース プロジェクトの独自の機能を、軽量でモジュール式のフロントエンド フレームワークに統合します。

純粋

最後に、私もあなたと同じくらい幸せです(~￣▽￣)~), 私は管理システムに取り組んでいたときにこのフレームワークに出会いました、このフレームワークは小さく、あまり関与することなく純粋な CSS で作られているため、他のフレームワークと簡単に組み合わせてすぐに使用できるため、これを使用することにしました。

ここまでで紹介が完了しましたが、フレームワークを使用するときは、必要に応じてフレームワークを選択するだけであるため、良いものと特別に優れたものの区別はないことがおわかりいただけると思います。あなたのニーズは何ですか、そしてこのフレームワークがあなたに適しているかどうかを教えてください。他のフレームワークを使用することができれば、それは簡単で使い始めることができると思います。フレームワークを書くことができる人は、この世界の達人です。