フロントエンド開発者に最適な10のCSSフレームワーク

フロントエンドの開発者の冗談を聞いたことがあります。「NASA​​はロボットを火星に着陸させましたが、ここでもまだdivの中央揃えに苦労しています!」そして、このジョークが多くの真実を持っていることは、私を悪く感じさせます。ボックス内でボックスを中央に配置するのと同じくらい簡単で常識に基づいた操作を行うことは、CSSで実行するのが非常に困難です。以前に遭遇したことがない限り。そして、コードスニペットをどこかに保存しました。そして、それをうまくやったとしても、どこか愚かなブラウザでひどく壊れてしまうのではないかと、常に潜んでいる恐れがあります。 CSSは、JavaScriptとともに「必要なWeb悪」の最初のスポットを結び付けます。これは、不自然に進化した標準であり、ブラウザメーカーによって解釈が異なり、現在では「CSSエキスパート」と呼ばれるほどの矛盾に満ちています。.


そのため、CSSフレームワークが時間の経過とともに登場し、ほとんどの苦痛を取り除いたのも不思議ではありません。今日では、複数の画面サイズをターゲットにすることが必要になったため、お気に入りのCSSフレームワークなしではコーディングを想像できません。.

しかし、あなたのフレームワークが現在の仕事に最適であることをどのようにして知っていますか?また、フロントエンド開発に不慣れな場合は、どのフレームワークが選択に役立つはずですか。?

この投稿では、フロントエンドの開発状況を一目で見て、CSSフレームワーク間でフロントランナーを比較しています。したがって、CSSルールを手動でコーディングするのに飽きたら、急いで救ってください。!

ブートストラップ

Twitterによる取り組み, ブートストラップ レスポンシブデザインを大規模に導入した功績が認められています。これは、「モバイルファースト」の哲学を促進する最初のフレームワークでした。画面サイズを小さくするために、それ自体が別個のプロジェクトを設計することはなくなりました。関連するBootstrapクラスを含めるだけで、さまざまな画面サイズに合わせてデザインが自動的に調整されます(ほとんどの場合).

Bootstrapのレスポンシブデザイン(4.0と3.0)

ブートストラップはグリッドのアイデアを導入することでレスポンシブデザインを実現しました。グリッドは、(幅とともに)画面に表示されない列へのパーティションです。たとえば、大きな画面では3つの「ボックス」を並べて配置し、小さな画面では縦に配置したい場合は、次のようにします。

3つの列の1つ

3つの列の1つ

3つの列の1つ

Bootstrapの現在人気のあるバージョンは4で、3.3シリーズを大幅に見直しました。上記の構文は、Bootstrap 4でコードを作成する方法です。Bootstrap4のエレガントさの多くは、 フレックスボックス ブラウザーで直接サポートされるその他の最新のレイアウト機能。 Bootstrapの下位バージョンでは、グリッドは合計12列として定義されていたため、次のようなコードが生成されました。

divが大型デバイスでは画面幅の3分の1を占め、中型デバイスでは画面の幅の半分を占めるようにします。 Flexboxに精通している必要がありますが、構文ははるかに快適になりました。.

ブートストラッププロ

