Effects
Fluid Margin v1.0.8
Utilities for sets min and max margins for screen size without breakpoints.
Class
class | css |
---|---|
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} } } |
value | modifier | |
---|---|---|
0 | 0 | |
1 | 0.25rem | |
2 | 0.5rem | |
3 | 0.75rem | |
4 | 1rem | |
5 | 1.25rem | |
6 | 1.5rem | |
8 | 2rem | |
10 | 2.5rem | |
12 | 3rem | |
16 | 4rem | |
20 | 5rem | |
24 | 6rem | |
32 | 8rem | |
40 | 10rem | |
48 | 12rem | |
56 | 14rem | |
64 | 16rem | |
72 v1.1.3 | 18rem | |
80 v1.1.3 | 20rem | |
88 v1.1.3 | 22rem | |
96 v1.1.3 | 24rem | |
104 v1.1.3 | 26rem | |
112 v1.1.3 | 28rem |
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
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |