Created
February 26, 2026 05:32
-
-
Save vapvarun/99f777dd8f057f387bb8e1f4c6098823 to your computer and use it in GitHub Desktop.
Fluid Typography and Spacing with theme.json for Block Themes (brndle.com)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| clamp(minimum, preferred, maximum) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| font-size: clamp(1rem, 0.5rem + 1.5vw, 2.25rem); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| preferred = (minimum_rem) + (maximum_rem - minimum_rem) * ((100vw - min_viewport) / (max_viewport - min_viewport)) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Traditional media query approach */ | |
| h1 { font-size: 1.5rem; } | |
| @media (min-width: 600px) { | |
| h1 { font-size: 2rem; } | |
| } | |
| @media (min-width: 900px) { | |
| h1 { font-size: 2.5rem; } | |
| } | |
| @media (min-width: 1200px) { | |
| h1 { font-size: 3rem; } | |
| } | |
| /* Fluid approach — one line */ | |
| h1 { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://schemas.wp.org/wp/6.8/theme.json", | |
| "version": 3, | |
| "settings": { | |
| "typography": { | |
| "fluid": true | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "settings": { | |
| "typography": { | |
| "fluid": { | |
| "minViewportWidth": "320px", | |
| "maxViewportWidth": "1440px" | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "settings": { | |
| "typography": { | |
| "fluid": true, | |
| "fontSizes": [ | |
| { | |
| "slug": "small", | |
| "size": "0.875rem", | |
| "name": "Small", | |
| "fluid": { | |
| "min": "0.813rem", | |
| "max": "0.875rem" | |
| } | |
| }, | |
| { | |
| "slug": "medium", | |
| "size": "1rem", | |
| "name": "Medium", | |
| "fluid": { | |
| "min": "0.938rem", | |
| "max": "1rem" | |
| } | |
| }, | |
| { | |
| "slug": "large", | |
| "size": "1.5rem", | |
| "name": "Large", | |
| "fluid": { | |
| "min": "1.25rem", | |
| "max": "1.5rem" | |
| } | |
| }, | |
| { | |
| "slug": "x-large", | |
| "size": "2.25rem", | |
| "name": "Extra Large", | |
| "fluid": { | |
| "min": "1.5rem", | |
| "max": "2.25rem" | |
| } | |
| }, | |
| { | |
| "slug": "xx-large", | |
| "size": "3.75rem", | |
| "name": "Huge", | |
| "fluid": { | |
| "min": "2.25rem", | |
| "max": "3.75rem" | |
| } | |
| } | |
| ] | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Generated CSS custom properties */ | |
| body { | |
| --wp--preset--font-size--small: clamp(0.813rem, 0.793rem + 0.074vw, 0.875rem); | |
| --wp--preset--font-size--medium: clamp(0.938rem, 0.918rem + 0.074vw, 1rem); | |
| --wp--preset--font-size--large: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); | |
| --wp--preset--font-size--x-large: clamp(1.5rem, 1.05rem + 1.8vw, 2.25rem); | |
| --wp--preset--font-size--xx-large: clamp(2.25rem, 1.35rem + 3.6vw, 3.75rem); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "slug": "caption", | |
| "size": "0.75rem", | |
| "name": "Caption", | |
| "fluid": false | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "settings": { | |
| "spacing": { | |
| "spacingSizes": [ | |
| { | |
| "slug": "20", | |
| "size": "0.5rem", | |
| "name": "2X-Small", | |
| "fluid": { | |
| "min": "0.375rem", | |
| "max": "0.5rem" | |
| } | |
| }, | |
| { | |
| "slug": "30", | |
| "size": "0.75rem", | |
| "name": "X-Small", | |
| "fluid": { | |
| "min": "0.5rem", | |
| "max": "0.75rem" | |
| } | |
| }, | |
| { | |
| "slug": "40", | |
| "size": "1.25rem", | |
| "name": "Small", | |
| "fluid": { | |
| "min": "0.875rem", | |
| "max": "1.25rem" | |
| } | |
| }, | |
| { | |
| "slug": "50", | |
| "size": "2rem", | |
| "name": "Medium", | |
| "fluid": { | |
| "min": "1.25rem", | |
| "max": "2rem" | |
| } | |
| }, | |
| { | |
| "slug": "60", | |
| "size": "3rem", | |
| "name": "Large", | |
| "fluid": { | |
| "min": "1.75rem", | |
| "max": "3rem" | |
| } | |
| }, | |
| { | |
| "slug": "70", | |
| "size": "4.5rem", | |
| "name": "X-Large", | |
| "fluid": { | |
| "min": "2.5rem", | |
| "max": "4.5rem" | |
| } | |
| }, | |
| { | |
| "slug": "80", | |
| "size": "7rem", | |
| "name": "2X-Large", | |
| "fluid": { | |
| "min": "3.75rem", | |
| "max": "7rem" | |
| } | |
| } | |
| ] | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| --wp--preset--spacing--20: clamp(0.375rem, 0.3rem + 0.3vw, 0.5rem); | |
| --wp--preset--spacing--30: clamp(0.5rem, 0.35rem + 0.6vw, 0.75rem); | |
| --wp--preset--spacing--40: clamp(0.875rem, 0.65rem + 0.9vw, 1.25rem); | |
| --wp--preset--spacing--50: clamp(1.25rem, 0.8rem + 1.8vw, 2rem); | |
| --wp--preset--spacing--60: clamp(1.75rem, 1rem + 3vw, 3rem); | |
| --wp--preset--spacing--70: clamp(2.5rem, 1.3rem + 4.8vw, 4.5rem); | |
| --wp--preset--spacing--80: clamp(3.75rem, 1.8rem + 7.8vw, 7rem); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "styles": { | |
| "spacing": { | |
| "blockGap": "var:preset|spacing|50", | |
| "padding": { | |
| "top": "var:preset|spacing|50", | |
| "right": "var:preset|spacing|40", | |
| "bottom": "var:preset|spacing|50", | |
| "left": "var:preset|spacing|40" | |
| } | |
| }, | |
| "blocks": { | |
| "core/group": { | |
| "spacing": { | |
| "padding": { | |
| "top": "var:preset|spacing|60", | |
| "right": "var:preset|spacing|50", | |
| "bottom": "var:preset|spacing|60", | |
| "left": "var:preset|spacing|50" | |
| } | |
| } | |
| }, | |
| "core/columns": { | |
| "spacing": { | |
| "blockGap": "var:preset|spacing|40" | |
| } | |
| }, | |
| "core/post-content": { | |
| "spacing": { | |
| "blockGap": "var:preset|spacing|40" | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "settings": { | |
| "layout": { | |
| "contentSize": "720px", | |
| "wideSize": "1200px" | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "settings": { | |
| "layout": { | |
| "contentSize": "720px", | |
| "wideSize": "1200px" | |
| }, | |
| "useRootPaddingAwareAlignments": true | |
| }, | |
| "styles": { | |
| "spacing": { | |
| "padding": { | |
| "top": "0", | |
| "right": "var:preset|spacing|50", | |
| "bottom": "0", | |
| "left": "var:preset|spacing|50" | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "styles": { | |
| "blocks": { | |
| "core/post-content": { | |
| "dimensions": { | |
| "minHeight": "" | |
| }, | |
| "spacing": { | |
| "blockGap": "var:preset|spacing|40" | |
| } | |
| }, | |
| "core/group": { | |
| "spacing": { | |
| "blockGap": "var:preset|spacing|40" | |
| } | |
| }, | |
| "core/cover": { | |
| "spacing": { | |
| "padding": { | |
| "top": "var:preset|spacing|70", | |
| "right": "var:preset|spacing|50", | |
| "bottom": "var:preset|spacing|70", | |
| "left": "var:preset|spacing|50" | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Step 1: Declare the containment context */ | |
| .wp-block-column { | |
| container-type: inline-size; | |
| container-name: column-block; | |
| } | |
| /* Step 2: Write rules based on container width */ | |
| @container column-block (max-width: 400px) { | |
| .wp-block-column .wp-block-heading { | |
| font-size: 1.25rem; | |
| } | |
| .wp-block-column .wp-block-paragraph { | |
| font-size: 0.9rem; | |
| } | |
| } | |
| @container column-block (min-width: 401px) and (max-width: 700px) { | |
| .wp-block-column .wp-block-heading { | |
| font-size: 1.75rem; | |
| } | |
| } | |
| @container column-block (min-width: 701px) { | |
| .wp-block-column .wp-block-heading { | |
| font-size: 2.25rem; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .wp-block-column { | |
| container-type: inline-size; | |
| } | |
| .wp-block-column .wp-block-heading { | |
| font-size: clamp(1.125rem, 0.75rem + 3cqi, 2.25rem); | |
| } | |
| .wp-block-column .wp-block-paragraph { | |
| font-size: clamp(0.875rem, 0.8rem + 1cqi, 1.125rem); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* style.css — Container-responsive query loop */ | |
| .wp-block-query { | |
| container-type: inline-size; | |
| container-name: query-loop; | |
| } | |
| /* Single column layout when container is narrow */ | |
| @container query-loop (max-width: 500px) { | |
| .wp-block-post-template { | |
| grid-template-columns: 1fr; | |
| gap: var(--wp--preset--spacing--30); | |
| } | |
| .wp-block-post-title { | |
| font-size: clamp(1rem, 0.9rem + 1.5cqi, 1.5rem); | |
| } | |
| .wp-block-post-excerpt { | |
| display: none; | |
| } | |
| } | |
| /* Two column layout for medium containers */ | |
| @container query-loop (min-width: 501px) and (max-width: 900px) { | |
| .wp-block-post-template { | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: var(--wp--preset--spacing--40); | |
| } | |
| .wp-block-post-title { | |
| font-size: clamp(1.125rem, 1rem + 1cqi, 1.75rem); | |
| } | |
| } | |
| /* Three column layout for wide containers */ | |
| @container query-loop (min-width: 901px) { | |
| .wp-block-post-template { | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--wp--preset--spacing--50); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://schemas.wp.org/wp/6.8/theme.json", | |
| "version": 3, | |
| "settings": { | |
| "appearanceTools": true, | |
| "useRootPaddingAwareAlignments": true, | |
| "layout": { | |
| "contentSize": "720px", | |
| "wideSize": "1200px" | |
| }, | |
| "typography": { | |
| "fluid": { | |
| "minViewportWidth": "375px", | |
| "maxViewportWidth": "1440px" | |
| }, | |
| "fontFamilies": [ | |
| { | |
| "slug": "system", | |
| "name": "System", | |
| "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif" | |
| }, | |
| { | |
| "slug": "monospace", | |
| "name": "Monospace", | |
| "fontFamily": "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace" | |
| } | |
| ], | |
| "fontSizes": [ | |
| { | |
| "slug": "small", | |
| "size": "0.875rem", | |
| "name": "Small", | |
| "fluid": { | |
| "min": "0.813rem", | |
| "max": "0.875rem" | |
| } | |
| }, | |
| { | |
| "slug": "medium", | |
| "size": "1rem", | |
| "name": "Medium", | |
| "fluid": { | |
| "min": "0.938rem", | |
| "max": "1rem" | |
| } | |
| }, | |
| { | |
| "slug": "large", | |
| "size": "1.25rem", | |
| "name": "Large", | |
| "fluid": { | |
| "min": "1.063rem", | |
| "max": "1.25rem" | |
| } | |
| }, | |
| { | |
| "slug": "x-large", | |
| "size": "1.75rem", | |
| "name": "X-Large", | |
| "fluid": { | |
| "min": "1.313rem", | |
| "max": "1.75rem" | |
| } | |
| }, | |
| { | |
| "slug": "xx-large", | |
| "size": "2.5rem", | |
| "name": "2X-Large", | |
| "fluid": { | |
| "min": "1.75rem", | |
| "max": "2.5rem" | |
| } | |
| }, | |
| { | |
| "slug": "xxx-large", | |
| "size": "3.75rem", | |
| "name": "3X-Large", | |
| "fluid": { | |
| "min": "2.25rem", | |
| "max": "3.75rem" | |
| } | |
| }, | |
| { | |
| "slug": "caption", | |
| "size": "0.75rem", | |
| "name": "Caption", | |
| "fluid": false | |
| } | |
| ], | |
| "lineHeight": true, | |
| "letterSpacing": true | |
| }, | |
| "spacing": { | |
| "units": ["px", "rem", "em", "%", "vw"], | |
| "spacingSizes": [ | |
| { | |
| "slug": "20", | |
| "size": "0.5rem", | |
| "name": "2X-Small", | |
| "fluid": { | |
| "min": "0.375rem", | |
| "max": "0.5rem" | |
| } | |
| }, | |
| { | |
| "slug": "30", | |
| "size": "0.75rem", | |
| "name": "X-Small", | |
| "fluid": { | |
| "min": "0.5rem", | |
| "max": "0.75rem" | |
| } | |
| }, | |
| { | |
| "slug": "40", | |
| "size": "1.25rem", | |
| "name": "Small", | |
| "fluid": { | |
| "min": "0.875rem", | |
| "max": "1.25rem" | |
| } | |
| }, | |
| { | |
| "slug": "50", | |
| "size": "2rem", | |
| "name": "Medium", | |
| "fluid": { | |
| "min": "1.25rem", | |
| "max": "2rem" | |
| } | |
| }, | |
| { | |
| "slug": "60", | |
| "size": "3rem", | |
| "name": "Large", | |
| "fluid": { | |
| "min": "1.75rem", | |
| "max": "3rem" | |
| } | |
| }, | |
| { | |
| "slug": "70", | |
| "size": "4.5rem", | |
| "name": "X-Large", | |
| "fluid": { | |
| "min": "2.5rem", | |
| "max": "4.5rem" | |
| } | |
| }, | |
| { | |
| "slug": "80", | |
| "size": "7rem", | |
| "name": "2X-Large", | |
| "fluid": { | |
| "min": "3.75rem", | |
| "max": "7rem" | |
| } | |
| } | |
| ] | |
| }, | |
| "color": { | |
| "palette": [ | |
| { "slug": "primary", "color": "#1a1a2e", "name": "Primary" }, | |
| { "slug": "secondary", "color": "#16213e", "name": "Secondary" }, | |
| { "slug": "accent", "color": "#e94560", "name": "Accent" }, | |
| { "slug": "surface", "color": "#f8f9fa", "name": "Surface" }, | |
| { "slug": "text", "color": "#1a1a2e", "name": "Text" }, | |
| { "slug": "text-muted", "color": "#6c757d", "name": "Muted Text" }, | |
| { "slug": "white", "color": "#ffffff", "name": "White" } | |
| ] | |
| } | |
| }, | |
| "styles": { | |
| "color": { | |
| "background": "var:preset|color|white", | |
| "text": "var:preset|color|text" | |
| }, | |
| "typography": { | |
| "fontFamily": "var:preset|font-family|system", | |
| "fontSize": "var:preset|font-size|medium", | |
| "lineHeight": "1.65" | |
| }, | |
| "spacing": { | |
| "blockGap": "var:preset|spacing|40", | |
| "padding": { | |
| "top": "0", | |
| "right": "var:preset|spacing|50", | |
| "bottom": "0", | |
| "left": "var:preset|spacing|50" | |
| } | |
| }, | |
| "elements": { | |
| "heading": { | |
| "typography": { | |
| "fontWeight": "700", | |
| "lineHeight": "1.2" | |
| }, | |
| "color": { | |
| "text": "var:preset|color|primary" | |
| } | |
| }, | |
| "h1": { | |
| "typography": { | |
| "fontSize": "var:preset|font-size|xxx-large" | |
| } | |
| }, | |
| "h2": { | |
| "typography": { | |
| "fontSize": "var:preset|font-size|xx-large" | |
| }, | |
| "spacing": { | |
| "margin": { | |
| "top": "var:preset|spacing|60" | |
| } | |
| } | |
| }, | |
| "h3": { | |
| "typography": { | |
| "fontSize": "var:preset|font-size|x-large" | |
| }, | |
| "spacing": { | |
| "margin": { | |
| "top": "var:preset|spacing|50" | |
| } | |
| } | |
| }, | |
| "h4": { | |
| "typography": { | |
| "fontSize": "var:preset|font-size|large" | |
| } | |
| }, | |
| "link": { | |
| "color": { | |
| "text": "var:preset|color|accent" | |
| }, | |
| ":hover": { | |
| "color": { | |
| "text": "var:preset|color|primary" | |
| } | |
| } | |
| } | |
| }, | |
| "blocks": { | |
| "core/group": { | |
| "spacing": { | |
| "blockGap": "var:preset|spacing|40" | |
| } | |
| }, | |
| "core/columns": { | |
| "spacing": { | |
| "blockGap": "var:preset|spacing|40" | |
| } | |
| }, | |
| "core/post-content": { | |
| "spacing": { | |
| "blockGap": "var:preset|spacing|40" | |
| } | |
| }, | |
| "core/cover": { | |
| "spacing": { | |
| "padding": { | |
| "top": "var:preset|spacing|70", | |
| "right": "var:preset|spacing|50", | |
| "bottom": "var:preset|spacing|70", | |
| "left": "var:preset|spacing|50" | |
| } | |
| } | |
| }, | |
| "core/code": { | |
| "typography": { | |
| "fontFamily": "var:preset|font-family|monospace", | |
| "fontSize": "var:preset|font-size|small" | |
| }, | |
| "color": { | |
| "background": "var:preset|color|surface" | |
| }, | |
| "spacing": { | |
| "padding": { | |
| "top": "var:preset|spacing|40", | |
| "right": "var:preset|spacing|40", | |
| "bottom": "var:preset|spacing|40", | |
| "left": "var:preset|spacing|40" | |
| } | |
| }, | |
| "border": { | |
| "radius": "4px" | |
| } | |
| }, | |
| "core/separator": { | |
| "color": { | |
| "text": "var:preset|color|surface" | |
| }, | |
| "border": { | |
| "width": "1px" | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(el => { | |
| const computed = window.getComputedStyle(el); | |
| console.log( | |
| `${el.tagName}: ${computed.fontSize} (${parseFloat(computed.fontSize) / 16}rem)`, | |
| `| line-height: ${computed.lineHeight}`, | |
| `| text: "${el.textContent.substring(0, 40)}..."` | |
| ); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* BAD — minimum too small for body text */ | |
| { | |
| "slug": "medium", | |
| "size": "1rem", | |
| "fluid": { | |
| "min": "0.75rem", /* 12px — too small to read comfortably */ | |
| "max": "1rem" | |
| } | |
| } | |
| /* GOOD — readable minimum */ | |
| { | |
| "slug": "medium", | |
| "size": "1rem", | |
| "fluid": { | |
| "min": "0.938rem", /* 15px — comfortable on mobile */ | |
| "max": "1rem" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* BAD — inconsistent ratios at min vs max */ | |
| small: min 0.813rem → max 0.875rem (ratio: 1.08) | |
| medium: min 0.938rem → max 1rem (ratio: 1.15 to small min — off scale) | |
| large: min 1.1rem → max 1.5rem (ratio: 1.17 to medium min — different) | |
| x-large: min 1.8rem → max 2.25rem (ratio: 1.64 to large min — way off) | |
| /* GOOD — consistent 1.2 ratio at both min and max */ | |
| small: min 0.833rem → max 0.889rem | |
| medium: min 1rem → max 1.067rem | |
| large: min 1.2rem → max 1.28rem | |
| x-large: min 1.44rem → max 1.536rem | |
| xx-large: min 1.728rem → max 1.843rem |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* BAD — 10x ratio between min and max */ | |
| { | |
| "slug": "80", | |
| "size": "10rem", | |
| "fluid": { | |
| "min": "1rem", /* Basically no spacing on mobile */ | |
| "max": "10rem" /* Huge gap on desktop */ | |
| } | |
| } | |
| /* GOOD — 2x ratio, perceptually balanced */ | |
| { | |
| "slug": "80", | |
| "size": "7rem", | |
| "fluid": { | |
| "min": "3.75rem", /* Noticeable but not cramped */ | |
| "max": "7rem" /* Generous but not wasteful */ | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "slug": "large", | |
| "size": "1.5rem", /* Fallback = max value */ | |
| "fluid": { | |
| "min": "1.25rem", | |
| "max": "1.5rem" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Type scale with 1.25 (Major Third) ratio */ | |
| Base: 1rem (16px) → min: 0.938rem (15px) | |
| Large: 1.25rem (20px) → min: 1.063rem (17px) | |
| X-Large: 1.563rem (25px) → min: 1.25rem (20px) | |
| XX-Large: 1.953rem (31px) → min: 1.5rem (24px) | |
| XXX-Large:2.441rem (39px) → min: 1.75rem (28px) | |
| Display: 3.052rem (49px) → min: 2.125rem (34px) | |
| /* Spacing scale — derived from base font size multiples */ | |
| XS: 0.5 × base = 0.5rem → min: 0.375rem | |
| S: 1 × base = 1rem → min: 0.75rem | |
| M: 1.5 × base = 1.5rem → min: 1rem | |
| L: 2.5 × base = 2.5rem → min: 1.5rem | |
| XL: 4 × base = 4rem → min: 2.25rem | |
| XXL: 6 × base = 6rem → min: 3.5rem |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "styles": { | |
| "elements": { | |
| "h1": { "typography": { "fontSize": "var:preset|font-size|xxx-large" } }, | |
| "h2": { "typography": { "fontSize": "var:preset|font-size|xx-large" } }, | |
| "h3": { "typography": { "fontSize": "var:preset|font-size|x-large" } } | |
| }, | |
| "blocks": { | |
| "core/quote": { | |
| "typography": { "fontSize": "var:preset|font-size|large" }, | |
| "spacing": { | |
| "padding": { | |
| "left": "var:preset|spacing|40" | |
| } | |
| } | |
| }, | |
| "core/pullquote": { | |
| "typography": { "fontSize": "var:preset|font-size|xx-large" } | |
| }, | |
| "core/verse": { | |
| "typography": { "fontSize": "var:preset|font-size|large" } | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- wp:group {"layout":{"type":"constrained"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","right":"var:preset|spacing|50","left":"var:preset|spacing|50"}}}} --> | |
| <div class="wp-block-group"> | |
| <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} --> | |
| <div class="wp-block-group"> | |
| <!-- wp:site-title {"style":{"typography":{"fontSize":"var:preset|font-size|x-large"}}} /--> | |
| <!-- wp:navigation {"fontSize":"small"} /--> | |
| </div> | |
| <!-- /wp:group --> | |
| </div> | |
| <!-- /wp:group --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- wp:cover {"dimRatio":60,"overlayColor":"primary","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}}} --> | |
| <div class="wp-block-cover"> | |
| <span class="wp-block-cover__background has-primary-background-color has-background-dim-60 has-background-dim"></span> | |
| <div class="wp-block-cover__inner-container"> | |
| <!-- wp:heading {"textAlign":"center","level":1,"style":{"typography":{"fontSize":"var:preset|font-size|xxx-large"}},"textColor":"white"} --> | |
| <h1 class="has-text-align-center has-white-color has-text-color" style="font-size:var(--wp--preset--font-size--xxx-large)">Build Stunning Block Themes</h1> | |
| <!-- /wp:heading --> | |
| <!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"var:preset|font-size|large"}},"textColor":"white"} --> | |
| <p class="has-text-align-center has-white-color has-text-color" style="font-size:var(--wp--preset--font-size--large)">Create responsive, accessible themes using the power of Full Site Editing.</p> | |
| <!-- /wp:paragraph --> | |
| </div> | |
| </div> | |
| <!-- /wp:cover --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Fluid border radius — sharper on mobile, rounder on desktop */ | |
| :root { | |
| --fluid-radius-sm: clamp(4px, 2px + 0.3vw, 8px); | |
| --fluid-radius-md: clamp(8px, 4px + 0.6vw, 16px); | |
| --fluid-radius-lg: clamp(12px, 6px + 1vw, 24px); | |
| } | |
| .wp-block-image img { | |
| border-radius: var(--fluid-radius-md); | |
| } | |
| .wp-block-button__link { | |
| border-radius: var(--fluid-radius-sm); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Custom fluid gap for post grid patterns */ | |
| .wp-block-post-template.is-layout-grid { | |
| gap: clamp(1rem, 0.5rem + 1.5vw, 2.5rem); | |
| } | |
| /* Fluid column gap that adapts to container */ | |
| .wp-block-columns { | |
| container-type: inline-size; | |
| } | |
| @container (max-width: 600px) { | |
| .wp-block-columns { | |
| gap: var(--wp--preset--spacing--30); | |
| } | |
| } | |
| @container (min-width: 601px) { | |
| .wp-block-columns { | |
| gap: var(--wp--preset--spacing--50); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Fluid left border on quote blocks */ | |
| .wp-block-quote { | |
| border-left-width: clamp(3px, 2px + 0.2vw, 5px); | |
| border-left-color: var(--wp--preset--color--accent); | |
| border-left-style: solid; | |
| } | |
| /* Fluid icon sizes in social links */ | |
| .wp-block-social-links .wp-social-link svg { | |
| width: clamp(1.25rem, 1rem + 0.5vw, 1.75rem); | |
| height: clamp(1.25rem, 1rem + 0.5vw, 1.75rem); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment