Delivery Resilient CSS Elements — SitePoint

On this fast tip excerpted from Unleashing the Energy of CSS, Stephanie reveals how container queries allow us to ship resilient parts containing built-in structure and magnificence variants.

It might sound fairly daring to say, however container queries enable us to use the “construct as soon as, deploy in every single place” methodology. As a design programs engineer, it actually appeals to me to have the ability to ship design system parts with built-in structure and magnificence variants.

To exhibit this concept, the picture beneath reveals a subscription kind. Container queries have been utilized, and the element is proven in a full-width space throughout the narrower area of the sidebar and on the medium width throughout the content material space.

Grid is a superb companion for composing these variants. Utilizing grid template areas, we’re capable of rearrange the shape sections with out the necessity for additional markup. On this subscription kind element, I’ve recognized three grid areas: legend, subject, and submit. The overlays added within the following video present how the structure modifications throughout the variants.

Within the code for the subscription kind, the <kind> factor has a category subscription-form and is about because the container. A nested <div> with a category of form-content is what our container queries will then modify:

.subscription-form {
  container-type: inline-size;
}

On the narrowest default width, the shape is a straightforward grid stack with a niche utilized:

.form__content {
  show: grid;
  hole: 1rem;
}

The primary container question for the mid-sized structure is doing the heavy lifting of making the grid template and assigning the entire components to the grid areas:

@container (min-width: 375px) {
  .form__content {
    grid-template-areas: 
            "legend subject" 
            "legend submit";
    align-items: heart;
    column-gap: 2rem;
  }

  legend {
    grid-area: legend;
  }

  .form-group {
    grid-area: subject;
  }

  button {
    grid-area: submit;
  }
}

The second, remaining container question then solely has to regulate the grid-template-areas definition to horizontally line up the areas. Just one further tweak is required, which is to realign the Subscribe button to the tip place, which visually aligns it to the e-mail enter:

@container (min-width: 700px) {
  .form__content {
    grid-template-areas: 
            "legend subject submit";
  }

  button {
    align-self: finish;
  }
}

The next video clip reveals the subscription kind structure adjusting because the width is diminished.

The next CodePen demo offers a stay instance of this type kind structure (with “Resize me!” handles).

See the Pen
Container Queries for Subscription Kind by SitePoint (@SitePoint)
on CodePen.

As you possibly can see, container queries supply us the aptitude to construct parts that may be reused anyplace.

This text is excerpted from Unleashing the Energy of CSS: Superior Strategies for Responsive Consumer Interfaces, obtainable on SitePoint Premium.