width - WhirlUSS

INTRODUCTION

Introduction Core Concepts

GETTING STARTED

Installation Quick start Whirl Compiler Settings

CORE CONCEPTS

Using Utility Classes Style Functions Pseudo-Classes and states Responsive Design Responsive Base Element Theme Arbitrary Values

LAYOUT

aspect-ratio display overflow position visibility object-fit top / right / bottom / left

FLEXBOX

flex-basis flex-direction flex-wrap flex flex-grow flex-shrink gap justify-content align-content align-items align-self

SPACING

SIZING

width min-width max-width height min-height max-height

TYPOGRAPHY

font-size font-style auto-size text-outline letter-spacing text-align color word-spacing paragraph-spacing text-overflow overflow-position white-space

BACKGROUND

background-color background-image background-position background-repeat background-size

BORDER

border-radius border-width border-color

EFFECTS

text-shadow opacity

FILTER

Filter blur brightness contrast grayscale hue-rotate invert saturate sepia

TRANSITION

transition-property transition-duration transition-timing-function delay

TRANSFORM

rotate scale transform-origin translate

width

Utilities for controlling an element's width. Check this unity documentation for more information on width.

Class	Styles
w-<number>	width: (--spacing * <number>);
w-3xs	width: var(--container-3xs);
w-2xs	width: var(--container-2xs);
w-xs	width: var(--container-xs);
w-sm	width: var(--container-sm);
w-md	width: var(--container-md);
w-lg	width: var(--container-lg);
w-xl	width: var(--container-xl);
w-2xl	width: var(-container-2xl);
w-3xl	width: var(-container-3xl);
w-4xl	width: var(-container-xs);
w-5xl	width: var(-container-5xl);
w-6xl	width: var(-container-6xl);
w-7xl	width: var(-container-7xl);
w-auto	width: auto;
w-px	width: 1px;
w-full	width: 100%;
w-(<custom-property>)	width: var(<custom-property>);
w-[<value>]	width: <value>;

Join Us

Email UsWhirl-USS Framework UITK Text Animator UI Toolkit Animation UI Toolkit Pro