@vcl/vcl/utils/demo/example-sizing.html

The whole VCL in one package

<div class="demoSizingContainer">
  <div class="w-25p">25% width</div>
</div>

<div class="demoSizingContainer">
  <div class="w-50p">50% width</div>
</div>

<div class="demoSizingContainer">
  <div class="w-75p">75% width</div>
</div>

<div class="demoSizingContainer">
  <div class="w-100p">100% width</div>
</div>

<code>row</code>
<div class="demoSizingContainer row">
  <div class="w-50p">50% width</div>
  <div class="w-50p">50% width</div>
</div>

<code>Responsive width</code>
<div class="demoSizingContainer row">
  <div class="w-100p w-md-50p">100% xs and 50% md</div>
  <div class="w-100p w-md-50p">100% xs and 50% md</div>
</div>

<code>row</code>
<div class="demoSizingContainer row">
  <div class="w-gca">gca</div>
  <div class="w-gcb">gcb</div>
</div>

<p>Responsive golden cut example: applies golden cut at large screen</p>
<div class="demoSizingContainer row">
  <div class="w-100p w-lg-gca">w-100p w-lg-gca</div>
  <div class="w-100p w-lg-gcb">w-100p w-lg-gcb</div>
</div>

<div class="demoSizingContainer">
  <div class="h-25p">25% height</div>
</div>

<div class="demoSizingContainer">
  <div class="h-50p">50% height</div>
</div>

<div class="demoSizingContainer">
  <div class="h-75p">75% height</div>
</div>

<div class="demoSizingContainer">
  <div class="h-100p">100% height</div>
</div>

<div class="demoSizingContainer">
  <div class="max-w-100p scrollable x">
    <div class="demoSizingVeryWide">100% max-width</div>
  </div>
</div>

<div class="demoSizingContainer">
  <div class="max-h-100p scrollable y">
    <div class="demoSizingVeryHigh">100% max-height</div>
  </div>
</div>

<code>col</code>
<div class="demoSizingContainer col">
  <div class="h-50p">50% height</div>
  <div class="h-50p">50% height</div>
</div>