Width & Height

Atomic classes for controlling element dimensions using percentage-based widths & heights, spacing unit-based widths & heights, and max/min constraints.

Percentage Widths

Width classes based on percentage values for flexible layouts.

Class CSS Responsive?
.w0 width: 0; Y
.w10 width: 10%; N
.w20 width: 20%; N
.w25 width: 25%; Y
.w30 width: 30%; N
.w33 width: 33.3333%; Y
.w40 width: 40%; N
.w50 width: 50%; Y
.w60 width: 60%; N
.w66 width: 66.6667%; Y
.w70 width: 70%; N
.w75 width: 75%; Y
.w80 width: 80%; N
.w90 width: 90%; N
.w100 width: 100%; Y
.w-auto width: auto; Y

Examples

.w25
.w50
.w25
.w33
.w33
.w33

Spacing Unit Widths

Width classes based on Foundation CSS spacing units. These are calculated using $su-step (84px at default font size) and provide consistent sizing across your design system.

Class CSS Approximate Size Responsive?
.ws1 width: 84px; 1/12 of container N
.ws2 width: 168px; 2/12 of container N
.ws3 width: 252px; 3/12 of container N
.ws4 width: 336px; 4/12 of container N
.ws5 width: 420px; 5/12 of container N
.ws6 width: 504px; 6/12 of container N
.ws7 width: 588px; 7/12 of container N
.ws8 width: 672px; 8/12 of container N
.ws9 width: 756px; 9/12 of container N
.ws10 width: 840px; 10/12 of container N
.ws11 width: 924px; 11/12 of container N
.ws12 width: 1008px; 12/12 of container N

Examples

.ws3
.ws6
.ws3
.ws4
.ws8

Max Width

Maximum width constraints using both spacing units and percentage values.

Class CSS Responsive?
.wmx1 max-width: 84px; N
.wmx2 max-width: 168px; N
.wmx3 max-width: 252px; N
.wmx4 max-width: 336px; N
.wmx5 max-width: 420px; N
.wmx6 max-width: 504px; N
.wmx7 max-width: 588px; N
.wmx8 max-width: 672px; N
.wmx9 max-width: 756px; N
.wmx10 max-width: 840px; N
.wmx11 max-width: 924px; N
.wmx12 max-width: 1008px; N
.wmx25 max-width: 25%; N
.wmx50 max-width: 50%; N
.wmx75 max-width: 75%; N
.wmx100 max-width: 100%; Y
.wmx-initial max-width: initial; Y

Examples

.wmx6 (max-width: 504px)
.wmx50 (max-width: 50%)
.wmx75 (max-width: 75%)

Min Width

Minimum width constraints using both spacing units and percentage values.

Class CSS Responsive?
.wmn0 min-width: 0; N
.wmn1 min-width: 84px; N
.wmn2 min-width: 168px; N
.wmn3 min-width: 252px; N
.wmn4 min-width: 336px; N
.wmn5 min-width: 420px; N
.wmn6 min-width: 504px; N
.wmn7 min-width: 588px; N
.wmn8 min-width: 672px; N
.wmn9 min-width: 756px; N
.wmn10 min-width: 840px; N
.wmn11 min-width: 924px; N
.wmn12 min-width: 1008px; N
.wmn25 min-width: 25%; N
.wmn50 min-width: 50%; N
.wmn75 min-width: 75%; N
.wmn100 min-width: 100%; Y
.wmn-initial min-width: initial; Y

Examples

.wmn6 (min-width: 504px)
.wmn50 (min-width: 50%)
.wmn75 (min-width: 75%)

Height

Height classes for controlling element vertical dimensions.

Class CSS Responsive?
.h0 height: 0; N
.h100 height: 100%; N
.h-auto height: auto; N
.h-screen height: 100vh; N

Examples

.h100
.h-auto

Spacing Unit Heights

Height classes based on Foundation CSS spacing units, providing consistent vertical sizing.

