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
Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.