What does .gu stand for?

Question

What does .gu stand for?

For example:

ConditionalLayout {
    name: "row"
    when: layouts.width > units.gu(50) //right here
    Row {
        anchors.fill: parent etc....

Answer 1

gu is short for grid unit.

From the user interface manual:

Measurement Units

A new measurement unit is defined called the grid unit, abbreviated gu. 1 grid unit translates to a given number of pixels depending on the type of screen that the user interface is displayed on. For example, on a laptop computer 1 grid unit will typically translate to 8 pixels. The number of pixels per grid unit is chosen in order to preserve the perceived visual size of UI elements and therefore depends on the density of the display and the distance the user is to the screen. We also ensure that 1 grid unit is always an integer number of pixel.

Examples

• Most laptops 1 gu = 8 px
• Retina laptops 1 gu = 16 px
• Phone with 4 inch screen at HD resolution (around 720x1,280 pixels) 1 gu = 18 px
• Tablet with 10 inch screen at HD resolution (around 720x1,280 pixels) 1 gu = 10 px

---

So if you base all your measurements on GUs every device will look as intended.

---

Example

If the destination size of the bitmap is 10 gu * 10 gu and the developer targets a device that has 18 pixels per grid unit (1 gu = 18 px), the bitmap should still be created as if 1 gu = 30 px which results in a 300 px * 300 px bitmap. When testing on the device the bitmap will be downscaled by a factor of 30 / 18 = 1.66667.

---

Extra: for measurements smaller than 1 pixel you use "units.dp" in the same fashion.