function layout()
    -- Here we define our Border sizes. Left and Right are dynamic, so we use up all the available space
    -- on either side of the main console. We assign some static values for top and bottom, though that's
    -- not generally best practices for distribution. 100 could be a lot of real estate on, say, a
    -- netbook.
    Vyzor.Options.Borders = {Left = "dynamic", Right = "dynamic", Top = 100, Bottom = 100}

    -- All of the Frames share the same Border, so we only need to instantiate it once. This will
    -- be re-used.
    ui_border = Vyzor.Border(
                        2,                                                                          -- Width.
                        Vyzor.BorderStyle.Solid,                                                -- Style.
                        Vyzor.Brush( Vyzor.Color( Vyzor.ColorMode.Name, "grey" ) ), -- Color.
                        10                                                                          -- Radius.
                    )

    -- Because the space at the top is NOT the entire length of the window, we make another Frame
    -- to act as the inner space. We make it the full size of Vyzor.Top (top border) for now; we
    -- will be adjusting its size dynamically later.
    top_container = Vyzor.Frame( "top_container" )
    -- Add this Frame to Vyzor.Top; a Frame fits inside its parent, and all scalar values are
    -- relative to its parent.
    Vyzor.Top:Add( top_container )
    -- Add our shared border.
    top_container:Add( ui_border )
    -- We add a Background. In practice, adding a black Background is redundant, since it's going
    -- to be black anyway. This might be necessary if you layer multiple Frames, and you want to hide
    -- what's underneath. I left this here for illustrative purposes.
    top_container:Add(
        Vyzor.Background(
            Vyzor.Brush( Vyzor.Color( Vyzor.ColorMode.Name, "black" ) )
        )
    )
    -- Now we add our Font. Sizes are different in my rewrite because, for some reason
    -- completely inexplicable, my Vyzor's 40px is different from Geyser's 40px. I have no
    -- idea, since it's all the same Stylesheet business underneath.
    top_container:Add(
        Vyzor.Font(
            30,                         -- Size.
            "Monospace",                -- Family.
            Vyzor.FontWeight.Bold   -- Weight.
        )
    )
    -- This sets the text color. I wouldn't have thought this necessary, but everything
    -- was black for me. Might be a Qt default.
    top_container:Add( Vyzor.Color( Vyzor.ColorMode.Name, "white" ) )

    -- Like our top_container, we make a new Frame. This time, though, we set our dimensions.
    -- Height is .25 (or 25% of its parent). In this case, the parent is Vyzor.Left, a Border
    -- Frame Vyzor creates that is exactly the size of Mudlet's left border.
    Locations = Vyzor.Frame( "Locations", 0, 0, 1, .25 )
    -- Shared border.
    Locations:Add( ui_border )
    -- Font.
    Locations:Add( Vyzor.Font( 10, "Monospace", Vyzor.FontWeight.Bold ) )
    -- Color.
    Locations:Add( Vyzor.Color( Vyzor.ColorMode.Name, "white" ) )
    -- And add the new Frame (Locations) to Vyzor.Left.
    Vyzor.Left:Add( Locations )

    -- Much of the same. y = .25, or 25% of the way down Vyzor.Left.
    Grouping = Vyzor.Frame( "Grouping", 0, .25, 1, .35 )
    Grouping:Add( ui_border )
    Grouping:Add( Vyzor.Font( 12, "Monospace", Vyzor.FontWeight.Bold ) )
    Grouping:Add( Vyzor.Color( Vyzor.ColorMode.Name, "white" ) )
    Vyzor.Left:Add( Grouping )

    -- Statistics completely fill Vyzor.Right. In fact, we could have just applied all of the
    -- Components to the Vyzor.Right. But, since it's a logically separate widget, it makes
    -- sense to make something specifically for it. You never know when you'd rather the
    -- widget take up 50% instead of 100%.
    Statistics = Vyzor.Frame( "Statistics" )
    Statistics:Add( ui_border )
    Statistics:Add( Vyzor.Font( 14, "Monospace", Vyzor.FontWeight.Bold ) )
    Statistics:Add( Vyzor.Color( Vyzor.ColorMode.Name, "white" ) )
    Vyzor.Right:Add( Statistics )

    -- This is the last part of any Vyzor GUI. You must Vyzor.HUD:Draw(). It's only necessary
    -- to call it once. You can also draw Frames individually, if you feel it necessary. But,
    -- standard practice is to make all of your Frames, call this, then hide the ones you don't
    -- want visible. This ensures proper layering (z-order) of the underlying labels.
    Vyzor.HUD:Draw()

    -- And now that the Frame exists, we can echo to it. Since this never changes, we only need
    -- echo once, so we do it here.
    top_container:Echo( [[<center>SLOTHMUD - A RETURN TO ITS ORIGINS</center>]] )
