Sizing

Width, height, and viewport-minimum utilities. Every class emits with !important — these are escape hatches whose explicit job is to override any component-level sizing rule.

How it works

Width and height share the same default percentage scale (25, 50, 75, 100, auto). Pass $widths and $heights independently to decouple them.
Two prefix conventions live in this helper:
- .w-* / .h-* for percentage sizes (Bootstrap-style)
- .is-fullwidth / .is-fullheight for the 100 % shorthand (Bulma-style)
Max-* and min-* viewport utilities use Bootstrap's conventional naming: .mw-100, .mh-100, .min-vw-100, .min-vh-100.

Live

Percentage widths

Live

.w-25

.w-50

.w-75

.w-100

HTML

<div style="display: grid; gap: 0.25rem; background: var(--kc-default-bg); padding: 0.5rem;">
<div class="w-25" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 0.25rem 0.5rem;">.w-25</div>
<div class="w-50" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 0.25rem 0.5rem;">.w-50</div>
<div class="w-75" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 0.25rem 0.5rem;">.w-75</div>
<div class="w-100" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 0.25rem 0.5rem;">.w-100</div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-sizing')
);

Playground

.is-fullwidth shorthand

Live

HTML

<div style="background: var(--kc-default-bg); padding: 0.5rem;">
<button class="is-fullwidth" style="background: var(--kc-success-bg); color: var(--kc-success-fg); border: 0; padding: 0.4rem 0.8rem;">.is-fullwidth</button>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-sizing')
);

Playground

Markup

<!-- Percentage width / height -->
<img class="w-100" src="…" alt="" />
<div class="w-50">Half the parent</div>
<div class="h-75">Three quarters of the parent height</div>

<!-- Full-width / full-height aliases -->
<button class="is-fullwidth">Full width button</button>

<!-- Image safety nets -->
<img class="mw-100" src="…" alt="" />

<!-- Hero panels and full-bleed sections -->
<section class="min-vh-100">Full-viewport section</section>

Class reference

Class	Declaration
`.w-25`	`width: 25%`
`.w-50`	`width: 50%`
`.w-75`	`width: 75%`
`.w-100`	`width: 100%`
`.w-auto`	`width: auto`
`.h-25`	`height: 25%`
`.h-50`	`height: 50%`
`.h-75`	`height: 75%`
`.h-100`	`height: 100%`
`.h-auto`	`height: auto`
`.is-fullwidth`	`width: 100%`
`.is-fullheight`	`height: 100%`
`.mw-100`	`max-width: 100%`
`.mh-100`	`max-height: 100%`
`.min-vw-100`	`min-width: 100vw`
`.min-vh-100`	`min-height: 100vh`

Variables

Variable	Default	Notes
`$selector-prefix`	`'.is-'` (from framework root)	Re-uses `variables.$selector-prefix-is`. Affects `.is-fullwidth` / `.is-fullheight` only.
`$selector-prefix-w`	`'.w-'`	Prefix for percentage-width classes (`.w-25`, `.w-50`, …).
`$selector-prefix-h`	`'.h-'`	Prefix for percentage-height classes.
`$selector-prefix-mw`	`'.mw-'`	Prefix for max-width classes (`.mw-100`).
`$selector-prefix-mh`	`'.mh-'`	Prefix for max-height classes (`.mh-100`).
`$selector-prefix-vw`	`'.vw-'`	Reserved for future viewport-width classes; not emitted by default.
`$selector-prefix-vh`	`'.vh-'`	Reserved for future viewport-height classes; not emitted by default.
`$selector-prefix-min-vw`	`'.min-vw-'`	Prefix for min viewport-width classes (`.min-vw-100`).
`$selector-prefix-min-vh`	`'.min-vh-'`	Prefix for min viewport-height classes (`.min-vh-100`).
`$widths`	`(25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto)`	Map of class-key to width value. Add or remove entries to extend / shrink the matrix.
`$heights`	Same as `$widths`	Defaults to the width map. Override independently to ship different scales for width and height.

Override example

@use '@adnap/krysalicss/helper/sizing' with (
  // Tighten or extend the percentage scale:
  $widths: (
    33:    33.3333%,
    50:    50%,
    66:    66.6666%,
    100:   100%,
    auto:  auto,
  ),
  // Heights default to the same map as widths; override independently if needed:
  $heights: (
    100:  100%,
    full: 100vh,
    auto: auto,
  ),
);

Tokens consumed

None — sizing helpers emit literal percentage / viewport values from their source maps.