Class CSS Approximate Size Responsive?
.hs1 height: 84px; 1/12 of container N
.hs2 height: 168px; 2/12 of container N
.hs3 height: 252px; 3/12 of container N
.hs4 height: 336px; 4/12 of container N
.hs5 height: 420px; 5/12 of container N
.hs6 height: 504px; 6/12 of container N
.hs7 height: 588px; 7/12 of container N
.hs8 height: 672px; 8/12 of container N
.hs9 height: 756px; 9/12 of container N
.hs10 height: 840px; 10/12 of container N
.hs11 height: 924px; 11/12 of container N
.hs12 height: 1008px; 12/12 of container N

Examples

.hs3
.hs6
.hs9

Max Height

Maximum height constraints using spacing units.

Class CSS Responsive?
.hmx1 max-height: 84px; N
.hmx2 max-height: 168px; N
.hmx3 max-height: 252px; N
.hmx4 max-height: 336px; N
.hmx5 max-height: 420px; N
.hmx6 max-height: 504px; N
.hmx7 max-height: 588px; N
.hmx8 max-height: 672px; N
.hmx9 max-height: 756px; N
.hmx10 max-height: 840px; N
.hmx11 max-height: 924px; N
.hmx12 max-height: 1008px; N
.hmx100 max-height: 100%; Y
.hmx-initial max-height: initial; Y

Examples

This content has a max-height of 252px. If the content exceeds this height, it will scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

This content has a max-height of 504px.

Min Height

Minimum height constraints using spacing units.

Class CSS Responsive?
.hmn1 min-height: 84px; N
.hmn2 min-height: 168px; N
.hmn3 min-height: 252px; N
.hmn4 min-height: 336px; N
.hmn5 min-height: 420px; N
.hmn6 min-height: 504px; N
.hmn7 min-height: 588px; N
.hmn8 min-height: 672px; N
.hmn9 min-height: 756px; N
.hmn10 min-height: 840px; N
.hmn11 min-height: 924px; N
.hmn12 min-height: 1008px; N
.hmn100 min-height: 100%; Y
.hmn-initial min-height: initial; Y

Examples

.hmn3 (min-height: 252px)
.hmn6 (min-height: 504px)

Usage Examples

Responsive Card Layout

<div class="d-grid grid__1 sm:grid__2 lg:grid__3 g4">
  <div class="bg-white bs-md bar-lg p4 w100">
    <h3 class="fs-h3 fw-bold mb3">Card Title</h3>
    <p class="fc-light-700">Card content with consistent width.</p>
  </div>
</div>

Sidebar with Fixed Width

<div class="d-flex g4">
  <aside class="ws3 bg-light p4">
    <!-- Sidebar with fixed width of 3 spacing units -->
  </aside>
  <main class="fl1 p4">
    <!-- Main content that takes remaining space -->
  </main>
</div>

Modal with Max Width

<div class="bg-white bs-lg bar-lg p6 wmx8">
  <h2 class="fs-h2 fw-bold mb4">Modal Title</h2>
  <p class="fc-light-700 mb4">Modal content with constrained width.</p>
  <button class="btn btn--primary">Close</button>
</div>

Hero Section with Full Height

<section class="h-screen bg-blue fc-white d-flex ai-center jc-center">
  <div class="ta-center wmx8">
    <h1 class="fs-canon fw-bold mb4">Hero Title</h1>
    <p class="fs-paragon mb6">Hero description with full viewport height.</p>
  </div>
</section>

Best Practices

✅ Do

  • • Use percentage widths for flexible layouts
  • • Use spacing unit widths for consistent sizing
  • • Combine max-width with percentage for responsive containers
  • • Use min-height for ensuring content visibility
  • • Consider viewport units (h-screen) for full-height sections

❌ Don't

  • • Mix too many different width approaches in one layout
  • • Use fixed widths without considering mobile devices
  • • Set heights without considering content overflow
  • • Use 100vh without accounting for mobile browser UI
  • • Forget about responsive behavior with conditional classes