Spacing

fronnt UI uses an adapted 4/8-point grid system for spacing and whitespace management to achieve a conisten interface design.

The multiples of the number 4 or 8 provide flexible and sufficiently clear steps for sizes, widths, distances, etc.. This allows easy and consistent scaling for diverse use cases.

Spacing levels are made available as CSS variables. They are not coupled to a JS framework and can even be used without any components.

--nn-spacing-1
0.25rem / 4px
--nn-spacing-2
0.5rem / 8px
--nn-spacing-3
0.75rem / 12px
--nn-spacing-4
1rem / 16px
--nn-spacing-5
1.25rem / 20px
--nn-spacing-6
1.5rem / 24px
--nn-spacing-7
2rem / 32px
--nn-spacing-8
2.5rem / 40px
--nn-spacing-9
3rem / 48px
--nn-spacing-10
4rem / 64px
--nn-spacing-11
5rem / 80px
--nn-spacing-12
6rem / 96px
--nn-spacing-13
8rem / 128px
--nn-spacing-14
10rem / 160px
--nn-spacing-15
12rem / 192px
--nn-spacing-16
14rem / 224px
--nn-spacing-17
16rem / 256px
© 2024  inniti