# Sizing Utilities for controlling the width and height of elements using percentages, pixels, or logical sizing. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-sizing--introduction ## Variants documented in Storybook - SizingShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-sizing--sizingshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Sizing. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Utilities

Sizing Utilities Reference

A complete reference for controlling widths, heights, and logical sizing dimensions.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Width (Percent)

Format: ux4g-w-{size}

width-0 (0) ux4g-w-0
width-25 (25%) ux4g-w-25
width-50 (50%) ux4g-w-50
width-75 (75%) ux4g-w-75
width-100 (100%) ux4g-w-100
width-auto (auto) ux4g-w-auto

Width (Fixed Pixels)

Format: ux4g-w-{size}

width-px-100 (100px) ux4g-wpx-100
width-px-150 (150px) ux4g-wpx-150
width-px-200 (200px) ux4g-wpx-200
width-px-300 (300px) ux4g-wpx-300
width-px-400 (400px) ux4g-wpx-400

Special Width

Format: ux4g-w-{size}

width-min (min-content) ux4g-w-min
width-max (max-content) ux4g-w-max
width-fit (fit-content) ux4g-w-fit
width-screen (100vw) ux4g-w-screen
max-width-none (none) ux4g-max-w-none
max-width-full (100%) ux4g-max-w-full
max-width-fit (fit-content) ux4g-max-w-fit
min-width-0 (0) ux4g-min-w-0
min-width-full (100%) ux4g-min-w-full

Height (Percent)

Format: ux4g-h-{size}

height-0 (0) ux4g-h-0
height-25 (25%) ux4g-h-25
height-50 (50%) ux4g-h-50
height-75 (75%) ux4g-h-75
height-100 (100%) ux4g-h-100
height-auto (auto) ux4g-h-auto

Height (Fixed Pixels)

Format: ux4g-h-{size}

height-px-100 (100px) ux4g-hpx-100
height-px-150 (150px) ux4g-hpx-150
height-px-200 (200px) ux4g-hpx-200
height-px-300 (300px) ux4g-hpx-300
height-px-400 (400px) ux4g-hpx-400

Special Height

Format: ux4g-h-{size}

height-min (min-content) ux4g-h-min
height-max (max-content) ux4g-h-max
height-fit (fit-content) ux4g-h-fit
height-screen (100vh) ux4g-h-screen
height-dvh (100dvh) ux4g-h-dvh
max-height-full (100%) ux4g-max-h-full
max-height-screen (100vh) ux4g-max-h-screen
min-height-0 (0) ux4g-min-h-0
min-height-full (100%) ux4g-min-h-full
min-height-screen (100vh) ux4g-min-h-screen
min-height-dvh (100dvh) ux4g-min-h-dvh

Logical Sizing (Inline)

Format: ux4g-{w/h}-{size}

inline-size-auto (auto) ux4g-is-auto
inline-size-full (100%) ux4g-is-full
inline-size-fit (fit-content) ux4g-is-fit
inline-size-screen (100vi) ux4g-is-screen
min-inline-size-0 (0) ux4g-min-is-0
min-inline-size-full (100%) ux4g-min-is-full
max-inline-size-full (100%) ux4g-max-is-full

Logical Sizing (Block)

Format: ux4g-{w/h}-{size}

block-size-auto (auto) ux4g-bs-auto
block-size-full (100%) ux4g-bs-full
block-size-fit (fit-content) ux4g-bs-fit
block-size-screen (100vb) ux4g-bs-screen
min-block-size-0 (0) ux4g-min-bs-0
min-block-size-full (100%) ux4g-min-bs-full
min-block-size-screen (100vb) ux4g-min-bs-screen
max-block-size-full (100%) ux4g-max-bs-full
``` React: ```jsx import React from 'react'; const SizingExample1Demo = () => ( <>
Utilities

Sizing Utilities Reference

A complete reference for controlling widths, heights, and logical sizing dimensions.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Width Percent */}

Width (Percent)

Format: ux4g-w-{size}

