Clever Geek Handbook

ライブサンプルでのcssフレームワーク/ライブラリの比較。 パート1

例を使用したcssフレームワークの比較



プロローグ



この一連の記事では、TodoMVC for jsソリューションのように、実例に基づいてcssフレームワークを客観的に比較するつもりです。



入門記事では、フレームワークとライブラリ、およびそれらの違いについて学習します。 どのタイプに分類されるかを説明します。 分析のための既製のソリューションの計画リストを示します。





内容







はじめに



毎日、特にIT部門では、世界は多くのアイデアと技術で満たされています。 それの人々は急いで、あるイノベーションから別のイノベーションに移行し始め、それを他の目的に使用します。



既成のソリューションによる市場の過飽和とそれらに関する情報の不足により、選択は複雑になり、製品のパフォーマンスと品質にマイナスの影響が生じます。



mrの新しいバージョンを作成するとき。 Gefestでは 、CSSフレームワークに関する情報が不足していました。 最も完全で正確な比較を行うには、どのコンポーネントが存在するかだけでなく、内部からどのように配置されているかも調べる必要がありました。



おそらく、異なるコンポーネントとアーキテクチャのセットを持つ少なくとも30のcssフレームワークが既に存在することに気づいたでしょう。 このすべてを初めて、そして2番目から、3番目から、そして...



したがって、ToMVCのように、ライブサンプルを使用してcssフレームワークを比較することにしました。 これにより、Web開発者は適切なCSSソリューションを迅速に選択できます。



多くの作業があるので、ハブに関する比較を、徐々に-一連の記事として説明します。 私の仕事があなたの役に立つことを願っています。



「フレームワーク」と「ライブラリ」の概念の違い。



ソリューションを分析する前に、 フレームワークとライブラリという2つの概念を考慮する必要があります 。 一見、同じように見えるかもしれませんが、そうではありません。 ウィキペディアの定義に目を向けてください。



フレームワーク （英語のフレームワークの新語-フレームワーク、構造）-ソフトウェアシステムの構造を定義するソフトウェアプラットフォーム。 大規模なソフトウェアプロジェクトのさまざまなコンポーネントの開発と統合を促進するソフトウェア。



プログラミングのライブラリ （英語のライブラリから）は、ソフトウェア（ソフトウェア）の開発に使用されるサブプログラムまたはオブジェクトのコレクションです。



Css-framework-レイアウト、開発の速度、および植字エラー（ブラウザーの異なるバージョン間の互換性の問題など）の最大数を排除するために作成されたフレームワーク。



それが言う概念の違いについて：



「 フレームワークは 、ソフトウェア製品のアーキテクチャに影響を与えたり、制限を課すことなく、ライブラリをソフトウェア製品で単純な一連のルーチンとして使用できるという点でライブラリと異なります。 「開発段階では、デフォルトの動作は、指定された要件に従って拡張および変更する必要があるフレームワークです。」



これらすべてから、ライブラリは次の場合にフレームワークであると結論付けることができます。



それらの明確な分離にもかかわらず、cssフレームワークが始まりcssライブラリが終わる行を常に見ることができるとは限りません。 結局のところ、それらはマークアップ言語とその外観を決定するための言語に基づいています。 これらは、javascript、c ++、pascalなどとは大きく異なります。 公式化が常に上記で定義されたルールに適合しないため、これは混乱を招きます。 しかし、私はもっと注意深く、可能な限り正確にすべてをしようとします。 そして、あなたは、間違いをするのを促して助けてくれることを望んでいます。



CSSフレームワーク/ライブラリの種類



市場には多くのcssフレームワークとライブラリがあります。 それらはすべて異なる要素セットを持っています。 公正な評価と結果のエラーの削減のために、私はcss-solutionsをサブタイプに分割し、約40のオプションを分析することにしました。



シンプルなCSSフレームワーク



JavaScriptを使用しません。 すべてのモジュールはcssとhtmlで書かれています。 それらは軽く、速く、簡単です。 JavaScriptコンポーネントが不足しているため、単純なCSSフレームワークにはいくつかの機能がありません。



これらには、次のモジュールが含まれます。



分析ソリューションのリスト：



Webコンポーネント



これらは、新しいWebコンポーネントエンジンに基づいています。



Webコンポーネントは、UIソリューションの便利な実装のためにブラウザーにテクノロジーを追加する一連の標準です。 そのような各要素は、メインページのスタイルと重複することなく、独自のDOMツリーで機能します。 これは、カプセル化プロパティを維持できるため、Webコンポーネントの主な利点の1つです。 これについては、プロジェクトグループWeb Componentsで詳しく説明しました。



分析用フレームワークのリスト：



CSSメッシュ



グリッドを実装するためのほとんどのソリューションは、適度な機能セットを持ち、1つのタスクのみを実行するため、フレームワークの概念の一部ではありません。 それにもかかわらず、とにかくそれらを分析し、比較します。



分析ソリューションのリスト：



複雑なCSSフレームワーク



最も野心的なフレームワーク。 javascriptとcss + htmlモジュールがあります。 Web-UIを作成するほとんどのタスクを解決できます。



通常、それらは存在します：



分析ソリューションのリスト：



入門資料



IT業界には多くのcssフレームワークとライブラリがあり、特定の問題を解決するためにそれらから何を選択するかを正確に決定することは難しいことを学びました。 その結果、このプロセスを簡素化するために、実際の例を使用して完全な分析と比較を行いました。



cssフレームワークがcssライブラリとどのように異なるかを明確に証明し、4種類のソリューションを強調しました。



各タイプで、彼は兆候を特定し、さらなる研究のための解決策のリストを示しました。



次の記事では、特定のcssフレームワークとライブラリを分析することから始めます（リストは変更される可能性があります）。 またね



UPD 12/21/2015：oledjeのおかげで、彼は複雑なcssフレームワークにMaterializeとMaterial Design Liteを追加しました。

UPD 12/22/2015： andrewiWDはGridleを提案し、CSSグリッドのリストに追加しました。


More articles:


All Articles