Effects

Fluid Margin

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

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

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	18rem
80	20rem
88	22rem
96	24rem
104	26rem
112	28rem

Usage

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

<div class="fluid margin-min-10 margin-max-4">
  ...
</div>

HTML

.dummy {
  @extend
    .fluid,
    .margin-min-10,
    .margin-max-4;
}

SCSS

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

<div class="fluid margin-min-4 margin-max-2 padding-min-8 padding-max-4 text-min-lg text-max-md">
  ...
</div>

HTML

.dummy {
  @extend
    .fluid,
    .margin-min-4,
    .margin-max-2,
    .padding-min-8,
    .padding-max-4,
    .text-min-lg,
    .text-max-md;
}

SCSS