Helpers

A collection of miscellaneous utility classes for common layout and display needs. Part of the @thenewcss/helpers addon package.

Installation

npm install @thenewcss/helpers

Aspect Ratios

Maintain consistent aspect ratios for embedded content like videos and iframes.

Preview

1:1

4:3

16:9

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/..." allowfullscreen></iframe>
</div>

<!-- Available ratios: ratio-1x1, ratio-4x3, ratio-16x9, ratio-21x9 -->

Stacks

Shorthand helpers for vertical and horizontal flex layouts with gap.

Preview

Left

Right

First

Second

Third

<!-- Horizontal stack with vertical rule divider -->
<div class="hstack">
  <div>Left</div>
  <div class="vr"></div>
  <div>Right</div>
</div>

<!-- Vertical stack -->
<div class="vstack">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>

Object Fit

Control how replaced elements (images, videos) are resized within their container.

<img src="photo.jpg" class="object-contain" style="width: 200px; height: 200px">
<img src="photo.jpg" class="object-cover" style="width: 200px; height: 200px">
<img src="photo.jpg" class="object-fill" style="width: 200px; height: 200px">
<img src="photo.jpg" class="object-none" style="width: 200px; height: 200px">
<img src="photo.jpg" class="object-scale-down" style="width: 200px; height: 200px">

Stretched Link

Make any element's containing block clickable via an absolutely-positioned overlay.

<div class="card" style="position: relative">
  <div class="card-body">
    <h5>Card title</h5>
    <p>Some text with a <a href="#" class="stretched-link">stretched link</a>.</p>
  </div>
</div>

Class Reference

Layout Helpers

Class	Description
`.clearfix`	Clears floats via ::after pseudo-element.
`.vstack`	Vertical flex stack with 0.5rem gap.
`.hstack`	Horizontal flex stack with 0.5rem gap and center alignment.
`.stretched-link`	Makes containing block clickable via absolute-positioned ::after overlay.
`.vr`	Vertical rule divider. 1px wide, currentColor, 0.25 opacity.
`.focus-ring`	Custom focus ring on :focus-visible. Blue box-shadow.

Aspect Ratios

Class	Description
`.ratio`	Aspect ratio container. Children fill absolutely.
`.ratio-1x1`	1:1 square aspect ratio (100%).
`.ratio-4x3`	4:3 aspect ratio (75%).
`.ratio-16x9`	16:9 widescreen aspect ratio (56.25%).
`.ratio-21x9`	21:9 ultra-wide aspect ratio (42.857%).

Object Fit & Float

Class	Description
`.object-contain`	object-fit: contain
`.object-cover`	object-fit: cover
`.object-fill`	object-fit: fill
`.object-none`	object-fit: none
`.object-scale-down`	object-fit: scale-down
`.float-start`	float: left
`.float-end`	float: right
`.float-none`	float: none

Vertical Alignment

Class	Description
`.align-baseline`	vertical-align: baseline
`.align-top`	vertical-align: top
`.align-middle`	vertical-align: middle
`.align-bottom`	vertical-align: bottom
`.align-text-top`	vertical-align: text-top
`.align-text-bottom`	vertical-align: text-bottom