codedgar/Puppertino

A CSS framework based on Human Guidelines from apple

Summary

Puppertino is a CSS framework that brings macOS and iOS styling to web pages by following Apple's Human Interface Guidelines. It is plain CSS with no build step and no runtime dependencies, with small optional vanilla JavaScript helpers for interactive components. The project ships three bundles, plus dark mode and accessibility support.

What it is useful for

Puppertino fits when engineers want a web interface that looks like macOS or iOS without writing custom CSS. The desktop bundle includes buttons, segmented controls, sliders, menus, popovers, modals, dialogs, sheets, sidebars, toolbars, the menu bar and Dock, lists, tables, and scrollbars. The mobile bundle covers action sheets, tab bars, navigation bars, lists with swipe actions, and date pickers. Foundations include colors, typography, materials (blur, translucency, Liquid Glass), and layout.

Dark mode responds to system appearance, and the framework respects accessibility settings for reduced motion, reduced transparency, and increased contrast. A documented limitation: materials that rely on blur fall back to an opaque surface in browsers without backdrop-filter support.

How engineers can use it

The README documents two paths. The first is a single stylesheet in the page head:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codedgar/[email protected]/dist/css/puppertino.min.css">

Markup then uses classes such as p-type, p-auto-dark-mode, and p-button p-button-primary.

The second path is npm install @codedgar/puppertino. Imports can target the full bundle, one platform (@codedgar/puppertino/desktop or /mobile), or a single component such as @codedgar/puppertino/buttons. JavaScript helpers for menus, modals, sliders, date pickers, the Dock, and more live in src/js/ and load only what each page needs.

Dark mode works by adding a class to <body> or any element: p-auto-dark-mode follows the system, p-dark-mode forces dark, and p-light-mode pins a subregion to light. For a toggle that remembers the choice across tabs, load darkmode_manager.js and call puppertinoThemeMan.init({ autoDetect: true }).

Pages upgrading from version 1 do not need markup changes; the v2 stylesheets include v1 classes. To rebuild bundles, the documented commands are npm install then npm run build:css. The docs site can be run locally from docs-src/. For the full class index, the README points to llms.txt and llms-full.txt published at the documentation site.