Artem Semkin

<p><strong>Design once. Scale everywhere.</strong></p>
<p>Fluid Design System for Elementor is a small yet powerful add-on that brings fluid typography and spacing presets directly into Elementor’s interface — helping you create fully responsive designs that scale naturally across every screen size, from tiny phones to ultra-wide desktops.</p>
<p>🎯 <em>Think of it like color presets — but for padding, font sizes, and layout gaps.</em></p>
<p>With just a few clicks, you can:<br />
– Define minimum and maximum values for typography or spacing.<br />
– Apply those values using a new “fluid” unit inside any Elementor control.<br />
– Watch your design scale smoothly—no coding or media queries required.<br />
– Organize your presets into custom groups (e.g. “Border Radius”, “Thumbnail Sizes”) for better management.</p>
<p>Say goodbye to manually tweaking every breakpoint. Say hello to automatic, intelligent design scaling with organized preset management.</p>
<h3>How It Works</h3>
<p>❓ <strong>What Does “Fluid” Mean?</strong></p>
<p>Traditionally in Elementor, you need to set separate values for each breakpoint — for example, one font size for desktop, another for tablet, and another for mobile.</p>
<p>While this gives some control, it has two major downsides:<br />
– 🧩 <strong>It’s rigid</strong>: You only define styles for specific screen widths, leaving awkward gaps in between where the design may not scale smoothly.<br />
– ⏱️ <strong>It’s time-consuming</strong>: Updating styles across multiple breakpoints for every section and element becomes a repetitive, manual process.</p>
<p>💡 <strong>Fluid Design System solves this.</strong><br />
Instead of setting fixed values for each breakpoint, you define just two—a minimum and a maximum — and the plugin automatically generates a smooth scaling behavior in between. This means:<br />
– One preset handles all screen sizes.<br />
– You get consistent design and spacing across the entire site.<br />
– You save time and reduce manual effort.<br />
– You can organize presets into groups for different projects or design systems.</p>
<p>This plugin introduces <strong>Fluid Units</strong>, powered by CSS <code>clamp()</code> and custom presets, allowing your design to scale automatically across all screen sizes.</p>
<p>Here’s how it works in real scenarios:</p>
<h3>✍️ Fluid Typography Example</h3>
<ul>
<li>Old way: 24px (mobile), 36px (tablet), 72px (desktop)</li>
<li>Fluid way: One preset: min = 24px, max = 72px</li>
<li>Result: Text scales smoothly and proportionally on all devices.</li>
</ul>
<h3>📦 Fluid Spacing Example</h3>
<ul>
<li>Old way: 40px (mobile), 80px (tablet), 160px (desktop)</li>
<li>Fluid way: One preset: min = 40px, max = 160px</li>
<li>Result: Section padding adjusts naturally without breakpoints.</li>
</ul>
<h3>🔗 Fluid Gaps Example</h3>
<ul>
<li>Gap between elements: 20px (mobile) to 60px (desktop)</li>
<li>Result: Even spacing between containers and widgets on any screen.</li>
</ul>
<p>❓ <strong>Why not Just Use <code>vw</code> or <code>vh</code> Units?</strong></p>
<p>While viewport units like <code>vw</code> can scale elements based on screen width, they often lack control — your text might become unreadably small or overly large. The Fluid Design System solves this by generating <code>clamp()</code> values behind the scenes, so your designs stay within defined min/max boundaries. This gives you the flexibility of responsive scaling, combined with the precision of design tokens.</p>
<p>👉 Behind the scenes, the plugin creates CSS variables like: <code>clamp(24px, 5vw, 72px)</code> which Elementor then uses across typography, spacing, padding, margin, and more.</p>
<h3>How to Use</h3>
<p>Follow these steps to set up and use the Fluid Design System in your Elementor projects.</p>
<h4>📐 Step 1: Configure Fluid Breakpoints</h4>
<ol>
<li>Go to Elementor > Site Settings</li>
<li>Navigate to the “Fluid Typography & Spacing” tab</li>
<li>In the “Breakpoints” panel, set your:
<ul>
<li>Minimum Screen Width (e.g., 360px for mobile)</li>
<li>Maximum Screen Width (e.g., 1920px for desktop)</li>
</ul>
</li>
</ol>
<h4>🧰 Step 2: Create Your Presets</h4>
<ol>
<li>In the same “Fluid Typography & Spacing” tab:
<ul>
<li>Go to “Typography Presets” to create fluid font size presets</li>
<li>Go to “Spacing Presets” to create fluid spacing presets</li>
</ul>
</li>
<li>For each preset:
<ul>
<li>Give it a descriptive name</li>
<li>Set minimum and maximum values</li>
<li>Optionally set custom breakpoints for this preset</li>
</ul>
</li>
</ol>
<h4>🎨 Step 3: Apply Your Presets</h4>
<ol>
<li>Edit any page with Elementor</li>
<li>In any control that supports custom units (typography, spacing, etc.):
<ul>
<li>Select “fluid” as the unit</li>
<li>Choose your preset from the dropdown</li>
</ul>
</li>
<li>Watch your design smoothly adapt to different screen sizes</li>
</ol>
<h4>🔧 Step 4: Fine-tune Your Design</h4>
<ol>
<li>Use the live preview to see how your presets work</li>
<li>Adjust preset values if needed</li>
<li>Create additional presets for different design needs</li>
</ol>
<h4>Why Use Fluid Design System?</h4>
<ul>
<li><strong>Perfect Responsiveness</strong>: Create websites that look flawless on every device, from mobile phones to large desktop screens including all intermediate sizes</li>
<li><strong>Design Consistency</strong>: Maintain perfect spacing and typography harmony across your entire website</li>
<li><strong>Time-Saving</strong>: Eliminate manual breakpoint adjustments with intelligent fluid scaling</li>
<li><strong>Future-Proof</strong>: Seamlessly integrates with Elementor’s latest features and updates</li>
<li><strong>User-Friendly</strong>: Manage everything through Elementor’s familiar interface – <strong>no coding or CSS knowledge required</strong></li>
</ul>
<h4>Key Features</h4>
<ul>
<li>Create unlimited fluid typography and spacing presets with custom minimum and maximum values</li>
<li>Define global breakpoints or set custom breakpoints for individual presets</li>
<li>Real-time preview of changes in the Elementor editor</li>
<li>Works with all Elementor widgets and elements</li>
<li>Compatible with any WordPress theme including Elementor’s Hello theme</li>
<li>Full support for Elementor’s responsive controls and additional breakpoints</li>
<li>Mix different units (px, em, rem) in your presets for ultimate flexibility</li>
</ul>
<h4>Common Use Cases</h4>
<ul>
<li><strong>Fluid Typography</strong>: Create responsive headings and text that maintain perfect proportions across all devices</li>
<li><strong>Consistent Spacing</strong>: Design section padding and margins that adapt smoothly to any screen size</li>
<li><strong>Responsive Grids</strong>: Build fluid grid layouts with perfect spacing between elements</li>
<li><strong>Typography Scale</strong>: Set up a complete typography system that works flawlessly everywhere</li>
<li><strong>Container Spacing</strong>: Create fluid containers that maintain perfect proportions on all devices</li>
<li><strong>Element Gaps</strong>: Design consistent gaps between elements that scale naturally</li>
</ul>


