目次
更新日：2025年6月21日
npm install pita-css
概要
ドキュメント型のサイトに特化したClassレスな思想がベースの「Classレス」、「低水準Class(ユーティリティクラス)」「ドキュメント型サイトにあったら嬉しいJS」が内包されたCSSフレームワークです。そこまでドキュメントにコストを割かない(割けない)ユーザーに最適です。
👌 サポートされているもの
- Vue.js
- Nuxt
- Vanilla(バニラ環境)
❌ サポート外(現在)
- React (サポート予定)
- Next.js (サポート予定)
対応ブラウザバージョン
- Chrome: 111+
- Firefox: 113+
- Safari: 16.2+
- Edge: 111+
特徴
PitaCSSは大まかに分類すると以下のような強みがあります。
- Classレスベースだが、低水準のClassが付属しており柔軟性が高い
- 素のままで見やすいデザインになる
- ライブラリ,フレームワーク非依存(バニラ)
- なおかつSSR,CSR(SPA)対応
PitaCSS 特徴 (簡潔版)
- Classレス設計 - HTMLタグだけで美しいデザイン
- 段階的採用 思想 - Classレス → ユーティリティ → 高レベルクラス
- ドキュメント特化 - 技術文書・マニュアルサイトに最適
- フレームワーク非依存 - Vue/React(サポート外)/バニラJS対応
🛠️ 機能分類
- 変数システム (
var.css) - カスタマイズ可能な変数(テーマ) - レイアウト (
main.css) - サイドバー付きレイアウト - 余白 (
margin.css,padding.css) -.m20,.p10など - 文字 (
font.css) -.text-xs〜.text-2xlなどのフォント関係 - ブレイクポイントやwidthセット (
width.css) -.w-max1250,.hide-max1250など
🎨 UIコンポーネント
- アラート (
alert.css) -.alert.info/success/warning/error - プログレス (Classレス) - ストライプ・不確定対応
- ボタン(Classレス) - シンプルなボタンスタイル
- リンク (
link.css) -.inherit-linkなど便利な低水準のlink装飾があります。 主役はドキュメントです。最低限のUIコンポーネントしかありません。
🔧 JavaScript機能
- テーマ切替 - ライト/ダーク/自動
- サイドナビ - 自動折りたたみ・SPA対応
- プログレスローダー - ページ読み込み表示
すべてバニラJavaScriptで実装しています。
🌏 日本語
- フォント最適化 - 日本語フォント優先
- 行間調整 -
line-height: 2.2 - レスポンシブ文字 - Clamp関数使用
💡 開発体験
- 直感的命名 -
.mT20(margin-top),.pX40(padding左右) - ゼロ設定 - import後すぐ使用可能
- 軽量 - 依存関係なし
思想
開発者が何もしなくても、HTMLだけで完結できる。
というClassレスの思想に重きを置き、低水準Class (いわゆるユーティリティクラス)、ドキュメントサイトに必要な高度な動的な機能(JS)を足して、バランスよく内包しました。
Classのレベル (段階的採用 思想)
- Classレス
- (
h1,p,section等)
- (
- 低水準Class (いわゆるユーティリティクラス)
- (
mT20等)
- (
- ハイレベルClass
- (
media-text,search-box,alert等)
- (
これらのClassレベルを必要に応じて段階的に使い分けることで、シンプルかつ直感的に使用できます。
直感的に分かりやすい命名規則
そもそも元のCSSがシンプルなため、命名もシンプルです。
ブレイクポイント(珍しいかもしれませんが、タブレット→スマホの順番で尊重します)
iPadなどのタブレットにも対応するため、基本的にブレイクポイントは1250pxです。 また、多くの場合ドキュメントを読むのはスマホではなく**「タブレットやPC」**です。そこも考慮しました。
日本語でも見やすく
Clamp関数を使いレスポンシブ化やline-heightを日本語向けにしました。日本語でも見やすいドキュメンテーションを作れます。