特にフルスタックの開発者にとって、Bootstrapには多くのメリットがあります。

  • ラピッドプロトタイピング: Bootstrapを使用すると、トリッキーなCSSの配置やブラウザの非互換性について考える必要がほとんどなくなります。 HTMLを書き出すために必要なすべてのこと、そして適切なCSSクラスを適用することで応答性が活きるようになる.
  • 大規模なエコシステム: 現在のところ、Bootstrapはフロントエンドフレームワークの中で最大のエコシステムを備えています。 Bootstrapを使用して構築されたWebサイトのレイアウト、テーマ、管理パネル、UIコンポーネントなどの数は驚異的であり、ますます改善され続けています。コンサルタントと製品会社の両方にとって、これは事前に作成されたアイテムとコミュニティサポートが常に十分であることを意味します.
  • Twitterによる支援: オープンソースの新たな傾向は、営利団体が後援するプロジェクトの台頭です。多くの場合、これらの事業体はその提供内容を中心に収益性の高いビジネスを構築しています。コトリン(JetBrains), ワードプレス (Automattic、Inc。)、Angular(Google)、React(Facebook)などがその例です。プロジェクトが確立されたエンティティに支えられており、1人でのショーではない場合、プロジェクトには明確なロードマップと長期的な将来があるというコミュニティ(特に企業の顧客)への信頼を与えます.
  • コンポーネントの大規模なコレクション: Bootstrapは、箱から出してすぐに必要になる可能性が高いほぼすべてのUIコンポーネントを提供します。ナビゲーション、フォーム、カード、モーダル、ボタン、バッジ、進行状況バー、アラート。 。 。名前を付けると、Bootstrapに表示されます。多くの企業にとって、これにより、専用のフロントエンドチームが不要になります。.
  • LESSおよびSASSのサポート: 非常に人気のあるCSSフレームワークの中で、BootstrapはLESSとSASSの両方をサポートする唯一のフレームワークです。はい、私は知っています、あなたはLESSを使用しません(自尊心のある開発者がそうするべきではないので?)が、ねえ、そこにはLESSに依存する大規模なプロジェクトがあります。もちろん、どちらも選択せず、プレーンなCSSファイルを書き出すことができます.

ブートストラップの短所

価格なしには何もありませんね。まあ、ブートストラップも例外ではありません。 Bootstrapは、時間の経過とともに、デザイナーやUIの専門家から激しい反論を受けてきました。その理由は次のとおりです。

  • UX単調: Bootstrapに組み込みのコレクションが非常に多いという事実自体が、ウェブサイトはあまりにもなじみがあり、正直に言えば退屈に見えます。あなただけに向かう必要があります 公式の例 デフォルトがどれほど目障りかを確認します。 「すべてのブートストラップWebサイトは同じように見えます」と検索するだけで、私の意味がわかります。 ��
  • スタイリングの問題: ブートストラップは、独断的なフレームワークと考えられるものです。言い換えれば、レイアウトについてのアイデアがあり、見た目や動作を変えたい場合は、一生懸命作業することになります。画面幅のデフォルトのCSSブレークポイントを検討してください。Bootstrapの中サイズの画面は、768pxのデバイス幅で始まる画面です。たとえば、600pxの制限をターゲットにしたい場合はどうでしょうか?まあ、それで頑張ってください!ブートストラップの他のほとんどすべてのコンポーネントと同じです。行とコンテナにはデフォルトのパディングがあり、ボタンには色と枠線があり、多くの作業を行わずにオーバーライドするのは非常に難しいです。.

をしたい ブートストラップをマスターする? これをチェック Brad Traversyによるオンラインコース.

財団

テクノロジーが宗教だとしたら、財団とブートストラップの連中はお互いの血を引くことになるだろう。 Foundationに言及しない限り、最新のCSSフレームワークについての説明はありません。.

財団を管理する ウェブサイト, また、「世界で最も先進的なレスポンシブなフロントエンドフレームワーク」という署名に気付かずにはいられません。一見すると、マーケティングキャンペーンに参加するのは難しいと思われます.

ただし、財団フレームワークの支持者は、少なくともある程度の真実があることを知っています。 FoundationはRailsフレームワークと自然に調和するように開発されており、Railsの「禅のような」基本原則のいくつかを実際に見ることができます.

たとえば、小さな画面に2つの要素、中程度の画面に3つ、大きな画面に4つの要素を含む行が必要な場合、Foundationの同等のコードは次のようになります。

以前のBootstrapバージョンと比較すると、これは非常に直感的で覚えやすいと思います。 12列のグリッドがなくなり、4/12が何であるかを理解する必要がなくなります。!

FoundationはBootstrapほど人気はありませんが、多くのエキスパートフロントエンド開発者にとって企業秘密です.

財団フレームワークの長所

