diff --git a/source/layout/units.rst b/source/layout/units.rst --- a/source/layout/units.rst +++ b/source/layout/units.rst @@ -63,7 +63,7 @@ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. hint:: - |devicon| As a developer, if you want to use DPI independent pixels use units.devicePixelRatio as a multiplier on physical pixels. Since units.devicePixelRatio is a float, make sure to round the results. Most of the time you want to floor it. + |devicon| As a developer, if you want to use DPI independent pixels in Plasma use units.devicePixelRatio or Units.devicePixelRatio in Kirigami as a multiplier on physical pixels. Since devicePixelRatio is a float, make sure to round the results. Most of the time you want to floor it. Fonts ~~~~~ @@ -78,26 +78,53 @@ Using DPI independet pixel with different font setting -base units in plasma --------------------- +Base units in Plasma and Kirigami +--------------------------------- +These base units are not only DPI independent, but scale according to the font +settings too. While designing, be careful not to rely on the ratio +between these, e.g. units.smallSpacing and units.largeSpacing, because these change +depending on font setting -There are special base units in plasma: +.. attention:: + The px values are only for design and mockup, don't use them for development. -- units.smallSpacing -- units.largeSpacing -- units.gridUnit +There are special base units in Plasma: -These are not only DPI independent but scale according to the font -settings too. While designing, be careful not to rely on the ratio -between units.smallSpacing and units.largeSpacing because these change -depending on font setting +- units.smallSpacing, 4px +- units.largeSpacing, 18px +- units.gridUnit, 18px -.. hint:: - |designicon| For mockup and design you can use these values: +And in Kirigami: + +- Units.smallSpacing, 4px +- Units.largeSpacing, 18px +- Units.gridUnit, 18px + +Icon sizes in Plasma and Kirigami +--------------------------------- +There are several predefined icon sizes in Plasma and Kirigami. You should always use these icon sizes. + +.. attention:: + The px values are only for design and mockup, don't use them for development. + +Plasma: + +- units.iconSizes.tiny, 8px +- units.iconSizes.small, 16px +- units.iconSizes.smallMedium, 22px +- units.iconSizes.medium, 32px +- units.iconSizes.large, 48px +- units.iconSizes.huge, 64px +- units.iconSizes.enormous, 128px + +Kirigami: - * units.smallSpacing = 4px - * units.largeSpacing = 18px - * units.gridUnit = 18px +- Units.iconSizes.small, 16px +- Units.iconSizes.smallMedium, 22px +- Units.iconSizes.medium, 32px +- Units.iconSizes.large, 48px +- Units.iconSizes.huge, 83px +- Units.iconSizes.enormous, 166px From design to code -------------------