Effects

Fluid Padding v1.0.8

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

Class

class	css
fluid p-min-`{value}` p-max-`{value}`	@media screen and (min-width: 20rem) { .fluid.p-min-`{modifier}`.p-max-`{modifier}` { padding: calc(`{min}` + 0 * ((100vw - 20rem) / 30)) } } @media screen and (min-width: 50rem) { .fluid.p-min-`{modifier}`.p-max-`{modifier}` { padding: `{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

Note: Utility customizing is unavailable.

Usage

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

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

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

<!-- Example -->
<y class="fluid p-min-8 p-max-4 m-min-4 m-max-2 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