Effects
Fluid Font Size v1.0.8
Utilities for sets min and max font sizes for screen size without breakpoints.
Class
class | css |
---|---|
fluid text-min- {value} text-max- {value} | @media screen and (min-width: 20rem) { .fluid.text-min-{modifier} .text-max-{modifier} { font-size: calc({min} + 0 * ((100vw - 20rem) / 30)) } } @media screen and (min-width: 50rem) { .fluid.text-min-{modifier} .text-max-{modifier} { font-size: {max} } } |
class | css | |
---|---|---|
xs | font-size: .75rem | Text |
sm | font-size: .875rem | Text |
md | font-size: 1rem | Text |
lg | font-size: 1.125rem | Text |
xl | font-size: 1.25rem | Text |
2xl | font-size: 1.5rem | Text |
3xl | font-size: 1.875rem | Text |
4xl | font-size: 2.25rem | Text |
5xl | font-size: 3rem | Text |
6xl | font-size: 4rem | Text |
7xl | font-size: 5rem | Text |
8xl | font-size: 6rem | Text |
Usage
Set font size adaptively to the width of the screen size. When the smaller screen size, the text size is text-lg
max. Meanwhile, when the screen size is getting bigger, the text size is text-md
max.
<!-- Example -->
<y class="fluid text-min-lg text-max-md">
...
</y>
Mix with other fluid utilities, such as Fluid Margin, 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 |