Pure(ピュア)とは、超軽量CSSフレームワークです。さまざまなWebプロジェクトで使用できる一連のCSSモジュールを提供します。

オープンソースのフレームワーク/Pureとは

Pure(ピュア)とは、超軽量CSSフレームワークです。さまざまなWebプロジェクトで使用できる一連のCSSモジュールを提供します。

「Pure」基本情報

■概要

Pure(ピュア)とは、超軽量CSSフレームワークです。さまざまなWebプロジェクトで使用できる一連のCSSモジュールを提供します。

■基本説明

Pureは、Yahoo!が開発した軽量級CSSフレームワークで、汎用的に使用できるCSS設定をまとめてあるWeb開発用モジュール群です。

「軽量」「高速」「JavaScript不使用」「少ないCSS記述量」「既存サイトへ適用性が高い」などの特徴があります。

■ユースケース

Pureは、次のようなサイトに向いています。
・アクセスが激しい大規模サイト
・販促用サテライトサイト
・初動のレンダリング速度を重視したいサイト など

主な特徴

■簡単インストール

Pure.cssは簡単に導入できます。

同様のCSSフレームワーク「Bootstrap」などでは、「ファイル一式ダウンロード」→「index.html作成」→「CSSへのリンク行を記述」などの作業が必要です。

Pureの場合、作成しているHTMLファイルのヘッダエリアにlink属性として1行記述するだけで利用できます。

■UIコンポーネントスタイル

Pureでは、ネイティブHTML要素に加えて、一般的なUIコンポーネントのレイアウトとスタイルを利用できます。

デザイン上の細かい設定は各Webサイト開発者が行う前提となっており、最低限の設定のみ提供されています。

Pure由来のクラスは明確に区別されているため、他ツールや独自設定との組み合わせの管理を行いやすいメリットがあります。

■レスポンシブレイアウト

Pureは、Bootstrapと同様なレスポンシブレイアウト機能を提供します。

「グリッド」「メニュー」などを使用することで、すべての画面サイズに対して美しいレスポンスレイアウトを作成できます。

■スタイルオーバーライド

Pureは最小のスタイルのみを提供するため、簡単にオーバーライドして利用できます。

■スモールフットプリント

Pureの最小限フットプリントサイズは「4KB程度」しかありません。

モバイルデバイスでも軽快に動作できます。

■対応ブラウザ

Pureがサポートするブラウザは以下の通りです。
・IE 8+
・Firefox
・Chrome
・Safari
・iOS
・Android

外部連携

■Bootstrap連携

Pureは、「Bootstrap」や「jQuery」を含む他のライブラリと連携できる設計になっています。

開発者は、CSSフレームワークとしてPureを使用して、アプリケーションに必要な特定の「Bootstrap」や「jQueryモジュール」を組み込むことができます。

■「Google AMP」対応

Pureは、Googleの「AMP(Accelerated Mobile Pages)」に対応しています。

→Accelerated Mobile Pages Project – AMP

補足情報

■同様製品

同様な機能を提供する製品として、次のようなものがあります。

オープンソース製品:「Bootstrap」など。

■オフィシャルサイト

オフィシャルサイト

→Pure

ライセンス情報

Pureのライセンスは「Yahoo! Inc. BSDライセンス」です。

詳細について、こちらを参照ください。
→GitHub →pure/LICENSE.md

ダウンロード

→Pure →Get Started

 

参考元サイト

※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。

Pure最新TOPICS

最新情報はありません。

Pure最新CLOSEUPコラム

  • 勉強会
  • OSSNEWSに広告を掲載しませんか?

facebook

twitter