Spacing scale

Norska uses a custom scale for all dimension-based classes.

Shared scale

The same scale is used for the following classes.

• .w-*, .min-w-* and .max-w-* for controlling the width
• .min-w-*, .min-h-* and .max-h-* for controlling the min width
• .p-* for controlling the padding
• .m-* for controlling the margin
• .border-* for controlling the border width

The rationale is that I found having the same scale for handling both the dimensions and the spacing of elements made every alignment easier.

Default scale

The scale used by Norska is very different from the default Tailwind scale.

1. It ranges from 1 to 20.
   Tailwind goes from 1 to 64
2. All steps are defined.
   For example, there is no .w-7 or .w-52 in Tailwind
3. It is not proportional.
   Step n+1 is bigger than n, but 2*n is not twice as large as n.

Small and very small values

Values smaller that 1 can be achieved using the steps 01 to 04.

Very very small values (we're talking 1 or 2 pixels) can be used with the 001 and 002 steps.

Other units

All values of the default scale are expressed in rem. When a value is in another unit, the last characters of the key indicate the value (p, vh, vw or ch)

Some values might not be available if they don't make sense in a specific context (like border-50p)

Negative dimensions

The .-w-* and .-h-* classes allow setting dimensions expressed as full width/height of the container, minus *.

For example, .-h-5 will take the whole container height, minus 5 on the scale. Similarly, .-w-25p is the same as .w-75p.

Full scale

The following table displays all the available spacing. For the sake of clarity, it exposes them when used on a width, but they are equally available on all other relevant classes