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.