Jim Roberts

Fluid Space Forge is a professional WordPress plugin that generates responsive spacing systems using modern CSS <code>clamp()</code> functions. Create consistent, scalable margins, padding, and gaps that adapt beautifully from mobile to desktop.
<h4>Why Fluid Space Forge?</h4>
<ul>
<li>Responsive Spacing – Generate CSS <code>clamp()</code> functions for fluid spacing across all device sizes</li>
<li>Three Output Formats – Choose between CSS Classes, CSS Custom Properties, or Tailwind-style Utilities</li>
<li>Live Preview – See your spacing at different screen sizes in real-time</li>
<li>Drag & Drop – Reorder your spacing scale with intuitive drag-and-drop interface</li>
<li>Mathematical Scaling – Use proven typographic ratios (Minor Second, Major Third, Perfect Fourth, etc.)</li>
<li>Dual Units – Full support for both <code>px</code> and <code>rem</code> units</li>
<li>Autosave – Automatic saving with manual save option for complete control</li>
<li>Export Ready – Copy generated CSS code with one click</li>
</ul>
<h4>Perfect Companion</h4>
Fluid Space Forge is the perfect companion to Fluid Font Forge! While typography scales smoothly across devices, your spacing should too. Together, they create cohesive, responsive design systems that work beautifully on any screen size.
<h4>Output Formats</h4>
CSS Classes 
Generate margin, padding, and gap classes: 
 .space-m-lg { margin: clamp(0.75rem, calc(0.7rem + 0.2vw), 1rem); } 
 .space-p-md { padding: clamp(0.6rem, calc(0.55rem + 0.18vw), 0.75rem); } 
 .space-g-sm { gap: clamp(0.4rem, calc(0.35rem + 0.15vw), 0.5rem); }
CSS Custom Properties 
Create reusable CSS variables: 
 :root { 
 –space-lg: clamp(0.75rem, calc(0.7rem + 0.2vw), 1rem); 
 –space-md: clamp(0.6rem, calc(0.55rem + 0.18vw), 0.75rem); 
 }
Tailwind-style Utilities 
Generate complete utility class sets: 
 .mt-lg { margin-top: clamp(…); } 
 .px-md { padding-left: clamp(…); padding-right: clamp(…); } 
 .gap-y-sm { row-gap: clamp(…); }
<h4>Key Features</h4>
<ul>
<li>Customizable Spacing Scale – Add, edit, remove, and reorder spacing sizes</li>
<li>Base Value System – Calculate relative spacing from any size in your scale</li>
<li>Musical Ratios – Use proven scaling ratios: 1.067, 1.125, 1.200, 1.250, 1.333</li>
<li>Visual Feedback – Live preview showing spacing at min and max viewport widths</li>
<li>Modal Editing – Clean interface for editing size names and properties</li>
<li>Professional UI – Beautiful, intuitive admin interface with drag-and-drop support</li>
<li>WordPress Integration – Located in Tools menu for easy access</li>
</ul>
<h4>Use Cases</h4>
<ul>
<li>Building responsive WordPress themes</li>
<li>Creating design system components</li>
<li>Establishing spacing tokens for custom blocks</li>
<li>Maintaining consistent spacing across projects</li>
<li>Developing fluid, accessible layouts</li>
</ul>
<h4>Browser Support</h4>
CSS <code>clamp()</code> is supported in all modern browsers: 
* Chrome 79+ 
* Firefox 75+ 
* Safari 13.1+ 
* Edge 79+
<h3>Additional Information</h3>
<h4>Credits</h4>
<ul>
<li>Developer: Jim R. – <a href="https://jimrforge.com" rel="nofollow ugc">JimRForge.com</a></li>
<li>Development Assistant: Claude AI by Anthropic</li>
</ul>
<h4>Support</h4>
<ul>
<li>Documentation:
<ul>
<li><a href="https://github.com/Mij-Strebor/fluid-space-forge/blob/master/USER-MANUAL.md" rel="nofollow ugc">User’s Guide</a> – Complete reference documentation</li>
<li><a href="https://github.com/Mij-Strebor/fluid-space-forge/blob/master/QUICK-START.md" rel="nofollow ugc">Quick Start</a> – Get started in 5 minutes</li>
<li><a href="https://github.com/Mij-Strebor/fluid-space-forge" rel="nofollow ugc">GitHub Repository</a></li>
</ul>
</li>
<li>Issues: Report bugs via <a href="https://github.com/Mij-Strebor/fluid-space-forge/issues" rel="nofollow ugc">GitHub Issues</a></li>
<li>Website: <a href="https://jimrforge.com" rel="nofollow ugc">JimRForge.com</a></li>
</ul>
<h4>Privacy</h4>
This plugin does not collect, store, or transmit any user data. All calculations and settings are stored locally in your WordPress database.
<h4>Contributing</h4>
Contributions are welcome! Visit the <a href="https://github.com/Mij-Strebor/fluid-space-forge" rel="nofollow ugc">GitHub repository</a> to contribute to the project.

