Discussion on: How to make your HTML responsive by adding a single line of CSS

[Loouis Low]

I can probably create a single line responsive to HTML targeting specific element with Yogurt such as:

Using Fluid utility module: set the margin, padding, and font size adaptively adjust with different screen width.

<!-- example in HTML -->
<y class="fluid m-min-lg m-max-sm p-min-sm p-max-lg text-min-lg text-min-md">
  ...
</y>

// example in CSS
body {
  @extend .fluid, .m-min-lg, .m-max-sm, .p-min-sm, .p-max-lg .text-min-lg, .text-min-md;
}

Or using a native responsive variant utility: on the mobile screen an element width is max, the tablet screen is max, the laptop screen is small, the desktop screen is extra small.

<!-- example in HTML -->
<y class="sm:max-w-full md:max-w-full lg:max-w-sm 2k:max-w-xs">
  ...
</y>

// example in CSS
body {
  @extend .sm:\max-w-full, .md:\max-w-full, .lg:\max-w-sm, .\32k:\max-w-x;
}