Controlling widths and heights of blocks in one dimension (width or height).

Width constraint wrappers

Note: width suffixes (-xs, -sm etc.) set the max-width of an element at those specified variables, whereas responsive prefixes (xs:, sm: etc.) set the media query breakpoint width at which the utility class takes effect.

All Codebase w- utility classes allow block elements to have less than their specified width if there isn’t enough space — e.g. if the device width is narrower, or if used within a column that is narrower.

Max-widths

Similar to containers, max-width utilities are set at 256px increments – as is traditionally used in many web design layouts. They are first set to width: 100% and then constrained to these max-widths.

Therefore, blocks with little or no content will be stretched to their max width (or, so far as the viewport width allows, if it is less than the max-width).

w-xxs – max-width: 256px
w-xs – max-width: 512px
w-sm – max-width: 768px
w-md – max-width: 1024px
w-lg – max-width: 1280px
w-xl – max-width: 1536px
w-xxl – max-width: 1792px

Since v.5.2.2: All the above have meda query breakpoint variants. So e.g. you can have a block set to max-with SM for smaller screens using w-sm, but then on marger screens where you may want a multi-column layout, you can constrain the width of that same block to md:w-xs.

There is also w-max-100vw - max-width: 100vw

Max-width overrides

You can use one of these, for example, when you want an offcanvas sidebar with offvanvas-override, where you don’t want its width constrained to w-xxs on a wider viewport, because you have it incorporated into a layout grid column.

w-auto / xs:w-auto / sm:w-auto / md:w-auto / lg:w-auto

Shrinkwrap using `w-fit-content`

New in Codebase v.5.2.11: w-fit-content uses width: fit-content to “shrinkwrap” a block element’s width down to the max-width of its content, if smaller than 100%. (It is still a block element.)

w-fit-content

Height constraint wrappers

Min-heights

h-50vh / h-100dvh (alias h-100vh)

These utilities will make a block have a minimum of 50vh or 100dvh.

You want to allow for iOS/iPadOS Safari’s retractable toolbars, so it’s really device viewport height not viewport height that you need.

Heights

h-100%

This utility will stretch a block vertically to fill the available space. This can be useful e.g. for “equalizing” the heights of inner-wrappers within flexbox flex-items.

Max-heights

h-max-100% / h-max-100dvh (alias h-max-100vh)

This utility will cause the height of an element to max out at the height of the viewport. This is useful e.g. for tall modals with a lot of scrolling content.

Two Dimensions

Some simple utilities for controlling blocks in two dimensions (width and height).

You can also control blocks two-dimensionally using flexbox, grid, and aspect-ratios.

Squares

You usually see thumbail images or avatars set in squares – or circles, which are fully-rounded squares.

With Codebase, you can use square to make elements square, and square rounded rounded-pill overflow-clip to make elements circular.

square-sm: 3rem² (24px² default)
square (alias square-md): 4.5rem² (72px² default)
square-lg: 6rem² (96px² default)

Responsive squares

square’s have the full set of media query breakpoint variations (xs:, sm:, md:, and lg:) so that you can make them larger or smaller in various layout contexts.

Image attribution: Photo by Pixabay from Pexels.

<div class="square-sm">
  <img src="" width="" height="" alt="">
</div>

<div class="square">
  <img src="" width="" height="" alt="">
</div>

<div class="square-lg">
  <img src="" width="" height="" alt="">
</div>

Image attribution: Photo by Pixabay from Pexels.

<div class="square-sm rounded rounded-pill overflow-clip">
  <img src="" width="" height="" alt="">
</div>

<div class="square rounded rounded-pill overflow-clip">
  <img src="" width="" height="" alt="">
</div>

<div class="square-lg rounded rounded-pill overflow-clip">
  <img src="" width="" height="" alt="">
</div>

Box

The box utility expands (you could say, “inflates”) an element to the full width and height of its wrapping block – provided the wrapping block has position: relative (e.g. using the relative utility class).

box has position: absolute, therefore it will be displayed on a layer behind or in front of any sibling elements within the same wrapper – depending on your HTML DOM order.

box is used to make a hero image fill its wrapper in the Codebase hero component.

Overlay title

Lorem ipsum dolor sit amet...

Photo by Oleg Magni from Pexels.

<div class="aspect-ratio-16x9 relative">
  <img class="box img-cover" src="" width="" height="" loading="lazy" alt="">
  <div class="aspect-ratio-16x9 flex flex-column flex-center flex-middle">
    <div class="m-4 p-2 xs:p-6 bg-white-glass-3 t-center t-lg">
      <h1 class="t-semibold t-black">Overlay title</h1>
      <p class="mb-0 t-black">Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</div>