width-0 (0) ux4g-w-0
width-25 (25%) ux4g-w-25
width-50 (50%) ux4g-w-50
width-75 (75%) ux4g-w-75
width-100 (100%) ux4g-w-100
width-auto (auto) ux4g-w-auto
{/* Width Fixed */}

Width (Fixed Pixels)

Format: ux4g-w-{size}

width-px-100 (100px) ux4g-wpx-100
width-px-150 (150px) ux4g-wpx-150
width-px-200 (200px) ux4g-wpx-200
width-px-300 (300px) ux4g-wpx-300
width-px-400 (400px) ux4g-wpx-400
{/* Special Width */}

Special Width

Format: ux4g-w-{size}

width-min (min-content) ux4g-w-min
width-max (max-content) ux4g-w-max
width-fit (fit-content) ux4g-w-fit
width-screen (100vw) ux4g-w-screen
max-width-none (none) ux4g-max-w-none
max-width-full (100%) ux4g-max-w-full
max-width-fit (fit-content) ux4g-max-w-fit
min-width-0 (0) ux4g-min-w-0
min-width-full (100%) ux4g-min-w-full
{/* Height Percent */}

Height (Percent)

Format: ux4g-h-{size}

height-0 (0) ux4g-h-0
height-25 (25%) ux4g-h-25
height-50 (50%) ux4g-h-50
height-75 (75%) ux4g-h-75
height-100 (100%) ux4g-h-100
height-auto (auto) ux4g-h-auto
{/* Height Fixed */}

Height (Fixed Pixels)

Format: ux4g-h-{size}

height-px-100 (100px) ux4g-hpx-100
height-px-150 (150px) ux4g-hpx-150
height-px-200 (200px) ux4g-hpx-200
height-px-300 (300px) ux4g-hpx-300
height-px-400 (400px) ux4g-hpx-400
{/* Special Height */}

Special Height

Format: ux4g-h-{size}

height-min (min-content) ux4g-h-min
height-max (max-content) ux4g-h-max
height-fit (fit-content) ux4g-h-fit
height-screen (100vh) ux4g-h-screen
height-dvh (100dvh) ux4g-h-dvh
max-height-full (100%) ux4g-max-h-full
max-height-screen (100vh) ux4g-max-h-screen
min-height-0 (0) ux4g-min-h-0
min-height-full (100%) ux4g-min-h-full
min-height-screen (100vh) ux4g-min-h-screen
min-height-dvh (100dvh) ux4g-min-h-dvh
{/* Logical Inline */}

Logical Sizing (Inline)

Format: ux4g-{w/h}-{size}

inline-size-auto (auto) ux4g-is-auto
inline-size-full (100%) ux4g-is-full
inline-size-fit (fit-content) ux4g-is-fit
inline-size-screen (100vi) ux4g-is-screen
min-inline-size-0 (0) ux4g-min-is-0
min-inline-size-full (100%) ux4g-min-is-full
max-inline-size-full (100%) ux4g-max-is-full
{/* Logical Block */}

Logical Sizing (Block)

Format: ux4g-{w/h}-{size}

block-size-auto (auto) ux4g-bs-auto
block-size-full (100%) ux4g-bs-full
block-size-fit (fit-content) ux4g-bs-fit
block-size-screen (100vb) ux4g-bs-screen
min-block-size-0 (0) ux4g-min-bs-0
min-block-size-full (100%) ux4g-min-bs-full
min-block-size-screen (100vb) ux4g-min-bs-screen
max-block-size-full (100%) ux4g-max-bs-full
); export default SizingExample1Demo; ``` Angular: ```html
Utilities

Sizing Utilities Reference

A complete reference for controlling widths, heights, and logical sizing dimensions.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Width (Percent)

Format: ux4g-w-{size}

width-0 (0) ux4g-w-0
width-25 (25%) ux4g-w-25
width-50 (50%) ux4g-w-50
width-75 (75%) ux4g-w-75
width-100 (100%) ux4g-w-100
width-auto (auto) ux4g-w-auto

Width (Fixed Pixels)

