Overview of Spacing
The Telerik and Kendo UI Design System provides a set of steps with predefined values for creating harmonious and yet logical usage inside of and between the components.
Note that along with typography, spacing is the other key element when building a component as spacing controls the negative area between the elements. For example, the height of the Button component is defined by the line height of its label and the vertical paddings.
Well-established spacing systems and their mindful and consistent usage is the foundation both for aesthetically pleasing and balanced UI, and for responsive and accessible design.
Scale
The Telerik and Kendo UI spacing scale consists of multiple steps. Except for step 0, which is used for borders, each step is represented by an even-numbered spacing value with a base unit of 8px. Each spacing value is a multiple of the base and, in the smaller 1-8 steps, the increments increase by 2px. This approach provides greater flexibility for setting the size of the components especially for more compact ones such as the Badge.
| Step | Example | rem | px |
|---|---|---|---|
| 0 | 0.0625 | 1 | |
| 0.5 | 0.125 | 2 | |
| 1 | 0.25 | 4 | |
| 1.5 | 0.375 | 6 | |
| 2 | 0.5 | 8 | |
| 2.5 | 0.625 | 10 | |
| 3 | 0.75 | 12 | |
| 3.5 | 0.875 | 14 | |
| 4 | 1 | 16 | |
| 4.5 | 1.125 | 18 | |
| 5 | 1.25 | 20 | |
| 5.5 | 1.375 | 22 | |
| 6 | 1.5 | 24 | |
| 6.5 | 1.625 | 26 | |
| 7 | 1.75 | 28 | |
| 7.5 | 1.875 | 30 | |
| 8 | 2 | 32 | |
| 9 | 2.25 | 36 | |
| 10 | 2.5 | 40 | |
| 11 | 2.75 | 44 | |
| 12 | 3 | 48 | |
| 13 | 3.25 | 52 | |
| 14 | 3.5 | 56 | |
| 15 | 3.75 | 60 | |
| 16 | 4 | 64 | |
| 17 | 4.25 | 68 | |
| 18 | 4.5 | 72 | |
| 19 | 4.75 | 76 | |
| 20 | 5 | 80 | |
| 21 | 5.25 | 84 | |
| 22 | 5.5 | 88 | |
| 23 | 5.75 | 92 | |
| 24 | 6 | 96 |
Variables
Each step of the spacing scale is controlled by the $kendo-spacing variable. $kendo-spacing is also related to paddings and margins, and not only affects the layout inside single components but also influences the spacing between multiple components.
$kendo-padding-x: 8px !default;
$kendo-padding-y: 4px !default;
$kendo-padding-sm-x: k-map-get( $kendo-spacing, 1 ) !default;
$kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
$kendo-padding-md-x: k-map-get( $kendo-spacing, 2 ) !default;
$kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
$kendo-padding-lg-x: k-map-get( $kendo-spacing, 3 ) !default;
$kendo-padding-lg-y: k-map-get( $kendo-spacing, 1.5 ) !default;
The value of the border radius also depends on the $kendo-spacing values:
$kendo-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
$kendo-border-radius-sm: $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
$kendo-border-radius-md: $kendo-border-radius !default;
$kendo-border-radius-lg: $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
