開発の生産性を加速する 13 の最新の CSS フレームワーク

この記事では、一連の主要な CSS フレームワークを紹介します。聞いたことがある人もいれば、全く初めての人もいるかもしれません。ただし、それらはすべて、ワークフローを改善できるさまざまな便利な高度な機能を提供します。はじめましょう！

CSS に重点を置いたフレームワーク

CSS に重点を置いたフレームワークから始めましょう。プロジェクトの基礎を自分で構築するための、あらゆる種類のレイアウトと UI 要素が見つかります。一部には、より複雑な機能を処理するために役立つ JavaScript が含まれている場合もあります。

Tailwind CSS

Tailwind と他のフレームワークの違いは次のとおりです。事前に構築された UI コンポーネントはありません。代わりに、CSS クラスを使用して、Web サイトの構築を有利にスタートできるようにするプログラム自体に重点を置いています。サイズ、色、位置などの要素が鍵となります。

公式ウェブサイト: https://tailwindcss.com

ブルマ

Bulma は CSS Flexbox を中心に構築されており、無料のオープンソース フレームワークです。カスタマイズしやすい UI 要素が多数あることがわかります。これはモジュール式であるため、列やボタンなど、必要な要素のみをインポートできます。

公式ウェブサイト: https://bulma.io/

ピクニック CSS

##Picnic CSS は、圧縮で 10 KB 未満の超軽量フレームワークです。 Flexbox ベースのグリッド レイアウトと大量の UI 要素を備えており、プロジェクトをすぐに開始できます。シンプルなナビゲーション バーやモーダル ウィンドウもあります。

公式ウェブサイト: https://picnicss.com/

マテリアライズ

##Google の

マテリアル デザイン

のファンは、間違いなく Materialize を気に入るはずです。このフレームワークは一般的なデザイン言語に基づいており、CSS と JavaScript に基づく多数の要素が含まれています。ユーザーインターフェイスをより使いやすくするためにマイクロインタラクションに焦点を当てています。マテリアライズはカスタムテーマもサポートしていることは注目に値します。 公式ウェブサイト: https://materializecss.com/

Pure.css

Pure.css はわずか 3.8KB 圧縮されており、モバイルファーストの哲学を中心にしています。モジュール式なので、使用する要素パッケージをインポートするだけで済みます。多くの一般的なレイアウトをダウンロードしてインストールすることもできます。

公式ウェブサイト: https://purecss.io/

Base

Base は、その名前が示すように、プロジェクトに強固な基盤を提供するように設計されたモジュール式フレームワークです。これは Normalize.css に基づいて構築されており、カスタマイズが簡単な基本的なスタイルを提供します。ここではあまり多くのことは見つかりませんが、まさにそれが重要なのです。

公式ウェブサイト: https://getbase.org/

mini.css

mini.css は、軽量さと豊富な機能のバランスをとるパッケージです。これは確かに的を射ており、かなりの数の UI 要素とレイアウトを備えながら、gzip 圧縮されたサイズで約 10 KB を記録します。提供されるドキュメントを参照すると、すべてがどのように機能するかを深く理解できます。

公式ウェブサイト: https://minicss.org/

簡潔な CSS

##

Concise CSS は、デザイナーに「肥大化をなくす」ためのユーティリティベースのフレームワークを提供し、すぐに使い始めることができます。 UI 要素が必要な場合は、別のパッケージを介して追加できます。

公式ウェブサイト: https://concisecss.com/

Mobi.css

Mobi.css は非常に小さく (圧縮するとわずか 2.6 KB)、主にモバイル ユーザーを対象としています。しかし、その組み込みのテーマとプラグイン システムにはまだ成長の余地がたくさんあります。基本スタイルが要件を満たさない場合は、モジュール形式でフレームワーク上に構築できます。

公式ウェブサイト: http://getmobicss.com/

Spectre.css

Spectre.css は「軽量、応答性、モダン」と呼ばれる、Flexbox をベースにしたフレームワークです。基本的なレイアウト、UI、タイポグラフィーのスタイルがいくつかあります。さらに、純粋な CSS で構築された機能コンポーネント (アコーディオン、ポップアップ、ラベルなど) が多数あります。全体的にバランスが取れています。

公式ウェブサイト: https://picturepan2.github.io/spectre/

CSS の範囲を超えたフレームワーク

#Some シーンには、より強力なフレームワークが必要です。次のオプションは、作業を完了するのに役立ちます。幅広い CSS ベースの要素を提供するだけでなく、HTML および JavaScript ベースの機能も見つけることができます。ある意味、これは、ニーズに合わせてカスタマイズできる中途半端なテンプレートから Web サイトを構築するようなものです。

Bootstrap

Bootstrap は、Twitter が動作を維持するために作成しました。非常に優れており、事前に構築された機能の膨大なライブラリを提供しているため、ほとんどどこにでもあります。デフォルト設定を使用することもできますが、Bootstrap は拡張するのも非常に簡単です。テーマやカスタム コンポーネントを追加すると、パーソナライズされた UI をさらに開発するのに役立ちます。

公式ウェブサイト: https://getbootstrap.com/

財団

##Foundation は、プロジェクトをカスタマイズできるモジュール式コンポーネント ライブラリです。レスポンシブなレイアウトからアニメーションまで、さまざまなオプションがあります。 Foundation には独自の JavaScript プラグイン API もあります。最後に、フレームワークには、アクセシブルなサイトを構築するための ARIA プロパティとロールが付属しています。

公式ウェブサイト: https://foundation.zurb.com/

セマンティック UI

#フレームワークには、元の開発者にとってのみ意味のある CSS クラス名が含まれる場合があります。 Semantic UI は、自然言語を使用して物語を変えることを望んでいます。ロジックは理解しやすく、開発をスピードアップするはずです。言語に加えて、3,000 を超えるテーマ変数があり、必要に応じてすべて編集または削除できます。

公式 Web サイト: https://semantic-ui.com/

フレームワークに依存してより適切に動作します

プロジェクトを完成させるには多くの作業が必要です。だからこそフレームワークが存在します。これは私たちに代わって重労働の一部を処理し、その後のすべての基盤を提供します。

以上が開発の生産性を加速する 13 の最新の CSS フレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。