end

-- This function will handle all of the dynamic bits of the UI, like the changing values in
-- your variables. We also make sure the top_container is where it's supposed to be
-- relative to everything else.
function updateUi ()
    -- We need to know how big everything is. We could also get Vyzor.HUD.Size.AbsoluteWidth
    -- instead of calling this function.
    local screen_width = getMainWindowSize()
    -- This is our left border.
    local left_width = Vyzor.Left.Size.AbsoluteWidth
    -- This is our right border.
    local right_width = Vyzor.Right.Size.AbsoluteWidth

    -- top_container should starter where the left border ends.
    top_container:Move( left_width )
    -- And it should fit between both borders.
    top_container:Resize( screen_width - (left_width + right_width) )

    -- Honestly, this isn't the best way to handle this sort of thing. Personally, I would use Box Compounds,
    -- give each line its own Frame. Then I might handle updating the values separately; you can echo to
    -- Frames from anywhere, so the updating could be handled in a logically more appropriate function.
    -- However, this works, and if you only ever need to display this information (and not process it),
    -- updating it in a UI update function makes sense.
    -- Also, these long, concatenated strings are a pain to modify.
    Locations:Echo("LOCATION INFORMATION:<br><hr><br>Continent:".."nil".."<hr>Area: ".."nil".."<hr>Room: ".."nil".."<hr>Exits: ".."nil".."<hr>Terrain: ".."nil".."<hr>Room ID: ".."nil")

    Grouping:Echo("GROUP FIGHTING:<br><hr><br>Group Leader: ".."nil".."<hr>Tank Name: ".."nil".."<hr>Tank Health: ".."nil".."/".."nil".."<hr>Tank Level: ".."nil".."<hr><br>Enemy: ".."nil".."<hr>Level: ".."nil".."<hr>Health: ".."nil".."/".."nil")

    Statistics:Echo("STATS INFORMATION:<hr>Name: ".."nil".."<br>Citizen of ".."nil".."<br> Your alignment is: ".."nil".."<br>Sex: ".."nil".."<hr>Money: ".."nil".."<br>Drachma: ".."nil".."<hr>Levels:<br>".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".."<br>".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".."<br>Avatar: ".."nil".." ".."nil".."<hr> Experience: ".."nil".."<hr>Health: ".."nil".." / ".."nil".."<hr> Mana: ".."nil".." / ".."nil".."<hr> Moves: ".."nil".." / ".."nil".."<hr> AC: ".."nil".."<hr> HONOR: ".."nil".."<hr> STR:".."nil".."/".."nil".." CON:".."nil".."/".."nil".."<br> DEX:".."nil".."/".."nil".." WIS:".."nil".."/".."nil".."<br>INT:".."nil".."/".."nil".." CHAR:".."nil".."/".."nil".."<hr>Spells and Damage:<br>Weapon Damage: ".."nil".."<br>Stab Damage: ".."nil".."/".."nil".."<br>Hand Damage: ".."nil".."/".."nil".."<br> Undead Cont: ".."nil".."/".."nil".."<br>Spell Bonus: ".."nil".."/".."nil".."<br>Heal Bonus: ".."nil".."/".."nil".."<hr>Hitroll: ".."nil".."<hr>Damroll: ".."nil".."<hr>Damage Red: ".."nil".."/".."nil")
end

-- I wouldn't normally use an anonymous event handler, but for demonstration purposes, this works best.
-- Best practices: use the Script editor, add an event handler, and carry out the logic there.
-- But what this does, basically, is react every time Vyzor reports that it has resized (which
-- happens after Mudlet has resized). This ensures that all values you need (like Frame sizes) are
-- accurate and up-to-date.
registerAnonymousEventHandler( "VyzorResizedEvent", "updateUi" )

-- Vyzor doesn't like it when you try to redraw some stuff, so we only want to call layout once.
if not uiDrawn then
    layout()
    uiDrawn = true
end