PHPackages                             pickles2/px2style - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility &amp; Helpers](/categories/utility)
4. /
5. pickles2/px2style

ActiveLibrary[Utility &amp; Helpers](/categories/utility)

pickles2/px2style
=================

Pickles 2 CSS Components.

3.6.0(4mo ago)02.0k↑200%1MITSCSSPHP &gt;=7.3.0CI passing

Since Apr 11Pushed 4mo ago2 watchersCompare

[ Source](https://github.com/pickles2/px2style)[ Packagist](https://packagist.org/packages/pickles2/px2style)[ RSS](/packages/pickles2-px2style/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (8)Versions (44)Used By (1)

px2style
========

[](#px2style)

Pickles 2 CSS components.

Install
-------

[](#install)

Install with npm.

```
$ npm install --save px2style
```

Install with composer.

```
$ composer require pickles2/px2style
```

Custom Properties
-----------------

[](#custom-properties)

```
:root {
	--px2-font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Helvetica Neue", "Arial", sans-serif;
	--px2-main-color: #00a0e6;
	--px2-text-color: #333;
	--px2-background-color: #f9f9f9;
	--px2-border-color: #f0f0f0;
}
```

Change log
----------

[](#change-log)

### px2style v3.6.0 (2025年11月16日)

[](#px2style-v360-2025年11月16日)

- アピアランス用テーマファイルの構成を変更した。
    - ライトモード: `dist/themes/lightmode.css`
    - ダークモード: `dist/themes/darkmode.css`
    - システムの設定に合わせる: `dist/themes/default.css` (互換性維持のため `dist/themes/auto.css` でも可)

### px2style v3.5.2 (2025年7月12日)

[](#px2style-v352-2025年7月12日)

- `.px2-form-input-list`, `.px2-vertical-list`, `.px2-horizontal-list`, `.px2-note-list`, および テーマスタイル の微修正。
- `.px2-image-slider` の重なり順に関する問題を修正。

### px2style v3.5.1 (2025年5月9日)

[](#px2style-v351-2025年5月9日)

- `.px2-viewport-fit` のレイアウトが崩れる場合がある問題を修正。

### px2style v3.5.0 (2025年4月3日)

[](#px2style-v350-2025年4月3日)

- `.px2-viewport-fit` のポリシーを変更: フィットさせる処理はテーマによる拡張に委ねることにした。

### px2style v3.4.3 (2025年3月5日)

[](#px2style-v343-2025年3月5日)

- `px2-btn`, `px2-a` について、デバイスによるスタイリングの差異を修正。
- `px2-linklist` と ショルダーメニュー付き見出し の組み合わせで、ショルダーメニューが表示されない不具合を修正。

### px2style v3.4.2 (2024年12月28日)

[](#px2style-v342-2024年12月28日)

- `px2-modal`: スクロールロックが無効になっていた不具合を修正。

### px2style v3.4.1 (2024年12月25日)

[](#px2style-v341-2024年12月25日)

- プレースホルダ画像を `broccoli.getNoimagePlaceholder()` から取得するようになった。
- コンテナクエリ導入に関する不具合の修正。

### px2style v3.4.0 (2024年11月1日)

[](#px2style-v340-2024年11月1日)

- `px2style.closeModal()`、 `modal.close()` の第一引数が、 `onclose()` の引数として呼び出し側に返されるようになった。
- 目次モジュール `:lists/index` の編集中の表示を英語化した。
- メディアクエリで制御されていたモジュールを、コンテナクエリでの制御に移行した。
- その他、いくつかの細かい改善。

### px2style v3.3.0 (2024年9月10日)

[](#px2style-v330-2024年9月10日)

- Image List フィールドを追加。
- Image Slider モジュールを追加。
- 従来のカルーセルモジュールに非推奨フラグを追加。
- `px2-modal`: タブキー操作に関する動作の改善。
- `px2-modal` の `contentFill` オプションを有効にした場合のDOM構造を変更した。
- 画像フィールドの `filenameAutoSetter` オプションのデフォルトを、 従来の `ifEmpty` から `random` に変更した。
- 画像フィールドの `format` オプションが、デフォルトで `image/webp` に変換されるようにした。
- 画像フィールドの `format` オプションに、フォーマット変換を行わない Boolean `false` または String `pass` の設定を追加した。
- その他、いくつかの細かい改善。

### px2style v3.2.5 (2024年4月30日)

[](#px2style-v325-2024年4月30日)

- `px2-modal`: ダークモードでのスタイリングに関する修正。
- `auto` テーマを追加した。
- `px2-horizontal-list` のマージン設定を改善。
- その他、いくつかの細かい改善。

### px2style v3.2.4 (2023年11月13日)

[](#px2style-v324-2023年11月13日)

- `.px2-index-list` を追加。
- `darkmode` テーマを更新した。
- その他、いくつかの細かい改善。

### px2style v3.2.3 (2023年8月29日)

[](#px2style-v323-2023年8月29日)

- imageフィールドの自動リサイズ機能で、GIFを登録された場合に変換しないように変更した。

### px2style v3.2.2 (2023年7月14日)

[](#px2style-v322-2023年7月14日)

- `px2style.css` に、いくつかのモジュールがビルドされていなかった不具合を修正。
- `px2style.css` とテーマの分離に関する不具合の修正。

### px2style v3.2.1 (2023年6月25日)

[](#px2style-v321-2023年6月25日)

- `.px2-viewport-fit` の処理を改善した。
- `.px2-grid` の内容が幅に満たない場合に、中央に揃えられるようになった。

### px2style v3.2.0 (2023年5月1日)

[](#px2style-v320-2023年5月1日)

- `.px2-p`、 `.px2-section`、 `.px2-notice`、 `.px2-tabs` のスタイルの修正。
- ベーススタイルシートと defaultテーマ が切り離された。
- `darkmode` テーマを更新した。

### px2style v3.1.2 (2023年4月22日)

[](#px2style-v312-2023年4月22日)

- `px2style.form()` を追加。
- `.px2-table.px2-table--dl` を追加。
- `.px2-radio-switch` を追加。
- `.px2-tabs` に、タブの折返しオプションを追加.
- imageフィールドに、登録した画像が自動的にリサイズされる機能を追加した。
- imageフィールドに、`format` オプションを追加した。
- その他、いくつかの細かい改善。

### px2style v3.1.1 (2023年3月11日)

[](#px2style-v311-2023年3月11日)

- `.px2-a` のスタイリングを改善。

### px2style v3.1.0 (2023年2月11日)

[](#px2style-v310-2023年2月11日)

- モジュールのカテゴリ分けを改善した。
- `px2style__image` フィールドを追加。
- `.px2-linklist` のスタイリングを改善。
- `.px2-grid` に 5/6幅 を追加した。
- `.px2-grid` のマージン設計を改善。
- `.px2-image` から、 `href`, `target` フィールドを削除した。
- 新しいモジュール `.px2-image-banner-link` を追加した。
- bug fix: `.px2-grid` で 3/4幅 が効かない不具合を修正。
- 各Broccoliモジュールに、モジュールIDを明示した。
- その他、いくつかの細かい改善。

### px2style v3.0.2 (2022年12月28日)

[](#px2style-v302-2022年12月28日)

- `px2style.modal()` が重ねて開かれたとき、背景色が重なりすぎる問題を修正した。
- `px2style.modal()` について、要素への自動フォーカス機能を改善した。
- `px2style.modal()` に、オプション `height`, `contentFill` を追加。
- `px2style.getOpenedModalCount()` を追加。
- リンクリストのスタイリングを改善。
- 画像モジュールで、拡大画像のモーダルを `px2style.modal()` で開くように修正した。
- その他、細かい内部コードの改善。

### px2style v3.0.1 (2022/11/03)

[](#px2style-v301-20221103)

- `px2style.modal()` のオプションに `onbgclick` を追加した。
- `px2style.modal()` のオプションに `type` を追加した。`drawer-left` と `drawer-right` を追加した。
- `px2style.modal()` で、タイトル、ボタンがない場合に、自動的にヘッダー、フッターを隠すようになった。

### px2style v3.0.0 (2022/10/16)

[](#px2style-v300-20221016)

- Broccoliモジュールを追加し、モジュール機能が統合された。
- `@layer px2style` を導入した。
- `px2style.modal()` で、背景がスクロールされないようにする制御を追加した。
- `px2style.modal()` のコンテナを `dialog` 要素に変更した。
- セクションモジュール `.px2-section` を追加した。
- `.px2-button`、 `.px2-input`、 `.px-input-group`, `.px2-form-input-list` の微調整。
- `.px2-header`、 `.px2-editor-type`、 `.px2-document`、 `.px2-slim` を削除。
- `px2style.setConfig()`、 `px2style.getConfig()` を廃止。
- ダークモードを テーマファイルに分離した。
- その他、いくつかの不具合の修正。

### px2style v2.0.20 (2022/07/11)

[](#px2style-v2020-20220711)

- `px2style.modal()` で、特定の操作により、背景にフォーカスを移動できる問題を修正。

### px2style v2.0.19 (2022/06/05)

[](#px2style-v2019-20220605)

- `px2style.modal()` で、モーダルを開いた直後に、モーダルのタイトルにフォーカスするようになった。
- `px2style.modal()` に、 `replaceBody()` メソッドを追加。
- `.px2-note`、 `.px2-error` を追加。
- その他、いくつかの不具合の修正。

### px2style v2.0.18 (2022/05/06)

[](#px2style-v2018-20220506)

- `.px2-modal` で、閉じるボタンクリック時にフォームを送信してしまうことがある問題を修正。
- `px2style.modal()` は modalオブジェクトを返すようになった。

### px2style v2.0.17 (2022/05/02)

[](#px2style-v2017-20220502)

- `.px2-modal` で、フォームロック中に閉じるボタンを隠すようになった。

### px2style v2.0.16 (2021/11/26)

[](#px2style-v2016-20211126)

- `.px2-header` で、スモールスクリーンのときにショルダーメニューに収められるグローバルメニューの下に仕切り線を追加した。
- `.px2-editor-type--html-gui` のラベルを GUI から Block に変更。
- `.px2-loading` は `.px2-modal` よりも手前に表示されるようになった。
- `.px2-open-in-new-window` を追加。
- `.px2-modal` のスタイル改善。
- `.px2-notice` のダークモード対応を追加。
- カスタムプロパティが設定されていない場合に、デフォルトの値が適用されるようになった。
- その他いくつかの細かい修正。

### px2style v2.0.15 (2021/06/26)

[](#px2style-v2015-20210626)

- `--px2-text-color`、 `--px2-background-color` を追加。

### px2style v2.0.14 (2021/04/28)

[](#px2style-v2014-20210428)

- `.px2-modal` に、一時的にフォーム操作をできなくする機能を追加。
- その他いくつかの細かい修正。

### px2style v2.0.13 (2021/04/04)

[](#px2style-v2013-20210404)

- ダークモードのコントラストをやや下げた。
- `.px2-modal` に、一時的に閉じれなくする機能を追加。
- `.px2-input` に、エラー表現 `.px2-input--error` を追加。
- フォームの入力リストモジュール `.px2-form-input-list` を追加。
- フォームの送信エリアモジュール `.px2-form-submit-area` を追加。
- その他いくつかの細かい修正。

### px2style v2.0.12 (2021/02/21)

[](#px2style-v2012-20210221)

- `.px2-grid` を追加。
- `.px2-modal` に閉じるボタンを追加。
- `.px2-input--block` を追加。
- ダークモード対応 `body.px2-darkmode` を追加。

### px2style v2.0.11 (2020/12/10)

[](#px2style-v2011-20201210)

- `.px2-note-list` を追加。
- `.px2-btn` で disabled が有効なとき、マウス操作に反応して見える問題を修正。
- スペルミスの修正: `burette` -&gt; `bullet`
- JavaScriptの初期化オプションに `additionalClassName` を追加。
- ファイル名を変更: `styles.css` -&gt; `px2style.css`, `scripts.js` -&gt; `px2style.js`

### px2style v2.0.10 (2020/08/12)

[](#px2style-v2010-20200812)

- `.px2-btn--toggle-on` を追加。
- `.px2-input` を追加。
- `.px2-input-group` を追加。

### px2style v2.0.9 (2020/05/10)

[](#px2style-v209-20200510)

- `.px2-notice` を追加。
- `px2style.flashMessage()` を追加。
- `.px2-modal` のスタイリングを改善。
- `px2style.modal()` で、タブキー操作に関する制御を改善。
- `px2style.modal()` が、ESCキーで閉じるようになった。
- `px2style.modal()` に、オプション `onclose` を追加。
- `px2style.modal()` が、多重に開けるようになった。

### px2style v2.0.8 (2020/03/14)

[](#px2style-v208-20200314)

- `.px2-modal` のスタイリングを改善。
- `px2style.modal()` に、オプション `buttonsSecondary` を追加。

### px2style v2.0.7 (2019/12/13)

[](#px2style-v207-20191213)

- `.px2-btn` が、 macOS Catalina で適切なフォントで表示されない問題を修正。
- ユーティリティ `.px2-font-size-ll`, `.px2-font-size-l`, `.px2-font-size-s`, `.px2-font-size-ss` を追加。
- ユーティリティ `.px2-text-align-left`, `.px2-text-align-center`, `.px2-text-align-right` を追加。
- `.px2-vertical-list` を追加。
- その他いくつかの細かい修正。

### px2style v2.0.6 (2019/07/17)

[](#px2style-v206-20190717)

- `.px2-header` で、サブメニューの開閉制御に関わる問題を修正。
- `.px2-header` が、小さい画面のときを考慮してスタイルが変化するようになった。
- `.px2-header` で、ハンバーガーメニューの書き方を修正。

### px2style v2.0.5 (2019/05/28)

[](#px2style-v205-20190528)

- `px2style.message()` を `px2style.loadingMessage()` に改名した。

### px2style v2.0.4 (2019/05/27)

[](#px2style-v204-20190527)

- `.px2-header` を追加。
- `px2style.loading()`、 `px2style.message()`、 `px2style.closeLoading()` を追加。
- その他いくつかの細かい修正。

### px2style v2.0.3 (2019/01/13)

[](#px2style-v203-20190113)

- `.px2-link` を追加。
- `.px2-link.px2-link--burette` を追加。
- `.px2-editor-type` に `alias` を追加。
- `.px2-editor-type__***` を `.px2-editor-type.px2-editor-type--***` に変更。(ただし古い書き方も互換性維持のため残します)
- List カテゴリを追加。
- ボタンアクションに "押した感触" を追加。
- `px2-modal` に `form` オプションを追加。

### px2style v2.0.2 (2017/05/30)

[](#px2style-v202-20170530)

- `.px2-table` を追加。
- `.px2-document` を追加。
- `.px2-p` を追加。
- `.px2-slim` を追加。
- `.px2-responsive` を追加。
- `px2style.modal()` に、オプション `width` を追加。

### px2style v2.0.1 (2017/04/11)

[](#px2style-v201-20170411)

- ボタンの背景色を不透過にした。
- `px2-modal` を追加。
- JavaScriptオブジェクト名を `window.px2style` に変更。

### px2style v2.0.0 (2016/09/17)

[](#px2style-v200-20160917)

- Initial Release.

License
-------

[](#license)

MIT License

Author
------

[](#author)

- Tomoya Koyanagi
- website:
- Twitter: @tomk79

###  Health Score

48

—

FairBetter than 95% of packages

Maintenance77

Regular maintenance activity

Popularity19

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity71

Established project with proven stability

 Bus Factor1

Top contributor holds 99.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~76 days

Recently: every ~57 days

Total

42

Last Release

126d ago

Major Versions

2.0.20 → 3.0.02022-10-16

### Community

Maintainers

![](https://www.gravatar.com/avatar/00ca3b0b7c69b5a8c25bbfb82b305ab94c4fc7458b38df445cbb97acc073875f?d=identicon)[tomk79](/maintainers/tomk79)

---

Top Contributors

[![tomk79](https://avatars.githubusercontent.com/u/584845?v=4)](https://github.com/tomk79 "tomk79 (484 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")

---

Tags

pickles2

### Embed Badge

![Health badge](/badges/pickles2-px2style/health.svg)

```
[![Health](https://phpackages.com/badges/pickles2-px2style/health.svg)](https://phpackages.com/packages/pickles2-px2style)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
