Phones
The rules every part follows on a phone, and how parts change there.
Most people will meet your product on a phone. These are the rules every Tattva part follows on a touch screen, how the main parts change there, and what you still have to do yourself.
The rules
- Touch, not width. A phone is a touch screen, so the rules follow the pointer (
pointer: coarse), not only the screen width. A narrow desktop window keeps its mouse sizes. - Tap areas are 44px. On touch, buttons, pills and small choice controls keep the size they are drawn at and get an invisible tap area at least 44px tall and wide. Rows, tabs, menu items and fields grow to 44px tall. Give a small link the
tapclass to get the same tap area. - Fields are 16px or more. iPhones zoom the whole page when a smaller field takes focus. One rule in
tokens.csskeeps every field at 16px on touch, including ones you add later. - Text is 12px or more. The two smallest sizes rise to 12px on touch, so nothing needs squinting.
- Nothing is hover-only. Anything that shows on hover has a touch equivalent: it is always visible, or it opens on tap.
- Respect the notch and the home bar. The page uses
viewport-fit=cover. Fixed bars add--safe-bottom(and--safe-top,--safe-left,--safe-right) to their padding. - The keyboard is part of the screen. The page uses
interactive-widget=resizes-contentanddvh, notvh, so a field is never hidden behind the keyboard. Bars fixed to the bottom hide while someone types. - Sideways scrolling is the exception. Only tables, code and charts scroll sideways, each in its own labelled region, with a soft fade at the edge that has more.
How the main parts change
| Part | On a phone | On a larger screen |
|---|---|---|
| Dialog | Opens from the bottom as a sheet, with the buttons stacked and clear of the home bar. | A centred card. |
| Sheet | A bottom sheet with a handle. Drag it down or tap the handle to close. | A side panel. |
| Menu | Opens as a bottom sheet with a backdrop, within thumb reach. Turn it off with phoneSheet={false}. | A small floating menu under the button. |
| CommandPalette | A full-width card at the top, so the keyboard does not cover the results. | A centred card. |
| Toast | Full width along the bottom, above the home bar. | Stacked at the bottom. |
| Tabs | One row that scrolls sideways, with a fade where there is more. | All tabs in view. |
| DataTable | Scrolls sideways inside its own region, or with responsive="stack" each row becomes a card. | A normal table. |
Every part page has an On a phone section that says what that part does, written from its code. If a part is not ready for a phone, the section says so plainly.
Tables as cards
The stack option follows the width of the table's own box, not the screen. This one is 288px wide on purpose, so you see the phone layout even on a desktop.
| Shop | Typical (min) | Slowest (min) |
|---|---|---|
| North shop | 28 | 77 |
| East shop | 24 | 66 |
This website on a phone
- The sections (Components, Patterns, Foundations, Resources, Pricing) sit in a bar at the bottom, where a thumb reaches. The top bar holds only the name, search, theme and light or dark.
- The parts menu opens from a Browse button. The path above a page shows only where you are inside a section.
- A part page is trimmed so the first example shows without scrolling: a short summary, one row for the import line, then the examples.
- The parts list opens as a compact list, not tall cards. Your choice of Cards or List is remembered.
What you still do
- Add
viewport-fit=coverandinteractive-widget=resizes-contentto your viewport meta tag, or the safe-area tokens stay at zero. - Lay out your own screens one column first. Put the main action where a thumb reaches, not at the top.
- Test on a real phone. A narrow browser window does not show touch, the keyboard or the notch.