Spacing measures reference in pixels

0
Hi, I was wondering if there is a reference doc to compare how the spacing properties we set in our widgets (small, smallest, outer medium, inner large, etc) become when converted to pixels. I have navigated trhough mendix docs but i can’t seem to find this kind of information. Any thoughts on this?
asked
1 answers
2

The easiest way to do this is to inspect the element using the DevTools (or “F12 Tools”) built into chrome. You can inspect the element and drill into any class that’s applied to it.

If you wish to view the source code that produces the style rules, you can follow this path:

In your project’s `themesource` directory, you can view the file design-properties.json, which maps all the design properties you can manipulate in widgets to the classes that get applied. For example, in themesource/atlas_core/web/design-properties.json...

{
    "Widget": [
        {
            "name": "Spacing top",
            "type": "Dropdown",
            "description": "The spacing above this element.",
            "options": [
                {
                    "name": "Outer none",
                    "oldNames": ["None"],
                    "class": "spacing-outer-top-none"
                },
                {
                    "name": "Outer small",
                    "oldNames": ["Small"],
                    "class": "spacing-outer-top"
                },
            ...
            }
        ...
        }
    ...
    }
...
}

Then you can do a ctrl+shift+f in VS Code to find the definition of that class, `spacing-outer-top` to find the definition in themesource/altas_core/web/core/base/_spacing.scss…

.spacing-outer-top {
    margin-top: $spacing-small #{$important-spacing-value};
}

which, in turn relies on the `$spacing-small` variable, which you can then find in themesource/atlas_core/web/_variables.scss...

// Small spacing
$spacing-small: 8px !default;

By following this pattern you can find these values in the source files. 

answered