sakura

SakuraはミニマルなクラスレスCSSフレームワーク兼テーマです。その中心的な考え方は、1つのスタイルシートを任意のウェブページに読み込むだけで、マークアップにクラス名を一切追加することなく、既存のプレーンなHTMLが即座にモダンで読みやすい見た目になるというものです。 主な特徴: - クラスレス: スタイルは標準のHTML要素に適用されるため、既存のコンテンツやMarkdownパーサーが生成したHTMLでも機能します。 - 迅速なプロトタイピング: バックエンド中心のサイト、小規模なブログ、CSSをいじりたくないページに有用です。 - 妥当なデフォルト: 大規模なデザインシステムというよりも、理にかなった一連のデフォルト値として説明されています。 - テーマ設定: 色はデュオトーン方式の変数で制御されます（blossomカラーとfadeカラー、さらに背景色、代替背景色、テキスト色）。cssフォルダにいくつかの既製テーマが同梱されており、SCSS変数を上書きしてメインファイルをインポートすることでカスタムテーマを作成できます。 - ダークモード: prefers-color-schemeを使用したmedia属性で、別のダーク用スタイルシートを読み込むことができます。 - ブックマークレット: CSSがない既存サイトにSakuraを適用するためのブックマークレットが利用可能です。 READMEに記載されているインストール方法: - CDN: headタグ内でjsDelivrからスタイルシートをリンクします。 - 手動: sakura.cssをダウンロードしてローカルでリンクします。 - パッケージマネージャー: npm install sakura.css または yarn add sakura.css。 - 任意だが推奨: Sakuraの前にnormalize.cssを含めます。 READMEには、Sakuraありとなしのページを比較するライブデモ、Sakuraを使用しているブログ、使用が報告されている多数のサイトのリストへのリンクがあります。また、ブックマークレット、画像、Viteプレビューの貢献者についても言及し、ユーザーに使用状況の報告やプルリクエストの作成を呼びかけています。