Fluid Design System for Elementor

Create fluid typography & spacing presets natively in Elementor — no CSS clamp formulas, no breakpoints, just seamless responsive design.

Jim Roberts

<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>
<h4>Why Fluid Space Forge?</h4>
<ul>
<li><strong>Responsive Spacing</strong> – Generate CSS <code>clamp()</code> functions for fluid spacing across all device sizes</li>
<li><strong>Three Output Formats</strong> – Choose between CSS Classes, CSS Custom Properties, or Tailwind-style Utilities</li>
<li><strong>Live Preview</strong> – See your spacing at different screen sizes in real-time</li>
<li><strong>Drag & Drop</strong> – Reorder your spacing scale with intuitive drag-and-drop interface</li>
<li><strong>Mathematical Scaling</strong> – Use proven typographic ratios (Minor Second, Major Third, Perfect Fourth, etc.)</li>
<li><strong>Dual Units</strong> – Full support for both <code>px</code> and <code>rem</code> units</li>
<li><strong>Autosave</strong> – Automatic saving with manual save option for complete control</li>
<li><strong>Export Ready</strong> – Copy generated CSS code with one click</li>
</ul>
<h4>Perfect Companion</h4>
<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>
<h4>Output Formats</h4>
<p><strong>CSS Classes</strong><br />
Generate margin, padding, and gap classes:<br />
    .space-m-lg { margin: clamp(0.75rem, calc(0.7rem + 0.2vw), 1rem); }<br />
    .space-p-md { padding: clamp(0.6rem, calc(0.55rem + 0.18vw), 0.75rem); }<br />
    .space-g-sm { gap: clamp(0.4rem, calc(0.35rem + 0.15vw), 0.5rem); }</p>
