{"id":258128,"date":"2025-11-22T19:32:44","date_gmt":"2025-11-22T19:32:44","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/fluid-space-forge\/"},"modified":"2025-11-22T19:31:42","modified_gmt":"2025-11-22T19:31:42","slug":"fluid-space-forge","status":"publish","type":"plugin","link":"https:\/\/bre.wordpress.org\/plugins\/fluid-space-forge\/","author":18266587,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.2.4","stable_tag":"1.2.4","tested":"6.8.5","requires":"5.0","requires_php":"7.4","requires_plugins":null,"header_name":"Fluid Space Forge","header_author":"Jim R.","header_description":"Generate responsive spacing using CSS clamp() functions. Perfect companion to Font Clamp Calculator for creating fluid design systems.","assets_banners_color":"4d402c","last_updated":"2025-11-22 19:31:42","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/buymeacoffee.com\/jimrweb","header_plugin_uri":"https:\/\/github.com\/Mij-Strebor\/fluid-space-forge","header_author_uri":"https:\/\/jimrforge.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":169,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.2.4":{"tag":"1.2.4","author":"mijstrebor","date":"2025-11-22 19:31:42"}},"upgrade_notice":{"1.0":"<p>Initial release of Fluid Space Forge. Start creating responsive spacing systems today!<\/p>"},"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3401072,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3401072,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3401072,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.2.4"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3401072,"resolution":"1","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3401072,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":3401072,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":3401072,"resolution":"4","location":"assets","locale":""}},"screenshots":{"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","5":"Settings panel for configuring base values and viewport range","6":"Modal dialog for editing spacing size names","7":"Drag and drop interface for reordering spacing scale"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[249307,356,215460,606,24137],"plugin_category":[59],"plugin_contributors":[249308],"plugin_business_model":[],"class_list":["post-258128","plugin","type-plugin","status-publish","hentry","plugin_tags-clamp","plugin_tags-css","plugin_tags-design-system","plugin_tags-responsive","plugin_tags-spacing","plugin_category-utilities-and-tools","plugin_contributors-mijstrebor","plugin_committers-mijstrebor"],"banners":{"banner":"https:\/\/ps.w.org\/fluid-space-forge\/assets\/banner-772x250.png?rev=3401072","banner_2x":"https:\/\/ps.w.org\/fluid-space-forge\/assets\/banner-1544x500.png?rev=3401072","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/fluid-space-forge\/assets\/icon-256x256.png?rev=3401072","icon_2x":"https:\/\/ps.w.org\/fluid-space-forge\/assets\/icon-256x256.png?rev=3401072","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/fluid-space-forge\/assets\/screenshot-1.png?rev=3401072","caption":"Main admin interface showing the Classes tab with spacing scale editor"},{"src":"https:\/\/ps.w.org\/fluid-space-forge\/assets\/screenshot-2.jpg?rev=3401072","caption":"CSS Custom Properties (Variables) output format"},{"src":"https:\/\/ps.w.org\/fluid-space-forge\/assets\/screenshot-3.jpg?rev=3401072","caption":"Tailwind-style Utilities with margin, padding, and gap classes"},{"src":"https:\/\/ps.w.org\/fluid-space-forge\/assets\/screenshot-4.jpg?rev=3401072","caption":"Live preview showing spacing at different screen sizes"}],"raw_content":"<!--section=description-->\n<p><strong>Fluid Space Forge<\/strong> 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.<\/p>\n\n<h4>Why Fluid Space Forge?<\/h4>\n\n<ul>\n<li><strong>Responsive Spacing<\/strong> - Generate CSS <code>clamp()<\/code> functions for fluid spacing across all device sizes<\/li>\n<li><strong>Three Output Formats<\/strong> - Choose between CSS Classes, CSS Custom Properties, or Tailwind-style Utilities<\/li>\n<li><strong>Live Preview<\/strong> - See your spacing at different screen sizes in real-time<\/li>\n<li><strong>Drag &amp; Drop<\/strong> - Reorder your spacing scale with intuitive drag-and-drop interface<\/li>\n<li><strong>Mathematical Scaling<\/strong> - Use proven typographic ratios (Minor Second, Major Third, Perfect Fourth, etc.)<\/li>\n<li><strong>Dual Units<\/strong> - Full support for both <code>px<\/code> and <code>rem<\/code> units<\/li>\n<li><strong>Autosave<\/strong> - Automatic saving with manual save option for complete control<\/li>\n<li><strong>Export Ready<\/strong> - Copy generated CSS code with one click<\/li>\n<\/ul>\n\n<h4>Perfect Companion<\/h4>\n\n<p>Fluid Space Forge is the perfect companion to <strong>Fluid Font Forge<\/strong>! While typography scales smoothly across devices, your spacing should too. Together, they create cohesive, responsive design systems that work beautifully on any screen size.<\/p>\n\n<h4>Output Formats<\/h4>\n\n<p><strong>CSS Classes<\/strong>\nGenerate margin, padding, and gap classes:\n    .space-m-lg { margin: clamp(0.75rem, calc(0.7rem + 0.2vw), 1rem); }\n    .space-p-md { padding: clamp(0.6rem, calc(0.55rem + 0.18vw), 0.75rem); }\n    .space-g-sm { gap: clamp(0.4rem, calc(0.35rem + 0.15vw), 0.5rem); }<\/p>\n\n<p><strong>CSS Custom Properties<\/strong>\nCreate reusable CSS variables:\n    :root {\n      --space-lg: clamp(0.75rem, calc(0.7rem + 0.2vw), 1rem);\n      --space-md: clamp(0.6rem, calc(0.55rem + 0.18vw), 0.75rem);\n    }<\/p>\n\n<p><strong>Tailwind-style Utilities<\/strong>\nGenerate complete utility class sets:\n    .mt-lg { margin-top: clamp(...); }\n    .px-md { padding-left: clamp(...); padding-right: clamp(...); }\n    .gap-y-sm { row-gap: clamp(...); }<\/p>\n\n<h4>Key Features<\/h4>\n\n<ul>\n<li><strong>Customizable Spacing Scale<\/strong> - Add, edit, remove, and reorder spacing sizes<\/li>\n<li><strong>Base Value System<\/strong> - Calculate relative spacing from any size in your scale<\/li>\n<li><strong>Musical Ratios<\/strong> - Use proven scaling ratios: 1.067, 1.125, 1.200, 1.250, 1.333<\/li>\n<li><strong>Visual Feedback<\/strong> - Live preview showing spacing at min and max viewport widths<\/li>\n<li><strong>Modal Editing<\/strong> - Clean interface for editing size names and properties<\/li>\n<li><strong>Professional UI<\/strong> - Beautiful, intuitive admin interface with drag-and-drop support<\/li>\n<li><strong>WordPress Integration<\/strong> - Located in Tools menu for easy access<\/li>\n<\/ul>\n\n<h4>Use Cases<\/h4>\n\n<ul>\n<li>Building responsive WordPress themes<\/li>\n<li>Creating design system components<\/li>\n<li>Establishing spacing tokens for custom blocks<\/li>\n<li>Maintaining consistent spacing across projects<\/li>\n<li>Developing fluid, accessible layouts<\/li>\n<\/ul>\n\n<h4>Browser Support<\/h4>\n\n<p>CSS <code>clamp()<\/code> is supported in all modern browsers:\n* Chrome 79+\n* Firefox 75+\n* Safari 13.1+\n* Edge 79+<\/p>\n\n<h3>Additional Information<\/h3>\n\n<h4>Credits<\/h4>\n\n<ul>\n<li><strong>Developer<\/strong>: Jim R. - <a href=\"https:\/\/jimrforge.com\">JimRForge.com<\/a><\/li>\n<li><strong>Development Assistant<\/strong>: Claude AI by Anthropic<\/li>\n<\/ul>\n\n<h4>Support<\/h4>\n\n<ul>\n<li><strong>Documentation<\/strong>:\n\n<ul>\n<li><a href=\"https:\/\/github.com\/Mij-Strebor\/fluid-space-forge\/blob\/master\/USER-MANUAL.md\">User's Guide<\/a> - Complete reference documentation<\/li>\n<li><a href=\"https:\/\/github.com\/Mij-Strebor\/fluid-space-forge\/blob\/master\/QUICK-START.md\">Quick Start<\/a> - Get started in 5 minutes<\/li>\n<li><a href=\"https:\/\/github.com\/Mij-Strebor\/fluid-space-forge\">GitHub Repository<\/a><\/li>\n<\/ul><\/li>\n<li><strong>Issues<\/strong>: Report bugs via <a href=\"https:\/\/github.com\/Mij-Strebor\/fluid-space-forge\/issues\">GitHub Issues<\/a><\/li>\n<li><strong>Website<\/strong>: <a href=\"https:\/\/jimrforge.com\">JimRForge.com<\/a><\/li>\n<\/ul>\n\n<h4>Privacy<\/h4>\n\n<p>This plugin does not collect, store, or transmit any user data. All calculations and settings are stored locally in your WordPress database.<\/p>\n\n<h4>Contributing<\/h4>\n\n<p>Contributions are welcome! Visit the <a href=\"https:\/\/github.com\/Mij-Strebor\/fluid-space-forge\">GitHub repository<\/a> to contribute to the project.<\/p>\n\n<!--section=installation-->\n<h4>Automatic Installation<\/h4>\n\n<ol>\n<li>Log into your WordPress admin panel<\/li>\n<li>Navigate to Plugins \u2192 Add New<\/li>\n<li>Search for \"Fluid Space Forge\"<\/li>\n<li>Click \"Install Now\" and then \"Activate\"<\/li>\n<li>Access the plugin via Tools \u2192 Fluid Space Forge<\/li>\n<\/ol>\n\n<h4>Manual Installation<\/h4>\n\n<ol>\n<li>Download the plugin zip file<\/li>\n<li>Log into your WordPress admin panel<\/li>\n<li>Navigate to Plugins \u2192 Add New \u2192 Upload Plugin<\/li>\n<li>Choose the downloaded zip file and click \"Install Now\"<\/li>\n<li>Click \"Activate Plugin\"<\/li>\n<li>Access via Tools \u2192 Fluid Space Forge<\/li>\n<\/ol>\n\n<h4>After Activation<\/h4>\n\n<ol>\n<li>Navigate to <strong>Tools \u2192 Fluid Space Forge<\/strong> in your WordPress admin<\/li>\n<li>Configure your base spacing values and viewport range in the Settings panel<\/li>\n<li>Choose your output format: Classes, Variables, or Utilities<\/li>\n<li>Customize your spacing scale by adding, editing, or reordering sizes<\/li>\n<li>Preview your spacing at different screen sizes<\/li>\n<li>Copy the generated CSS code and add it to your theme<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='what%20is%20css%20clamp%28%29%3F'><h3>What is CSS clamp()?<\/h3><\/dt>\n<dd><p>The <code>clamp()<\/code> CSS function calculates a value between a minimum and maximum, with a preferred value that scales fluidly. It's perfect for responsive spacing that adapts smoothly across all screen sizes.<\/p><\/dd>\n<dt id='do%20i%20need%20the%20fluid%20font%20forge%20plugin%3F'><h3>Do I need the Fluid Font Forge plugin?<\/h3><\/dt>\n<dd><p>No! While Fluid Space Forge works beautifully alongside Fluid Font Forge, they are independent plugins. Each can be used separately or together for a complete fluid design system.<\/p><\/dd>\n<dt id='can%20i%20use%20this%20with%20any%20wordpress%20theme%3F'><h3>Can I use this with any WordPress theme?<\/h3><\/dt>\n<dd><p>Yes! Fluid Space Forge generates standard CSS that works with any WordPress theme, page builder, or block editor.<\/p><\/dd>\n<dt id='what%27s%20the%20difference%20between%20the%20three%20output%20formats%3F'><h3>What's the difference between the three output formats?<\/h3><\/dt>\n<dd><ul>\n<li><strong>Classes<\/strong> - Traditional CSS classes with full names (<code>.space-m-lg<\/code>)<\/li>\n<li><strong>Variables<\/strong> - CSS custom properties for reusable values (<code>--space-lg<\/code>)<\/li>\n<li><strong>Utilities<\/strong> - Tailwind-style utilities with shorthand names (<code>.mt-lg<\/code>, <code>.px-md<\/code>)<\/li>\n<\/ul><\/dd>\n<dt id='can%20i%20customize%20the%20spacing%20scale%3F'><h3>Can I customize the spacing scale?<\/h3><\/dt>\n<dd><p>Absolutely! You can add unlimited spacing sizes, edit their names, delete sizes, and drag-and-drop to reorder them. The plugin comes with 6 default sizes (xs, sm, md, lg, xl, xxl) that you can customize or replace.<\/p><\/dd>\n<dt id='does%20this%20work%20with%20rem%20units%3F'><h3>Does this work with rem units?<\/h3><\/dt>\n<dd><p>Yes! You can switch between px and rem units at any time. The plugin recalculates all values when you switch units.<\/p><\/dd>\n<dt id='is%20the%20generated%20css%20compatible%20with%20older%20browsers%3F'><h3>Is the generated CSS compatible with older browsers?<\/h3><\/dt>\n<dd><p>The <code>clamp()<\/code> function is supported in modern browsers (Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+). For older browser support, you may need to provide fallback values.<\/p><\/dd>\n<dt id='can%20i%20reset%20to%20defaults%3F'><h3>Can I reset to defaults?<\/h3><\/dt>\n<dd><p>Yes! Each tab has a \"Reset\" button that restores the original 6 default sizes. Your custom settings are also preserved and can be restored.<\/p><\/dd>\n<dt id='does%20it%20save%20automatically%3F'><h3>Does it save automatically?<\/h3><\/dt>\n<dd><p>Yes! The plugin includes autosave functionality that saves your changes every 10 seconds. You can also manually save at any time using the Save button.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.2.4 - 2025-11-21<\/h4>\n\n<ul>\n<li><strong>Fixed:<\/strong> Modal button colors - cancel button now slate gray with white text, confirm button gold<\/li>\n<li><strong>Fixed:<\/strong> Reset functionality now properly resets base to \"md\" and prefixes per tab<\/li>\n<li><strong>Fixed:<\/strong> Settings Reset now uses Perfect Fourth (1.333) as default Max Scale<\/li>\n<li><strong>Added:<\/strong> New secondary button CSS class for modal dialogs<\/li>\n<\/ul>\n\n<h4>1.2.3 - 2025-11-20<\/h4>\n\n<ul>\n<li><strong>UI Improvements:<\/strong> Removed decorative icons from all panel headers for cleaner appearance<\/li>\n<li><strong>UI Improvements:<\/strong> Updated tab button font size to 16px for better readability<\/li>\n<li><strong>UI Improvements:<\/strong> Reorganized Community panel with Documentation section (User's Guide and Quick Start)<\/li>\n<li><strong>Critical Fix:<\/strong> Fixed uninstall.php to use correct Space Forge constants (was using Font Forge constants)<\/li>\n<li><strong>Critical Fix:<\/strong> Added PHPCS ignore comments for intentional direct database queries<\/li>\n<li><strong>Critical Fix:<\/strong> Resolved all WordPress Plugin Checker warnings<\/li>\n<li><strong>Documentation:<\/strong> Enhanced Support section with direct links to User's Guide and Quick Start<\/li>\n<\/ul>\n\n<h4>1.2.2 - 2025-11-08<\/h4>\n\n<ul>\n<li><strong>Fixed:<\/strong> WordPress.org compliance - replaced inline script tag with wp_add_inline_script()<\/li>\n<li><strong>Fixed:<\/strong> All JavaScript now properly enqueued using WordPress standards<\/li>\n<li>Resolves WordPress.org plugin review feedback from November 5, 2025<\/li>\n<\/ul>\n\n<h4>1.2.1 - 2025-10-29<\/h4>\n\n<ul>\n<li>Initial WordPress.org release with compliance updates<\/li>\n<\/ul>\n\n<h4>1.0 (2025-01-06)<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<li>Generate responsive spacing using CSS clamp() functions<\/li>\n<li>Three output formats: Classes, CSS Variables, and Utility classes<\/li>\n<li>Drag and drop reordering of spacing sizes<\/li>\n<li>Autosave functionality with visual status indicators<\/li>\n<li>Live preview showing spacing at min and max viewport widths<\/li>\n<li>Modal dialog for editing and adding spacing sizes<\/li>\n<li>Musical harmony scale ratios for consistent spacing progression<\/li>\n<li>Support for both pixel and rem units<\/li>\n<li>Base value selector for relative spacing calculations<\/li>\n<li>Classes tab generates margin, padding, and gap variants<\/li>\n<li>Utilities tab includes Tailwind-style margin, padding, and gap utilities<\/li>\n<li>Professional admin UI with organized CSS and modular JavaScript<\/li>\n<li>Plugin located in WordPress Tools menu<\/li>\n<\/ul>","raw_excerpt":"Generate responsive spacing systems using CSS clamp() functions. Perfect companion to Fluid Font Forge for creating fluid design systems.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/258128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=258128"}],"author":[{"embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/mijstrebor"}],"wp:attachment":[{"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=258128"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=258128"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=258128"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=258128"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=258128"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=258128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}