Edit Mobile-first

Name

Also known as (comma separated)

Brief definition Designing from small screens upward.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "wideOverride", "type": "toggle", "label": "Apply wide-screen override", "default": false }, { "id": "columns", "type": "number", "label": "Wide columns", "default": 3, "min": 2, "max": 4, "step": 1 }, { "id": "label", "type": "text", "label": "Panel label", "default": "Product grid" }, { "id": "accent", "type": "color", "label": "Colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"rsp-mf-stage\">\n <p class=\"rsp-mf-label\">{{label}}</p>\n <div class=\"rsp-mf-grid{{#if wideOverride}} rsp-mf-grid--wide{{/if}}\" style=\"--cols:{{columns}};\">\n <span style=\"background:{{accent}};\"></span><span style=\"background:{{accent}};\"></span><span style=\"background:{{accent}};\"></span>\n </div>\n <p class=\"rsp-mf-code\">{{#unless wideOverride}}base: grid-template-columns: 1fr; (starts single-column, big touch targets){{/unless}}{{#if wideOverride}}@media (min-width: 640px) override: {{columns}} columns{{/if}}</p>\n</div>\n<style>\n.rsp-mf-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430; }\n.rsp-mf-label { margin: 0 0 8px; font-weight: 600; }\n.rsp-mf-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }\n.rsp-mf-grid span { height: 44px; border-radius: 8px; }\n.rsp-mf-grid--wide { grid-template-columns: repeat(var(--cols), 1fr); }\n.rsp-mf-code { margin: 10px 0 0; font-family: ui-monospace, monospace; font-size: 10px; color: #241430aa; }\n</style>", "tailwind": "<div class=\"w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]\">\n <p class=\"m-0 mb-2 font-semibold\">{{label}}</p>\n <div class=\"tw-mf-grid{{#if wideOverride}} tw-mf-wide{{/if}} grid grid-cols-1 gap-2\" style=\"--cols:{{columns}};\">\n <span class=\"h-11 rounded-lg\" style=\"background:{{accent}};\"></span><span class=\"h-11 rounded-lg\" style=\"background:{{accent}};\"></span><span class=\"h-11 rounded-lg\" style=\"background:{{accent}};\"></span>\n </div>\n <p class=\"mt-2.5 font-mono text-[10px] text-[#241430]/70\">{{#unless wideOverride}}base: grid-template-columns: 1fr; (starts single-column, big touch targets){{/unless}}{{#if wideOverride}}@media (min-width: 640px) override: {{columns}} columns{{/if}}</p>\n</div>\n<style>\n.tw-mf-wide { grid-template-columns: repeat(var(--cols), 1fr); }\n</style>", "react": "export function MobileFirst({\n wideOverride = {{wideOverride}},\n columns = {{columns}},\n label = \"{{label}}\",\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ width: \"100%\", maxWidth: 320, padding: 16, background: \"#FAF7F2\", border: \"1px solid #24143022\", borderRadius: 12, fontFamily: \"system-ui, sans-serif\", fontSize: 12, color: \"#241430\" }}>\n <p style={{ margin: \"0 0 8px\", fontWeight: 600 }}>{label}</p>\n <div style={{ display: \"grid\", gap: 8, gridTemplateColumns: wideOverride ? `repeat(${columns}, 1fr)` : \"1fr\" }}>\n <span style={{ height: 44, borderRadius: 8, background: accent }} />\n <span style={{ height: 44, borderRadius: 8, background: accent }} />\n <span style={{ height: 44, borderRadius: 8, background: accent }} />\n </div>\n <p style={{ margin: \"10px 0 0\", fontFamily: \"ui-monospace, monospace\", fontSize: 10, color: \"#241430aa\" }}>\n {wideOverride ? `@media (min-width: 640px) override: ${columns} columns` : \"base: grid-template-columns: 1fr; (starts single-column, big touch targets)\"}\n </p>\n </div>\n );\n}" }