Foundationには、この記事で検討するすべてのCSSフレームワークのうち、いくつかの変わった特徴があります。

  • 完全なツール: FoundationがCSSフレームワークであると言うのは技術的に間違っています。つまり、そうですが、ほとんどすべての種類のフロントエンドの問題を解決することを目的とした、大規模でモジュール化されたツールのコレクションとして構築されています。 Webサイトと電子メール用に個別のフレームワーク製品があり、それぞれのドメイン向けに大幅に最適化されています。 Foundationにはコマンドラインインターフェイス(CLI)も付属しており、Webpackやその他のモジュールバンドルでの作業に慣れている開発者の耳には音楽のように聞こえます。.
  • 非常に高い柔軟性: Bootstrapとは異なり、Foundationはフロントエンド開発者がUIを完全に制御できるように構築されています。その結果、財団は穏やかで、新人にとって非常に複雑に感じるでしょう。ただし、その理由は、Foundationがスタイル言語を強制するのではなく、まさにそれが何であるかを目指すことです:優れたCSSフレームワーク.
  • UIコンポーネントだけではありません: Foundationには通常のUI要素のコレクションがありますが、これは義務の要求をはるかに超えています。開発者には、高度なレスポンシブイメージシステム、価格表コンポーネント(はい、さまざまな価格プランを表示するために使用されるコンポーネント)、フォーム検証、右から左へのサポート、レスポンシブ埋め込みなどが含まれています。これは、ほとんどの単純なWebサイトにとってはやり過ぎですが、大規模なWebサイトにとっては、経験豊富な開発者が認識できる恩恵であることを再度強調したいと思います.
  • トレーニングとコンサルティング: 現在、BootstrapはTwitterによって作成されていますが、サイドプロジェクトであり、全体像のごく一部です。 Foundation(ZURB)の背後にある会社は、しかし、それを使用し、開発し、宣伝することにコミットしています。大規模な顧客向けにトレーニングコースとプロフェッショナルコンサルティングが提供されます。これは、大規模なプロジェクトを対象としており、支払いを希望する企業に最適です.

財団フレームワークの短所

1つのフレームワークの強みは、反対の観点から見たときにその弱みになります。 Foundationがプロジェクトに最適ではない理由は次のとおりです。

  • 小規模なコミュニティ: FoundationコミュニティはBootstrapのコミュニティよりもはるかに小さいため、エキゾチックな何かを試して行き詰まった場合、関連するヘルプが見つかる可能性は低くなります。ただし、すべての実用的な目的で追加します。コミュニティは十分にあります。ブートストラップよりも数桁小さいため、すぐに解決策を見つけられない場合があります.
  • 複雑: ブートストラップや単純なもの、あるいはもっと悪いことにバニラCSSに慣れている場合、Foundationは複雑さの無限の爆発のように感じるでしょう。レイヤー内のレイヤー、コンポーネントを含むコンポーネント、無限のカスタマイズオプション。 。 。まもなく、生活そのものの有用性に疑問を持ち始めるでしょう。しかし、再び、財団には非常に異なる目的があり、それについて非難することはできません.
  • オプションが多すぎます: たまに、たわごとを終わらせて、後で完璧を心配したいだけなのです。このような場合、わずかなバリエーションで非常に多くのオプションを提示するのはイライラします。たとえば、お腹が空いて泥が食べられる可能性があるときに、地下鉄のサンドイッチを注文しなければならないと考えてください。もちろん、財団はそのような時代には向いていません.
  • 才能の可用性: FoundationはBootstrapよりも(はるかに)人気がないため、利用できる才能ははるかに少ないです。原則として、新規採用者はブートストラップを知っている可能性が高いですが、財団についての手掛かりはありません。学習には時間がかかり、それはすべてのチームが持つことができる贅沢です.

ブルマ

ブルマ CSSフレームワークの戦場への比較的新しい参入者であり、短時間で名を馳せました。その魅力は、厳密なCSSのみのアプローチ(JavaScriptコンポーネントがない)とエレガントなデフォルトにあります。これは、デザインに目を見張っている多くの開発者がBootstrapで作業するときに問題となるものです。.

Bulmaの勢いの多くは、Laravel(知らない場合はPHP Webフレームワーク)コミュニティでの採用率が高いことに起因しています。 JavaScriptフレームワーク間.

Bulma CSS Frameworkを選択する理由

