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.

Class
Example
.-w-1
Aa
.-w-5
Aa
.-w-25p
Aa

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

Class
Example
.w-0
Aa
.w-001
Aa
.w-002
Aa
.w-01
Aa
.w-02
Aa
.w-03
Aa
.w-04
Aa
.w-1
Aa
.w-2
Aa
.w-3
Aa
.w-4
Aa
.w-5
Aa
.w-6
Aa
.w-7
Aa
.w-8
Aa
.w-9
Aa
.w-10
Aa
.w-11
Aa
.w-12
Aa
.w-13
Aa
.w-14
Aa
.w-15
Aa
.w-16
Aa
.w-17
Aa
.w-18
Aa
.w-19
Aa
.w-20
Aa
.w-25ch
Aa
.w-50ch
Aa
.w-65ch
Aa
.w-75ch
Aa
.w-100ch
Aa
.w-10p
Aa
.w-20p
Aa
.w-25p
Aa
.w-30p
Aa
.w-33p
Aa
.w-40p
Aa
.w-50p
Aa
.w-60p
Aa
.w-66p
Aa
.w-70p
Aa
.w-75p
Aa
.w-80p
Aa
.w-90p
Aa
.w-100p
Aa
.w-50vh
Aa
.w-100vh
Aa
.w-50vw
Aa
.w-100vw
Aa
.w-auto
Aa
.w-lg
Aa
.w-md
Aa
.w-none
Aa
.w-prose
Aa
.w-sm
Aa
.w-xl
Aa