Mobile components
Components designed for touch interfaces. Sized for 44px minimum tap targets, optimized for single-column layouts, and following iOS interaction patterns. For the visual language they build on, see Foundations.
Get the mobile bundle
The mobile bundle brings only what a touch interface needs: the foundations (colors, typography, materials, layout, shadows, dark mode) plus every component on this page. It leaves out the parts that only make sense with a pointer, like the Dock, the menu bar, windows, tooltips, and scrollbars.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codedgar/puppertino@2.0.0/dist/css/puppertino-mobile.min.css">Installing through npm? Import the same bundle by name.
import '@codedgar/puppertino/mobile'Building for both platforms, or unsure what you need? Use the full bundle, puppertino.min.css, which includes everything. See Getting started for all the install options, including per-component imports.
Most components are CSS only. The ones that open, close, or move need a small vanilla JavaScript helper: modals.js drives alerts, action sheets, and sheets, popovers.js places popovers, datepickers.js fills the calendar, and steppers.js wires the stepper. Each component page names the one it needs, and says plainly where behavior is left to you.
Components
Controls & input
The controls that collect decisions, sized for fingers.
Presentation & navigation
Surfaces that take over the screen and the tabs that move between them.
Content
Rows of data, and the plates they sit on.