Pure.CSSの導入 - 軽量レスポンシブフレームワーク

合理化されたCSSフレームワークであるPure.cssは、Webサイトのデザインを簡素化します。 Bootstrapのような重いフレームワークとは異なり、Pureは、4KBのマニファイとGZIPPの上にあるコンパクトなフットプリントを誇っています。 そのモジュラー設計により、必要なコンポーネントのみを含めることができ、ファイルサイズをさらに削減できます。

純粋な.cssを単一の行：

に統合します

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

主要な機能：

軽量で応答性：
• Pureの最小設計とレスポンシブグリッドシステムは、デバイス全体での速度な読み込み時間と最適な表示を保証します。 ユニークなグリッドシステム：
Pureは、ブートストラップとは異なる分数グリッドシステム（Pure-GおよびPure-U-*）を使用して、レイアウト設計の柔軟性を提供します。
• カスタマイズ可能なメニュー：ドロップダウン機能を含む垂直および水平ナビゲーションメニューを簡単に作成およびカスタマイズします。
• 多用途のフォーム：純粋なフォームとグリッドモジュールを使用して、積み重ねられた、整列、マルチカラム形式を含むさまざまなフォームスタイルを構築します。
拡張可能でカスタマイズ可能：
• 特定の設計ニーズに合わせて純粋な機能とスタイルを簡単に拡張できます。 競合なしに他のフレームワークと組み合わせます。
• グリッドシステムの概要：
Pureのグリッドシステムは、ユニットのラッパーとして

および

クラスを使用します。幅は、分数として定義されます（例：は40％です）。 レスポンシブデザインは、メディアクエリ（例：）を使用して達成されます

例：pure-gpure-u-* pure-u-2-5 pure-u-md-2-3

ナビゲーションメニュー：

純粋な垂直メニューを提供し、

を使用して水平に簡単に変換されます。 ドロップダウンメニューは、

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-5">One</div>
  <div class="pure-u-1 pure-u-md-2-5">Two</div>
  <div class="pure-u-1 pure-u-md-2-5">Three</div>
</div>

および

。を追加して作成されます

フォーム：

pure-menu-horizontal pure-menu-has-children基本的なフォームにはpure-menu-allow-hover、積み重ねられたレイアウトの場合は

、アラインされたフォームの場合は

を使用します。 マルチコラムフォームは、グリッドシステムを活用しています カスタマイズと拡張子：

pure-formPureの最小スタイリングにより、簡単にカスタマイズできます。 カスタムスタイルを作成し、ブートストラップのような他のフレームワークと純粋なフレームワークを組み合わせます。 pure-form-stackedpure-form-aligned結論：

pure.cssは、Web開発のための強力で軽量なソリューションを提供します。そのシンプルさと柔軟性により、特にパフォーマンスが最重要である場合、より大きなフレームワークの魅力的な代替手段になります。 その可能性を調査し、Githubでの継続的な開発に貢献します。

よくある質問：

• 軽量の性質：純粋なサイズ（3.8kbのマニファイおよびGzipt）は、速度の速度を保証します。
• 応答性：カスタマイズ：
デザイン要件に合わせて純粋なスタイルを簡単にカスタマイズします。
• コアコンポーネント：
グリッド、フォーム、ボタン、テーブル、およびメニューを含む。
• 他のフレームワークとの比較：
純粋に、広範な機能よりもシンプルさと軽量性能を優先します。
• 初心者のフレンドリー：その単純な性質により、初心者がアクセスしやすくなります
• javascript互換性：javascriptライブラリとフレームワークでシームレスに動作します。
• アクティブなメンテナンス：githubで継続的に維持および更新されました。
• オープンソースと無料：無料使用のためにBSDライセンスの下で利用可能です。

以上がPure.CSSの導入 - 軽量レスポンシブフレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。