<p><strong>CSS Custom Properties</strong><br />
Create reusable CSS variables:<br />
    :root {<br />
      –space-lg: clamp(0.75rem, calc(0.7rem + 0.2vw), 1rem);<br />
      –space-md: clamp(0.6rem, calc(0.55rem + 0.18vw), 0.75rem);<br />
    }</p>
<p><strong>Tailwind-style Utilities</strong><br />
Generate complete utility class sets:<br />
    .mt-lg { margin-top: clamp(…); }<br />
    .px-md { padding-left: clamp(…); padding-right: clamp(…); }<br />
    .gap-y-sm { row-gap: clamp(…); }</p>
<h4>Key Features</h4>
<ul>
<li><strong>Customizable Spacing Scale</strong> – Add, edit, remove, and reorder spacing sizes</li>
<li><strong>Base Value System</strong> – Calculate relative spacing from any size in your scale</li>
<li><strong>Musical Ratios</strong> – Use proven scaling ratios: 1.067, 1.125, 1.200, 1.250, 1.333</li>
<li><strong>Visual Feedback</strong> – Live preview showing spacing at min and max viewport widths</li>
<li><strong>Modal Editing</strong> – Clean interface for editing size names and properties</li>
<li><strong>Professional UI</strong> – Beautiful, intuitive admin interface with drag-and-drop support</li>
<li><strong>WordPress Integration</strong> – 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>
<p>CSS <code>clamp()</code> is supported in all modern browsers:<br />
* Chrome 79+<br />
* Firefox 75+<br />
* Safari 13.1+<br />
* Edge 79+</p>
<h3>Additional Information</h3>
<h4>Credits</h4>
<ul>
<li><strong>Developer</strong>: Jim R. – <a href="https://jimrforge.com" rel="nofollow ugc">JimRForge.com</a></li>
<li><strong>Development Assistant</strong>: Claude AI by Anthropic</li>
</ul>
<h4>Support</h4>
<ul>
<li><strong>Documentation</strong>:
<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><strong>Issues</strong>: Report bugs via <a href="https://github.com/Mij-Strebor/fluid-space-forge/issues" rel="nofollow ugc">GitHub Issues</a></li>
<li><strong>Website</strong>: <a href="https://jimrforge.com" rel="nofollow ugc">JimRForge.com</a></li>
</ul>
<h4>Privacy</h4>
<p>This plugin does not collect, store, or transmit any user data. All calculations and settings are stored locally in your WordPress database.</p>
<h4>Contributing</h4>
<p>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.</p>


Fluid Space Forge

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

Fluid Design System for Elementor vs Fluid Space Forge