內容簡介
總結：
Fluid Space Forge是一款專業的WordPress外掛，利用現代的CSS clamp()功能生成具有響應性的間距系統，可創建一致、可伸縮的邊距、填充和間隙，適應從手機到桌面的不同屏幕大小。
問題與答案：
1. Fluid Space Forge是什麼？
Fluid Space Forge是一個專業的WordPress外掛，生成具有響應性的間距系統，使用現代CSS clamp()功能。
2. Fluid Space Forge有哪些特點？
- 提供響應式間距，能在各種設備大小上生成CSS clamp()功能。
- 可以選擇CSS類、CSS自定義屬性或Tailwind風格的工具來輸出。
- 提供實時預覽功能，讓你在不同螢幕大小上即時查看間距。
- 具有直觀的拖放功能，可以重新排序間距大小。
- 支持數學比例，可使用已證明的排版比例。
- 完全支持px和rem單位。
- 自動保存功能，並提供手動保存選項以完全控制。
- 可以一鍵複製生成的CSS代碼。
3. Fluid Space Forge的用途有哪些？
- 構建響應式WordPress主題。
- 創建設計系統元件。
- 為自定義區塊建立間距標記。
- 在不同項目間保持一致的間距。
- 開發流暢、易於訪問的版面配置。
外掛標籤
開發者團隊
原文外掛簡介
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.
