Effects

Fluid Margin v1.0.8

Utilities for sets min and max margins for screen size without breakpoints.


Class

classcss
fluid
m-min-{value}
m-max-{value}
@media screen and (min-width: 20rem) { .fluid.m-min-{modifier}.m-max-{modifier} { margin: calc({min} + 0 * ((100vw - 20rem) / 30)) } } @media screen and (min-width: 50rem) { .fluid.m-min-{modifier}.m-max-{modifier} { margin: {max} } }
valuemodifier
00
10.25rem
20.5rem
30.75rem
41rem
51.25rem
61.5rem
82rem
102.5rem
123rem
164rem
205rem
246rem
328rem
4010rem
4812rem
5614rem
6416rem
72 v1.1.318rem
80 v1.1.320rem
88 v1.1.322rem
96 v1.1.324rem
104 v1.1.326rem
112 v1.1.328rem
Note: Utility customizing is unavailable.

Usage

Set margin spacing adaptively to the width of the screen size. When the smaller screen size, the margin is m-10 max. Meanwhile, when the screen size is getting bigger, the margin is m-4 max.

<!-- Example -->
<y class="fluid m-min-10 m-max-4">
...
</y>

Mix with other fluid utilities, such as Fluid Font Size, Fluid Padding.

<!-- Example -->
<y class="fluid m-min-4 m-max-2 p-min-8 p-max-4 text-min-lg text-max-md">
...
</y>

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled