Skip to main content

Sizing Utilities

NuvoUI provides a comprehensive set of utilities for controlling the dimensions of elements, including width, height, min/max constraints, and viewport-relative measurements.

Configuration​

The sizing utilities are built on a set of configurable variables:

Spacings​

Width and height utilities are generated from the VAR.$spacings map, which defines various size values:

Percentages​

Percentage-based sizing utilities are generated from the VAR.$percentages list:

Breakpoints​

Responsive variants of sizing utilities are generated based on the breakpoint values defined in the VAR.$breakpoints map:

Utility Class Generation​

Sizing utility classes are only generated if VAR.$generate-utility-classes is set to true:

Parent Selector​

All utility classes are scoped under the VAR.$parent-selector which can be configured to change the global selector context:

Utility Class Naming Convention​

NuvoUI's sizing utilities follow a consistent naming pattern:

  1. Width classes: Start with w- (e.g., w-full, w-64)
  2. Height classes: Start with h- (e.g., h-full, h-32)
  3. Min-width classes: Start with min-w- (e.g., min-w-full)
  4. Min-height classes: Start with min-h- (e.g., min-h-full)
  5. Max-width classes: Start with max-w- (e.g., max-w-full)
  6. Max-height classes: Start with max-h- (e.g., max-h-full)
  7. Percentage values: End with p (e.g., w-50p for 50% width)
  8. Responsive variants: Use the @breakpoint suffix (e.g., w-full@md)

Available Types of Sizing Utilities​

NuvoUI provides several categories of sizing utilities:

  1. Fixed sizing: Apply specific width or height values (e.g., w-64, h-32)
  2. Percentage sizing: Apply percentage-based dimensions (e.g., w-50p, h-75p)
  3. Special values: Apply common sizing values like auto, full, screen
  4. Content-based sizing: Set dimensions based on content (min-content, max-content, fit-content)
  5. Viewport-based sizing: Set dimensions relative to the viewport (w-screen, h-screen)
  6. Constraints: Apply minimum and maximum constraints (min-w-, max-w-, min-h-, max-h-)

When to Use Each Type of Sizing Utility​

  • Fixed sizing: When you need precise control over element dimensions
  • Percentage sizing: For responsive layouts that scale with their container
  • Special values: For common use cases like taking up full width or adapting to content
  • Content-based sizing: When you need elements to size based on their content
  • Viewport-based sizing: For full-screen sections or viewport-relative dimensions
  • Constraints: When you need to control minimum or maximum dimensions

For specific documentation on each category, see the Width Utilities and Height Utilities pages.

Common Use Cases​

Responsive Design​

Fixed Width and Height Components​

Full-Width With Maximum Constraint​

Full-Height Layout​

Min-Content and Max-Content Sizing​