Format: ux4g-w-{size}

width-px-100 (100px) ux4g-wpx-100
width-px-150 (150px) ux4g-wpx-150
width-px-200 (200px) ux4g-wpx-200
width-px-300 (300px) ux4g-wpx-300
width-px-400 (400px) ux4g-wpx-400

Special Width

Format: ux4g-w-{size}

width-min (min-content) ux4g-w-min
width-max (max-content) ux4g-w-max
width-fit (fit-content) ux4g-w-fit
width-screen (100vw) ux4g-w-screen
max-width-none (none) ux4g-max-w-none
max-width-full (100%) ux4g-max-w-full
max-width-fit (fit-content) ux4g-max-w-fit
min-width-0 (0) ux4g-min-w-0
min-width-full (100%) ux4g-min-w-full

Height (Percent)

Format: ux4g-h-{size}

height-0 (0) ux4g-h-0
height-25 (25%) ux4g-h-25
height-50 (50%) ux4g-h-50
height-75 (75%) ux4g-h-75
height-100 (100%) ux4g-h-100
height-auto (auto) ux4g-h-auto

Height (Fixed Pixels)

Format: ux4g-h-{size}

height-px-100 (100px) ux4g-hpx-100
height-px-150 (150px) ux4g-hpx-150
height-px-200 (200px) ux4g-hpx-200
height-px-300 (300px) ux4g-hpx-300
height-px-400 (400px) ux4g-hpx-400

Special Height

Format: ux4g-h-{size}

height-min (min-content) ux4g-h-min
height-max (max-content) ux4g-h-max
height-fit (fit-content) ux4g-h-fit
height-screen (100vh) ux4g-h-screen
height-dvh (100dvh) ux4g-h-dvh
max-height-full (100%) ux4g-max-h-full
max-height-screen (100vh) ux4g-max-h-screen
min-height-0 (0) ux4g-min-h-0
min-height-full (100%) ux4g-min-h-full
min-height-screen (100vh) ux4g-min-h-screen
min-height-dvh (100dvh) ux4g-min-h-dvh

Logical Sizing (Inline)

Format: ux4g-{w/h}-{size}

inline-size-auto (auto) ux4g-is-auto
inline-size-full (100%) ux4g-is-full
inline-size-fit (fit-content) ux4g-is-fit
inline-size-screen (100vi) ux4g-is-screen
min-inline-size-0 (0) ux4g-min-is-0
min-inline-size-full (100%) ux4g-min-is-full
max-inline-size-full (100%) ux4g-max-is-full

Logical Sizing (Block)

Format: ux4g-{w/h}-{size}

