Revolutionize your CSS game with 🚀 seamless scaling and say goodbye 👋 to those pesky breakpoints!
🌟 Inspired by the cool ideas from Utopia, UnoCSS Preset Fluid is all about making life easier for web devs and designers. Get ready to scale your typography and spacing like a pro, making sure your site looks absolutely fabulous 🤩 on any device!
The Problem with Traditional Responsive Design
Conventional responsive design often relies heavily on breakpoints. This approach can create a rigid and time-consuming design process, complicating the achievement of a truly fluid and dynamic user experience.
How Does UnoCSS Preset Fluid Work?
Installation and Configuration:
To harness the power of UnoCSS Preset Fluid, start by setting your options in the UnoCSS configuration:
import { defineConfig } from 'unocss'
import { presetFluid } from 'unocss-preset-fluid'
export default defineConfig({
presets: [
presetFluid({
maxWidth: 1920,
minWidth: 320,
}),
],
})In this setup, fluid scaling begins at a viewport width of 320px and concludes at 1920px. This means if you set a font size to scale between 16px and 32px, it stays at 16px up to 320px wide viewports. As the viewport expands beyond 320px, the font size gradually increases, reaching 32px at 1920px. Beyond this, the size remains consistently at 32px.
Putting it into Action:
Now, effortlessly apply fluid typography and spacing in your HTML:
<p class="f-text-32-64">
This is an example of a text with a font size scaling from 32px to 64px.
</p><div class="f-p-32-64">
Padding example from 32px to 64px.
</div>This streamlined approach eliminates the complexity of defining various sizes for different viewports, such as mobile, tablet, and desktop.
Extend Your Design Boundaries
Imagine you have a design from Figma that concludes at 1440px, yet you wish to extend the fluidity up to 1920px while maintaining the same proportions. We’ve got just the solution for you!
With UnoCSS Preset Fluid, you can effortlessly achieve this by utilizing the extendedMinWidth and extendedMaxWidth configuration options. These settings allow you to preserve the original design proportions and seamlessly extend the fluid range to your desired width. Experience the flexibility of fluid design without compromising on the integrity of your original layout.
The configuration would look like this:
import { defineConfig } from 'unocss'
import { presetFluid } from 'unocss-preset-fluid'
export default defineConfig({
presets: [
presetFluid({
maxWidth: 1440,
extendMaxWidth: 1920,
minWidth: 320,
}),
],
})Predefined Ranges — Who Likes Repetition? 🔄
Unlock the power of efficiency in your design process with UnoCSS Preset Fluid’s feature of predefined range sets. Instead of repeatedly specifying the same size parameters, you can now define a series of ranges within your configuration:
export default defineConfig({
presets: [
presetFluid({
ranges: {
xs: [12, 16],
sm: [14, 18],
md: [18, 24],
lg: [22, 30],
}
}),
],
})With this setup, your utility classes become intuitively simple. For example, f-w-xs effortlessly translates to f-w-12-16. This intuitive mapping of predefined ranges to utility classes not only streamlines your workflow but also keeps your codebase cleaner and more maintainable.
Conclusion:
UnoCSS Preset Fluid is all about making responsive design a piece of cake 🍰. By ditching those multiple breakpoints and manual tweaks, you get more time to be creative and efficient.
Join the Party 🥳 — Let’s collaborate!
I’m super excited to invite the community to explore, use, and jazz up UnoCSS Preset Fluid. Your feedback, ideas, and contributions are what make this tool even more awesome. So let’s get together and make web design cooler than ever!