Effects

Fluid Font Size

Utilities for sets min and max font sizes 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 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-1	font-size: 1.25rem	Text
xl-2	font-size: 1.5rem	Text
xl-3	font-size: 1.875rem	Text
xl-4	font-size: 2.25rem	Text
xl-5	font-size: 3rem	Text
xl-6	font-size: 4rem	Text
xl-7	font-size: 5rem	Text
xl-8	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 at min. Meanwhile, when the screen size is getting bigger, the text size is text-md at max.

<div class="fluid text-min-lg text-max-md">
  ...
</div>

HTML

.dummy {
  @extend
    .fluid,
    .text-min-lg,
    .text-max-md;
}

SCSS

Mix with other fluid utilities, such as Fluid Margin, 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