You can use three different values in the design settings in the radiosphere Studio Editor to define sizes or distances of the components on your website and app:
- Pixel (px)
- Percent (%)
- Variables
Pixel (px)
Pixels are individual color values of a digitally generated raster graphic. The pixel has no fixed size but depends on the resolution of the digitally generated raster graphic. A pixel consists of smaller subpixels in the colors blue, green and red. Depending on how often these different colors occur as subpixels, the composition determines the color of the pixel. A pixel usually determines the overall image on the digital screen in combination with numerous other pixels.
If an overall image is enlarged too much, the registered number of pixels no longer corresponds to that of the overall image. The pixels become visible as individual ones and can distort the resolution of the overall image.
Percent (%)
The Percent (%) setting allows a graphic to be displayed in percentage of the total size (100%) of the web page or app. For example, if the sides of the graphic are set to 50% width and 50% height, it will be exactly half the total size of the web page or app.
Variables
Variables are units for fixed quantities that have been defined in advance. You can use them to set spacings and dimensions of components and pages in the radiosphere Studio Editor by selecting a value field in the Spacing section and choosing the desired variable from the dropdown list. You can find an overview of which variable designation stands for which size in the table below:
| Reference name | Description |
| base-unit | The px value that all spacings are based on |
| spacing-sp1 | The px value of spacing 1, the smallest spacer based on the base |
| spacing-sp2 | The px value of spacing 2 |
| spacing-sp3 | The px value of spacing 3 |
| spacing-sp4 | The px value of spacing 4 |
| spacing-sp5 | The px value of spacing 5 |
| spacing-sp6 | The px value of spacing 6 |
| spacing-sp7 | The px value of spacing 7 |
| spacing-sp8 | The px value of spacing 8 |
| spacing-sp9 | The px value of spacing 9 |
| padding-page | The px value for the space around the page |
| margin-float |
The px value for the space between a floating element and other content |
| margin-block |
The px value for the space between a block element and other content |
| margin-grid-cross-axis-spacing |
The px value for the space between two grid cells that are below each other |
| margin-grid-main-axis-spacing |
The px value for the space between two grid cells that are next to each other |
| layout-widths-page | The px value of the maximum page width (usually used on pages) |
| layout-widths-block |
The px value of the maximum block width (usually used on posts & other content) |