Bulmaを気に入って次のプロジェクトに使用する理由はたくさんあります。

  • 大人気: わかりました。Bootstrapほど人気はありませんが、Foundationより人気があります。執筆時点で、ブルマはGithubに3万以上のスターを持っています。もちろん、多くのGithubスターは評価基準ではありませんが、コミュニティがブルマを承認していると言っています.
  • 非常に読みやすいクラス: 私にとって、ブルマは私が試したすべてのフレームワークの中で最も読みやすいCSSクラスを持っています。タイルと呼ばれるMetroスタイルのグリッドを作成するための途方もなく強力でシンプルなシステムもあります(スクリーンショットの後半のコードを見て、感心していないことを教えてください!).

  • フラットな学習曲線: Bulmaは高度にモジュール化されており、小規模なチームや個々の開発者が遭遇する実際的な日常的な問題を解決するために作成されました。 Bulmaの学習は非常に簡単ですが、CSSの適切な背景は、内部で何が起こっているのかを理解するのに常に良いと思います。これは、デフォルトの動作をオーバーライドする場合に役立ちます.
  • エレガント: さて、以下のブルマのデフォルトのヒーローセクションを見てください。十分に言った!

Bulmaには小さなコミュニティがありますが、非常に情熱的なコミュニティです。そのため、綿密な作業をすべて省きながら、エレガントな外観のUIを記録的な速さで実現したい場合は、Bulmaが適しています。 Bootstrap開発者向けに、Bulmaには説得して移行を支援するための個別のセクションがあります.

UIkit

考えるときに頭に浮かぶこと UIkit ミニマリズムです。ミニマリズムは機能ではなく(実際、おそらくすべてのフレームワークで最も多くの機能を提供します)、デザインにあります。非常にクリーンでエレガントな、ホワイトスペースのないデザインが必要な場合は、UIkitがカバーします.

たとえば、進行状況バーコンポーネントを見てみましょう。

または画像マーカーコンポーネント(画像用のJS駆動型インタラクティブマーカー):

または控えめなHTMLフォーム:

これが優雅さを肺の上で叫ばないのなら、私は何をしているのかわかりません。 UIkitのWebサイトにアクセスして、提供されているすばらしいコンポーネントをすべてチェックしてください。プロジェクトマネージャーまたは顧客が特定のスタイル言語を強制しているのでない限り、UIkitはUIデザインの王冠を獲得し、Googleのマテリアルデザインより数マイル先にあると思います.

しかし、落とし穴はありますか。はいあります。 Bootstrapと同様に、UIkitはJavaScriptで動作し、DOM操作にjQueryを使用できますが、Reactのような仮想DOMフレームワークを使用することは不可能です.

また、Uikitは自己完結型のシステムであり、かなりの労力をかけずに変更または拡張することはできません。.

セマンティックUI

レースの他の候補者は セマンティックUI, 多くのテーマとカスタマイズで自分自身を区別しようとします。 3000を超えるテーマ変数があり、その結果、大幅な幅が広がります。またはそうドキュメントは言う.

Bootstrap 4はこれらすべてをカバーし、完全にカスタマイズ可能ですが、セマンティックUIの1つの利点は、デフォルトで見栄えの良いレイアウトになることです。それでも、箱から出しただけでは見栄えが良くないので、後でリストに入れました。.

また、最も急な学習曲線の1つがあり、コーディング規則ははるかに厳密です。それを試してみてください;私は言って、あなたが好むかもしれないもののように見えるかどうかを確認します.

スージー

スージー 現時点ではあまり知られていないフレームワークですが、それは魅力的でさわやかなアイデアです。もう1つの純粋なレイアウトフレームワークであるSusyは、フロート、グリッド、フレックスボックス、テーブル、その他の定義済みのアイデアをすべて排除し、必要な種類のレイアウトを作成できます。ここでのキーワードは「作成」です。Susyは、非常に複雑で、珍しく、正確なニーズを持つ高度にモジュール化された驚異的なレイアウトを作成するためのものです.

エキスパート開発者の手には、Susyは他のすべてを吹き飛ばすというよりは火炎放射器のようなものです。もちろん、より少ない人間は彼らの手を焼くことができます.

