About this plugin
Fluid Space Forge is a professional WordPress plugin that generates responsive spacing systems using modern CSS clamp() functions. Create consistent, scalable margins, padding, and gaps that adapt beautifully from mobile to desktop.
Why Fluid Space Forge?
- Responsive Spacing – Generate CSS clamp() functions for fluid spacing across all device sizes
- Three Output Formats – Choose between CSS Classes, CSS Custom Properties, or Tailwind-style Utilities
- Live Preview – See your spacing at different screen sizes in real-time
- Drag & Drop – Reorder your spacing scale with intuitive drag-and-drop interface
- Mathematical Scaling – Use proven typographic ratios (Minor Second, Major Third, Perfect Fourth, etc.)
- Dual Units – Full support for both px and rem units
- Autosave – Automatic saving with manual save option for complete control
- Export Ready – Copy generated CSS code with one click
Perfect Companion
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.
Output Formats
CSS Classes
Generate margin, padding, and gap classes:
2vw), 1rem); }
75rem); }
5rem); }
CSS Custom Properties
Create reusable CSS variables:
:root {
2vw), 1rem);
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(…); }
Key Features
- Customizable Spacing Scale – Add, edit, remove, and reorder spacing sizes
- Base Value System – Calculate relative spacing from any size in your scale
- Musical Ratios – Use proven scaling ratios: 1.067, 1.125, 1.200, 1.250, 1.333
- Visual Feedback – Live preview showing spacing at min and max viewport widths
- Modal Editing – Clean interface for editing size names and properties
- Professional UI – Beautiful, intuitive admin interface with drag-and-drop support
- WordPress Integration – Located in Tools menu for easy access
Use Cases
- Building responsive WordPress themes
- Creating design system components
- Establishing spacing tokens for custom blocks
- Maintaining consistent spacing across projects
- Developing fluid, accessible layouts
Browser Support
CSS clamp() is supported in all modern browsers:
* Chrome 79+
* Firefox 75+
1+
* Edge 79+
Additional Information
Credits
- Developer: Jim R. – JimRForge.com
- Development Assistant: Claude AI by Anthropic
Support
- Documentation:
- User’s Guide – Complete reference documentation
- Quick Start – Get started in 5 minutes
- GitHub Repository
- Issues: Report bugs via GitHub Issues
- Website: JimRForge.com
Privacy
This plugin does not collect, store, or transmit any user data. All calculations and settings are stored locally in your WordPress database.
Contributing
Contributions are welcome! Visit the GitHub repository to contribute to the project.