vcl-layout-spans

Percentage based sizing spans.

Usage no npm install needed!

<script type="module">
  import vclLayoutSpans from 'https://cdn.skypack.dev/vcl-layout-spans';
</script>

README

VCL layout-spans

Percentage based sizing spans.

Features

Percentage based spans which can be used in many cases to set the width (and height) of a widget or a container.

Usage

The use with block elements is straight forward.

block example

They can also be applied to inline blocks.

inline block example

Or to flexbox based layouts.

flex example

Classes

  • vclSpan-5p, 10p, 15p .. 100p
  • vclSpan-33p
  • vclSpan-gca: Golden cut a.
  • vclSpan-gcb: Golden cut b.

Demo

example.html on GH-pages.