Fluid Space Forge

Generate responsive spacing systems using CSS clamp() functions. Perfect companion to Fluid Font Forge for creating fluid design systems.

Fluid Font Forge is a comprehensive WordPress plugin that simplifies responsive typography management. Generate CSS clamp() functions with mathematical precision for perfectly scaled fonts across all devices.
Key Features:
<ul>
<li>Real-time CSS clamp() generation – See your responsive font sizes calculated instantly</li>
<li>Skip entries for custom spacing – Exclude font sizes from CSS output while maintaining scale progression</li>
<li>Multiple output formats – CSS classes, custom properties, HTML tags, and Tailwind config</li>
<li>Interactive preview system – Visual comparison of font sizes at different viewport widths</li>
<li>Mathematical scaling ratios – Based on musical harmony principles (Major Second, Perfect Fourth, Golden Ratio, etc.)</li>
<li>Drag-and-drop size management – Reorder your font scale with intuitive interface</li>
<li>Custom font preview – Test with your actual web fonts using WOFF2 URLs</li>
<li>Copy-to-clipboard functionality – One-click CSS copying for immediate use</li>
<li>Professional admin interface – Clean, modern design that integrates seamlessly with WordPress</li>
</ul>
Perfect for: 
* Web designers creating responsive typography systems 
* Developers implementing fluid font scaling 
* Theme creators needing consistent font hierarchies 
* Anyone wanting professional typography without complex CSS calculations
Technical Highlights: 
* Uses CSS clamp() for true fluid scaling between viewport breakpoints 
* Supports both px and rem units with automatic conversion 
* Mathematical progression ensures consistent visual hierarchy 
* Accessibility-compliant with WCAG guidelines for readability 
* Clean, semantic CSS output ready for production use
Transform your typography workflow with Fluid Font Forge – where responsive design meets mathematical precision.
Accessibility Features:
<ul>
<li>WCAG 2.1 compliant interface</li>
<li>Keyboard navigation support</li>
<li>Screen reader friendly</li>
<li>High contrast mode compatible</li>
<li>Minimum font size recommendations for readability</li>
</ul>
<h4>Mathematical Ratios Explained</h4>
<ul>
<li>Minor Second (1.067): Subtle progression, ideal for dense content</li>
<li>Major Second (1.125): Gentle scaling for readable body text</li>
<li>Minor Third (1.200): Balanced hierarchy for most designs</li>
<li>Major Third (1.250): Clear distinction between sizes</li>
<li>Perfect Fourth (1.333): Strong contrast for headlines</li>
<li>Golden Ratio (1.618): Dramatic scaling for hero sections</li>
</ul>

Fluid Font Forge

Advanced fluid typography calculator with CSS clamp() generation for responsive font scaling across all device sizes.

Fluid Space Forge vs Fluid Font Forge