{"id":6665,"date":"2026-07-12T08:07:13","date_gmt":"2026-07-12T15:07:13","guid":{"rendered":"https:\/\/briangardner.com\/suede\/?page_id=6665"},"modified":"2026-07-12T08:07:13","modified_gmt":"2026-07-12T15:07:13","slug":"spacing-presets","status":"publish","type":"page","link":"https:\/\/briangardner.com\/suede\/docs\/spacing-presets\/","title":{"rendered":"Spacing Presets"},"content":{"rendered":"\n

Suede includes a carefully considered spacing scale that creates consistent rhythm and alignment throughout the theme. The following presets are available: 20, 30, 40, 60, 80, and 100.<\/p>\n\n\n\n

{\n\t\"settings\": {\n\t\t\"spacing\": {\n\t\t\t\"defaultSpacingSizes\": false,\n\t\t\t\"spacingSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"20\",\n\t\t\t\t\t\"size\": \"clamp(15px, 2vw, 20px)\",\n\t\t\t\t\t\"slug\": \"20\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"30\",\n\t\t\t\t\t\"size\": \"clamp(25px, 3vw, 30px)\",\n\t\t\t\t\t\"slug\": \"30\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"40\",\n\t\t\t\t\t\"size\": \"clamp(30px, 4vw, 40px)\",\n\t\t\t\t\t\"slug\": \"40\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"60\",\n\t\t\t\t\t\"size\": \"clamp(40px, 6vw, 60px)\",\n\t\t\t\t\t\"slug\": \"60\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"80\",\n\t\t\t\t\t\"size\": \"clamp(60px, 8vw, 80px)\",\n\t\t\t\t\t\"slug\": \"80\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"100\",\n\t\t\t\t\t\"size\": \"clamp(70px, 10vw, 100px)\",\n\t\t\t\t\t\"slug\": \"100\"\n\t\t\t\t}\n\t\t\t],\n\t\t\t\"units\": [ \"%\", \"px\", \"em\", \"rem\", \"vh\", \"vw\" ]\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n
This code yields a set of preset variables for spacing:<\/p>\n\n\n\n
--wp--preset--spacing--20: clamp(15px, 2vw, 20px);\n--wp--preset--spacing--30: clamp(25px, 3vw, 30px);\n--wp--preset--spacing--40: clamp(30px, 4vw, 40px);\n--wp--preset--spacing--60: clamp(40px, 6vw, 60px);\n--wp--preset--spacing--80: clamp(60px, 8vw, 80px);\n--wp--preset--spacing--100: clamp(70px, 10vw, 100px);\n<\/code><\/pre>\n\n\n\n
Fluid Spacing<\/h2>\n\n\n\n
Spacing values are defined in theme.json<\/strong> and use CSS clamp()<\/strong> to scale fluidly between minimum and maximum values. This approach preserves consistent proportions while adapting across different viewport sizes.<\/p>\n\n\n\n
Spacing 20<\/h3>\n\n\n\n
\n
This is a sample group with fluid spacing.<\/p>\n<\/div>\n\n\n\n
Spacing 30<\/h3>\n\n\n\n
\n
This is a sample group with fluid spacing.<\/p>\n<\/div>\n\n\n\n
Spacing 40<\/h3>\n\n\n\n
\n
This is a sample group with fluid spacing.<\/p>\n<\/div>\n\n\n\n
Spacing 60<\/h3>\n\n\n\n
\n
This is a sample group with fluid spacing.<\/p>\n<\/div>\n\n\n\n
Spacing 80<\/h3>\n\n\n\n
\n
This is a sample group with fluid spacing.<\/p>\n<\/div>\n\n\n\n
Spacing 100<\/h3>\n\n\n\n
\n
This is a sample group with fluid spacing.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Suede includes a carefully considered spacing scale that creates consistent rhythm and alignment throughout the theme. The following presets are available: 20, 30, 40, 60, 80, and 100. This code yields a set of preset variables for spacing: Fluid Spacing Spacing values are defined in theme.json and use CSS clamp() to scale fluidly between minimum […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":6655,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"simple_seo_seo_title":"Spacing Presets \u2013 Suede WordPress Theme","simple_seo_seo_description":"Explore the Suede spacing system, including fluid spacing presets and how they\u2019re defined in theme.json.","simple_seo_seo_robots":"","simple_seo_seo_canonical":"","simple_seo_seo_redirect":"","footnotes":""},"class_list":["post-6665","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/comments?post=6665"}],"version-history":[{"count":2,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6665\/revisions"}],"predecessor-version":[{"id":6667,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6665\/revisions\/6667"}],"up":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6655"}],"wp:attachment":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/media?parent=6665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}