block-size-auto (auto) ux4g-bs-auto
block-size-full (100%) ux4g-bs-full
block-size-fit (fit-content) ux4g-bs-fit
block-size-screen (100vb) ux4g-bs-screen
min-block-size-0 (0) ux4g-min-bs-0
min-block-size-full (100%) ux4g-min-bs-full
min-block-size-screen (100vb) ux4g-min-bs-screen
max-block-size-full (100%) ux4g-max-bs-full
``` ### 2. Sizing Showcase HTML: ```html
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
``` React: ```jsx import React from 'react'; const SizingExample2Demo = () => ( <>
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
); export default SizingExample2Demo; ``` Angular: ```html
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
``` ### 3. Sizing Showcase HTML: ```html
100px width
200px width
300px width
400px width
``` React: ```jsx import React from 'react'; const SizingExample3Demo = () => ( <>
100px width
200px width
300px width
400px width
); export default SizingExample3Demo; ``` Angular: ```html
100px width
200px width
300px width
400px width
``` ### 4. Sizing Showcase HTML: ```html
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
``` React: ```jsx import React from 'react'; const SizingExample4Demo = () => ( <>
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
); export default SizingExample4Demo; ``` Angular: ```html
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
``` ### 5. Sizing Showcase HTML: ```html
100px height
150px height
200px height
300px height
``` React: ```jsx import React from 'react'; const SizingExample5Demo = () => ( <>
100px height
150px height
200px height
300px height
); export default SizingExample5Demo; ``` Angular: ```html
100px height
150px height
200px height
300px height
``` ## CSS class reference The following CSS partials define the Sizing utility classes used in the examples above: ### sizing.utilities.css ```css /* ========================================= UX4G SIZING SYSTEM (CLEAN) ========================================= */ /* ======================== 1. WIDTH (PERCENT) ======================== */ .ux4g-w-0 { width: 0; } .ux4g-w-25 { width: 25%; } .ux4g-w-50 { width: 50%; } .ux4g-w-75 { width: 75%; } .ux4g-w-100 { width: 100%; } .ux4g-w-auto { width: auto; } /* ======================== 2. WIDTH (FIXED - TOKEN) ======================== */ .ux4g-wpx-100 { width: 100px; } .ux4g-wpx-150 { width: 150px; } .ux4g-wpx-200 { width: 200px; } .ux4g-wpx-300 { width: 300px; } .ux4g-wpx-400 { width: 400px; } /* ======================== 3. SPECIAL WIDTH ======================== */ .ux4g-w-min { width: min-content; } .ux4g-w-max { width: max-content; } .ux4g-w-fit { width: fit-content; } .ux4g-w-screen { width: 100vw; } /* ======================== 4. MAX / MIN WIDTH ======================== */ .ux4g-max-w-none { max-width: none; } .ux4g-max-w-full { max-width: 100%; } .ux4g-max-w-fit { max-width: fit-content; } .ux4g-min-w-0 { min-width: 0; } .ux4g-min-w-full { min-width: 100%; } /* ======================== 5. HEIGHT (PERCENT) ======================== */ .ux4g-h-0 { height: 0; } .ux4g-h-25 { height: 25%; } .ux4g-h-50 { height: 50%; } .ux4g-h-75 { height: 75%; } .ux4g-h-100 { height: 100%; } .ux4g-h-auto { height: auto; } /* ======================== 6. HEIGHT (FIXED) ======================== */ .ux4g-hpx-100 { height: 100px; } .ux4g-hpx-150 { height: 150px; } .ux4g-hpx-200 { height: 200px; } .ux4g-hpx-300 { height: 300px; } .ux4g-hpx-400 { height: 400px; } /* ======================== 7. SPECIAL HEIGHT ======================== */ .ux4g-h-min { height: min-content; } .ux4g-h-max { height: max-content; } .ux4g-h-fit { height: fit-content; } .ux4g-h-screen { height: 100vh; } .ux4g-h-dvh { height: 100dvh; } /* ======================== 8. MIN / MAX HEIGHT ======================== */ .ux4g-max-h-full { max-height: 100%; } .ux4g-max-h-screen { max-height: 100vh; } .ux4g-min-h-0 { min-height: 0; } .ux4g-min-h-full { min-height: 100%; } .ux4g-min-h-screen { min-height: 100vh; } .ux4g-min-h-dvh { min-height: 100dvh; } /* ========================================= LOGICAL SIZING (RTL SAFE) ========================================= */ /* INLINE SIZE */ .ux4g-is-auto { inline-size: auto; } .ux4g-is-full { inline-size: 100%; } .ux4g-is-fit { inline-size: fit-content; } .ux4g-is-screen { inline-size: 100vi; } /* BLOCK SIZE */ .ux4g-bs-auto { block-size: auto; } .ux4g-bs-full { block-size: 100%; } .ux4g-bs-fit { block-size: fit-content; } .ux4g-bs-screen { block-size: 100vb; } /* MIN/MAX LOGICAL */ .ux4g-min-is-0 { min-inline-size: 0; } .ux4g-min-is-full { min-inline-size: 100%; } .ux4g-max-is-full { max-inline-size: 100%; } .ux4g-min-bs-0 { min-block-size: 0; } .ux4g-min-bs-full { min-block-size: 100%; } .ux4g-min-bs-screen { min-block-size: 100vb; } .ux4g-max-bs-full { max-block-size: 100%; } ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.