Foundation
PureのすべてのモジュールはNormalize.cssを基盤としています。これは、ある程度ブラウザ間の整合性を維持するための基盤レイヤーです。ページにこの<link>要素を追加すれば、Normalize.cssを読み込むことができます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/base-min.css">Normalize.cssについて
Normalize.cssはNicolas GallagherとJonathan Nealによるオープンソースプロジェクトです。彼ら自身の言葉で
Normalize.css は、HTML 要素の既定のスタイルでより高いブラウザ間の一貫性を提供する、小さな CSS ファイルです。これは、従来の CSS リセットに対する、最新の HTML5 に対応した代替手段です。
Normalize.css にはすばらしいドキュメントと、それが従来のリセットとどのように異なるかを説明する徹底したガイドがあります。
追加
Normalize.cssルールに加えて、PureのBaseモジュールにはほとんどのWebサイトで使用される一般的なスタイルが含まれています。
要素の非表示
HTML要素にhidden属性を追加して、display: none !important;を介して画面から非表示にします。
<input type="text" name="_csrf" hidden>レスポンsive画像
<img>要素に.pure-imgクラス名を追加して、ビューポートに合わせてサイズを変更します。レスポンsive Webサイトを構築するときに便利です。
<img class="pure-img" src="...">Normalizeを越えて
Normalize.cssはプロジェクトの開始には最適ですが、フォーム、テーブル、メニューなどのHTML要素はNormalizeによって提供されるものよりも多くのスタイルを必要とします。
これらの要素に追加して外観は作る一方で、サイトやアプリのニーズに合わせてカスタマイズできるように十分に抑えました。 フォーム、 テーブル、および メニュー用のCSSをチェックしてください。