Fluid Space Forge

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:
.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(…); }

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+
* Safari 13.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.

Automatic Installation

1. Log into your WordPress admin panel
2. Navigate to Plugins → Add New
3. Search for “Fluid Space Forge”
4. Click “Install Now” and then “Activate”
5. Access the plugin via Tools → Fluid Space Forge

Manual Installation

1. Download the plugin zip file
2. Log into your WordPress admin panel
3. Navigate to Plugins → Add New → Upload Plugin
4. Choose the downloaded zip file and click “Install Now”
5. Click “Activate Plugin”
6. Access via Tools → Fluid Space Forge

After Activation

1. Navigate to Tools → Fluid Space Forge in your WordPress admin
2. Configure your base spacing values and viewport range in the Settings panel
3. Choose your output format: Classes, Variables, or Utilities
4. Customize your spacing scale by adding, editing, or reordering sizes
5. Preview your spacing at different screen sizes
6. Copy the generated CSS code and add it to your theme

1. 

   Main admin interface showing the Classes tab with spacing scale editor

2. 

   CSS Custom Properties (Variables) output format

3. 

   Tailwind-style Utilities with margin, padding, and gap classes

4. 

   Live preview showing spacing at different screen sizes

1.2.4 – 2025-11-21

• Fixed: Modal button colors – cancel button now slate gray with white text, confirm button gold
• Fixed: Reset functionality now properly resets base to “md” and prefixes per tab
• Fixed: Settings Reset now uses Perfect Fourth (1.333) as default Max Scale
• Added: New secondary button CSS class for modal dialogs

1.2.3 – 2025-11-20

• UI Improvements: Removed decorative icons from all panel headers for cleaner appearance
• UI Improvements: Updated tab button font size to 16px for better readability
• UI Improvements: Reorganized Community panel with Documentation section (User’s Guide and Quick Start)
• Critical Fix: Fixed uninstall.php to use correct Space Forge constants (was using Font Forge constants)
• Critical Fix: Added PHPCS ignore comments for intentional direct database queries
• Critical Fix: Resolved all WordPress Plugin Checker warnings
• Documentation: Enhanced Support section with direct links to User’s Guide and Quick Start

1.2.2 – 2025-11-08

• Fixed: WordPress.org compliance – replaced inline script tag with wp_add_inline_script()
• Fixed: All JavaScript now properly enqueued using WordPress standards
• Resolves WordPress.org plugin review feedback from November 5, 2025

1.2.1 – 2025-10-29

• Initial WordPress.org release with compliance updates

1.0 (2025-01-06)

• Initial release
• Generate responsive spacing using CSS clamp() functions
• Three output formats: Classes, CSS Variables, and Utility classes
• Drag and drop reordering of spacing sizes
• Autosave functionality with visual status indicators
• Live preview showing spacing at min and max viewport widths
• Modal dialog for editing and adding spacing sizes
• Musical harmony scale ratios for consistent spacing progression
• Support for both pixel and rem units
• Base value selector for relative spacing calculations
• Classes tab generates margin, padding, and gap variants
• Utilities tab includes Tailwind-style margin, padding, and gap utilities
• Professional admin UI with organized CSS and modular JavaScript
• Plugin located in WordPress Tools menu