REBOL 3's next VID 3 prototype now supports skins. For a test three different skins were made by Gabriele Santilli, where the last two are derivatives of the first. These skins demonstrate the scalability of the user interface:

Notice something interesting? Yes, the background doesn't scale. What we're demonstrating is not actual resolution independence, but merely derivatives of the original skin from the top and each skin is just scaled differently. How exactly is the skin scaled? Well, like in VID, we can copy and override an original style. In VID3 we can take an entire skin-set and change certain globals in it, such as font size, padding and various other global aspects, to change the size of everything in the skin.

Such a skin derivative looks like this:

gray-big: gray [

  title: "Gray skin (big)"

  pad-size: 48x48

  fonts: [

    big: [

      size: 48

      name: "Tahoma"

      style: 'bold

      color: 139.69.19

    ]

    medium: [

      size: 36

      name: "Tahoma"

    ]

    strong: [

      size: 24

      name: "Tahoma"

      style: 'bold

    ]

    normal: [

      size: 24

      name: "Tahoma"

    ]

    small: [

      size: 22

      name: "Tahoma"

    ]

    big-link: [

      size: 48

      name: "Tahoma"

      color: 60.60.255

      style: [bold underline]

    ]

    medium-link: [

      size: 36

      name: "Tahoma"

      color: 60.60.255

      style: 'underline

    ]

    strong-link: [

      size: 24

      name: "Tahoma"

      color: 60.60.255

      style: [bold underline]

    ]

    link: [

      size: 24

      name: "Tahoma"

      color: 60.60.255

      style: 'underline

    ]

  ]

]

and you can change as much or as little as you want to for the skin.

Here's the source code to the three tests:

view [

  group 3 [

    toggle "One" toggle "Two" toggle "Three"

    check "One" check "Two" check "Three"

    radio "One" radio "Two" radio "Three"

  ]

]



make-skins [current: gray-small]

view [

  group 3 [

    toggle "One" toggle "Two" toggle "Three"

    check "One" check "Two" check "Three"

    radio "One" radio "Two" radio "Three"

  ]

]



make-skins [current: gray-big]

view [

  group 3 [

    toggle "One" toggle "Two" toggle "Three"

    check "One" check "Two" check "Three"

    radio "One" radio "Two" radio "Three"

  ]

]

Doesn't look so hard, does it?