「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
• GitHub　→pure-css/pure
• エンカフェ　→【Cording Tool】軽量級CSSフレームワークのPure.css（前編）：孤独のデザモノ探訪 第7回
• Qiita　→BootStrapより軽くて少機能！ CSS Framework「Pure」をBootStrap Advent Calendarで宣伝する暴挙に出る！
• Sugutsukaeruサポート情報　→Pureの使い方（CSSフレームワーク）

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