# width

The markup of every demo on <https://kuiper.oeds.it/width/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## fraction

Varies: 66 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-2"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-2</p></div></div></div>
 <div class="width-1-3"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-3</p></div></div></div>
 <div class="width-2-3"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2-3</p></div></div></div>
 <div class="width-1-4"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-4</p></div></div></div>
 <div class="width-2-4"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2-4</p></div></div></div>
 <div class="width-3-4"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3-4</p></div></div></div>
 <div class="width-1-5"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-5</p></div></div></div>
 <div class="width-2-5"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2-5</p></div></div></div>
 <div class="width-3-5"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3-5</p></div></div></div>
 <div class="width-4-5"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">4-5</p></div></div></div>
 <div class="width-1-6"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-6</p></div></div></div>
 <div class="width-2-6"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2-6</p></div></div></div>
 <div class="width-3-6"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3-6</p></div></div></div>
 <div class="width-4-6"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">4-6</p></div></div></div>
 <div class="width-5-6"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">5-6</p></div></div></div>
 <div class="width-1-7"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-7</p></div></div></div>
 <div class="width-2-7"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2-7</p></div></div></div>
 <div class="width-3-7"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3-7</p></div></div></div>
 <div class="width-4-7"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">4-7</p></div></div></div>
 <div class="width-5-7"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">5-7</p></div></div></div>
 <div class="width-6-7"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">6-7</p></div></div></div>
 <div class="width-1-8"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-8</p></div></div></div>
 <div class="width-2-8"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2-8</p></div></div></div>
 <div class="width-3-8"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3-8</p></div></div></div>
 <div class="width-4-8"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">4-8</p></div></div></div>
 <div class="width-5-8"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">5-8</p></div></div></div>
 <div class="width-6-8"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">6-8</p></div></div></div>
 <div class="width-7-8"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">7-8</p></div></div></div>
 <div class="width-1-9"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-9</p></div></div></div>
 <div class="width-2-9"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2-9</p></div></div></div>
 <div class="width-3-9"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3-9</p></div></div></div>
 <div class="width-4-9"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">4-9</p></div></div></div>
 <div class="width-5-9"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">5-9</p></div></div></div>
 <div class="width-6-9"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">6-9</p></div></div></div>
 <div class="width-7-9"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">7-9</p></div></div></div>
 <div class="width-8-9"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">8-9</p></div></div></div>
 <div class="width-1-10"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-10</p></div></div></div>
 <div class="width-2-10"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2-10</p></div></div></div>
 <div class="width-3-10"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3-10</p></div></div></div>
 <div class="width-4-10"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">4-10</p></div></div></div>
 <div class="width-5-10"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">5-10</p></div></div></div>
 <div class="width-6-10"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">6-10</p></div></div></div>
 <div class="width-7-10"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">7-10</p></div></div></div>
 <div class="width-8-10"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">8-10</p></div></div></div>
 <div class="width-9-10"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">9-10</p></div></div></div>
 <div class="width-1-11"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-11</p></div></div></div>
 <div class="width-2-11"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2-11</p></div></div></div>
 <div class="width-3-11"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3-11</p></div></div></div>
 <div class="width-4-11"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">4-11</p></div></div></div>
 <div class="width-5-11"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">5-11</p></div></div></div>
 <div class="width-6-11"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">6-11</p></div></div></div>
 <div class="width-7-11"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">7-11</p></div></div></div>
 <div class="width-8-11"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">8-11</p></div></div></div>
 <div class="width-9-11"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">9-11</p></div></div></div>
 <div class="width-10-11"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">10-11</p></div></div></div>
 <div class="width-1-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">1-12</p></div></div></div>
 <div class="width-2-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2-12</p></div></div></div>
 <div class="width-3-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3-12</p></div></div></div>
 <div class="width-4-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">4-12</p></div></div></div>
 <div class="width-5-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">5-12</p></div></div></div>
 <div class="width-6-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">6-12</p></div></div></div>
 <div class="width-7-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">7-12</p></div></div></div>
 <div class="width-8-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">8-12</p></div></div></div>
 <div class="width-9-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">9-12</p></div></div></div>
 <div class="width-10-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">10-12</p></div></div></div>
 <div class="width-11-12"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">11-12</p></div></div></div>
</div>
```

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

Varies: the `width-*` ladder over 29 rungs, `13xs` to `13xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-19xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">19xs</p></div></div></div>
 <div class="width-18xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">18xs</p></div></div></div>
 <div class="width-17xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">17xs</p></div></div></div>
 <div class="width-16xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">16xs</p></div></div></div>
 <div class="width-15xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">15xs</p></div></div></div>
 <div class="width-14xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">14xs</p></div></div></div>
 <div class="width-13xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">13xs</p></div></div></div>
 <div class="width-12xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">12xs</p></div></div></div>
 <div class="width-11xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">11xs</p></div></div></div>
 <div class="width-10xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">10xs</p></div></div></div>
 <div class="width-9xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">9xs</p></div></div></div>
 <div class="width-8xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">8xs</p></div></div></div>
 <div class="width-7xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">7xs</p></div></div></div>
 <div class="width-6xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">6xs</p></div></div></div>
 <div class="width-5xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">5xs</p></div></div></div>
 <div class="width-4xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">4xs</p></div></div></div>
 <div class="width-3xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3xs</p></div></div></div>
 <div class="width-2xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2xs</p></div></div></div>
 <div class="width-xs"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">xs</p></div></div></div>
 <div class="width-s"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">s</p></div></div></div>
 <div class="width-m"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">m</p></div></div></div>
 <div class="width-l"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">l</p></div></div></div>
 <div class="width-xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">xl</p></div></div></div>
 <div class="width-2xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">2xl</p></div></div></div>
 <div class="width-3xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">3xl</p></div></div></div>
 <div class="width-4xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">4xl</p></div></div></div>
 <div class="width-5xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">5xl</p></div></div></div>
 <div class="width-6xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">6xl</p></div></div></div>
 <div class="width-7xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">7xl</p></div></div></div>
 <div class="width-8xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">8xl</p></div></div></div>
 <div class="width-9xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">9xl</p></div></div></div>
 <div class="width-10xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">10xl</p></div></div></div>
 <div class="width-11xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">11xl</p></div></div></div>
 <div class="width-12xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">12xl</p></div></div></div>
 <div class="width-13xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">13xl</p></div></div></div>
 <div class="width-14xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">14xl</p></div></div></div>
 <div class="width-15xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">15xl</p></div></div></div>
 <div class="width-16xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">16xl</p></div></div></div>
 <div class="width-17xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">17xl</p></div></div></div>
 <div class="width-18xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">18xl</p></div></div></div>
 <div class="width-19xl"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">19xl</p></div></div></div>
</div>
```

## keyword

Varies: 5 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-auto"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">auto</p></div></div></div>
 <div class="width-expand"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">expand</p></div></div></div>
 <div class="width-fit-content"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">fit-content</p></div></div></div>
 <div class="width-max-content"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">max-content</p></div></div></div>
 <div class="width-min-content"><div class="card"><div class="background-white-dark text-center"><p class="background-muted">min-content</p></div></div></div>
</div>
```
