Why do I need a Sizing System?

A sizing system is a great tool to have when building user interfaces because it limits the choices for a padding, a width, a margin, etc. It will help you avoid playing the pixel game. Every size in the scale is clearly differentiated from its closer sizes, and that makes it extremely easy to select the right size.

If you stick to the scaling system, all your UIs will have a good vertical and horizontal spacing rhythm. Every small detail makes a huge difference in the look and feel of your interface.

Sizing and Scaling System

var(--size-00)
0px / 0px
var(--size-01)
0.125rem / 2px
var(--size-02)
0.25rem / 4px
var(--size-03)
0.5rem / 8px
var(--size-04)
0.75rem / 12px
var(--size-05)
1rem / 16px
var(--size-06)
1.5rem / 24px
var(--size-07)
2rem / 32px
var(--size-08)
3rem / 48px
var(--size-09)
4rem / 64px
var(--size-10)
6rem / 96px
var(--size-11)
8rem / 128px
var(--size-12)
12rem / 192px
var(--size-13)
16rem / 256px
var(--size-14)
24rem / 384px
var(--size-15)
32rem / 512px
var(--size-16)
48rem / 768px
var(--size-17)
64rem / 1024px
var(--size-18)
90rem / 1440px

Customizing

Dashvar's sizing and spacing system should have enough choices for most interfaces. However, you can always extend it with your own sizes.

You can add new sizes adding more variables to the :root pseudo-class:

:root {
  --size-xs: 5px; 
  --size-s: 10px; 
  --size-m: 20px; 
  --size-l: 40px; 
  --size-xl: 80px; 
}