すべてのWebプロジェクトで使用できる小さな応答型CSSモジュールのセットです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">

スタートガイドGitHubで見る

フットプリントが минимальный CSS。

Pureは非常に軽量です。全モジュールのセットは3.5KB*の最小化とgzip化に当たります。当初からモバイルを念頭に置いて作成しており、ファイルサイズを小さくすることが重要でした。また、すべてのCSSコード行が慎重に検討されています。これらのモジュールのサブセットのみを使用することにしたら、さらにバイト数を節約できます。

* 正しい数値を追加できます :) 上記の数字は個々のモジュールのサイズです。グループ化すると、さらに圧縮(gzip)されます。

CSSの基盤。

PureはNormalize.cssに基づいており、レイアウトとスタイルをネイティブのHTML要素と最も一般的なUIコンポーネントに提供します。余計なものがないので、必要なものだけです。

モバイルを念頭に作成。

Pureは応答型なので、要素はすべての画面サイズで素晴らしい見栄えです。

邪魔になりません。

Pureのスタイルは最小限であり、その上にご自分のアプリケーションスタイルを作成することをお勧めします。邪魔にならないように設計されており、スタイルを簡単にオーバーライドできます。

Diagram of a sample layout.

応答型レイアウトを作成。

グリッドメニューを使用して、すべての画面サイズに美しい応答型レイアウトを作成できます。スタートするためのヒントをご用意しています。さまざまなレイアウトを見て、基盤がしっかりとしたWebプロジェクトを今すぐ始めましょう。

レイアウトを表示

独自のデザインを作成。

他のフレームワークとは異なり、Pureのデザインには先入観がなく、最小限でフラットです。新しいCSSルールを追加するほうが、既存のルールを上書きするよりもはるかに簡単だと考えています。数行のCSSを追加することで、Pureの外観をWebプロジェクトに合わせてカスタマイズできます。

Pureを拡張