Susyの機能を理解するには、このデフォルト設定(SASS)を試してください。

// 4つの対称的な流体カラム
//ガターは列のサイズの1/4です
//要素の幅は列よりも1少ない
//コンテナの幅も1つ少ない
$ susy:(
「列」:susy-repeat(4),
「ガター」:0.25,
‘スプレッド’: ‘狭い’,
‘container-spread’: ‘狭い’,
);

コードはすぐにわかるものだと思いますが、急いでいる人向けではありません。 ��Susyは、最新のフレームワークが課すすべての肥大にうんざりしていて、通常のフレームワークでは対応できないことがわかっているレイアウトのニーズがある場合に最適です。.

マテリアライズ

Googleのマテリアルデザインに夢中なら、Materializeは フレームワーク お楽しみいただけます。最良のことは、学ぶべきコンポーネントとクラスがほんのわずかであり、生産性を可能な限り速くすることに焦点を当てていることです。カスタマイズオプションはほとんどなく、MaterializeはBootstrapによって確立された一般的な12列グリッドフォーマットに従います。.

あなたが私に尋ねるなら、しかし、 材料設計 非常に一般的になりつつあり、そうです。 。 。デフォルトではフラットですが、BootstrapのすべてのWebサイトの外観が同じ問題について説明するのと同じように、まもなく問題が発生します。それでも、それは始めるための素晴らしいフレームワークです.

純粋な

Yahooは死んだ?

いいえ、この質問は転用ではありませんが、重要な所見を強調しています:Yahooは 純粋なフレームワーク BSDライセンスの下でリリース.

一目見ただけで印象に残ったのですが、なぜこのサービスが多くの人に知られていないのでしょうか。とにかく、Pureを純粋なものにしているのは、それが純粋なCSSフレームワークであることです。 fact実際、開発者はさらに進んで、必要に応じてインポートできるさまざまなCSSモジュールに分割しています。したがって、グリッドシステムのみが必要な場合は、CSS全体をインポートしてサイトの読み込み時間に追加する必要はありません。.

Pureグリッドには、5ポイント、2ポイント、24ポイントなど、いくつかのフレーバーがあります。そのため、列を作成する場合、柔軟性が大幅に向上します。 Pureはデフォルトでは見栄えのよいCSSフレームワークではありませんが、UIの小さなCSS問題を解決し、他のフレームワークに付属する「役立つ」デフォルトに固執したい人にどのように付加価値を与えるかを見ることができます.

スケルトン

スクリーンショットでわかるように, スケルトン CSSフレームワーク、ライブラリ、またはモジュールとさえ呼べないほど最小限です。これはボイラープレートであり、400行のソースコードしか含まれていません。信じられない?私はそう思いますが、全体像を見ると、Skeletonはレイアウトと配置だけを必要とする小さなプロジェクトまたは小規模なプロジェクト用に設計されました.

一見の価値があります。結局のところ、スケルトンはあなたがずっと探していたものかもしれません。!

ミリグラム

リストの最後は ミリグラム, スピードと生産性のために設計されたCSSフレームワーク。開発者はこれを2 KB未満に抑えています。これは、今日の標準では、多くのことを意味します。.

ミリグラムは、CSSフレームワークを少しだけ楽しく使ったものです。拡張は簡単で、数行のカスタムCSSを使用して、外観を好きなように変更できます.

したがって、どのCSSフレームワークが最適か?

認めますが、以前に同様の質問をしたことがあり、次の残念な答えを受け取りました:なし。 frameworkフレームワーク(またはツール、またはあなたの人生の中でさえも)の選択は、多くの要因に依存します。私のアドバイスが欲しいなら、ここにあります:ノイズをカットしてください。人々が何か新しいことに夢中になっているからといって、それを学ばなければならないわけではありません。新しいものを試すのは素晴らしいことですが、完璧なツールを求めて輪になって走り回るのは、もったいないです.

では、これらのフレームワークのどれを試しましたか?それとも、私が見逃したばかりの何かが驚くべきことでしょうか?コメント欄で教えてください。愛、憎しみ、ランダムな挨拶、すべて大歓迎!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map