Draft of my UI definitions

layout_main.lua

-- main menu layout:
-- title on top, buttons below

local margin = width * 0.05
local titleHeight = 100
local menuWidth = 400

Layout
{
	name = "main",
	-- title
	VerticalLayout -- vertical layout means the items in here will be put below one another
	{
		name = "title",
		position = { margin, margin },
		size = { width - 2 * margin, titleHeight },
		-- style "class" could go here (e.g.: border, bg color, bg image) - I'm postponing styles though, KISS.
	},
	-- main menu buttons
	VerticalLayout
	{
		name = "mainmenu",
		position = { width / 2 - menuWidth / 2, titleHeight + 2 * margin },
		size = { menuWidth, height - 3 * margin - titleHeight },
	},
}

menu_main.lua

-- main menu controls - title text, buttons and where they go (and in which order)

Menu
{
	name = "main",
	layout = "main",
	Text
	{
		text = "Main Menu",
		container = "title", -- in which layout container this goes
		order = 100, -- for ordering in the container
		-- style information could go here - e.g. a "class", whose properties are set via style file
	},
	Button
	{
		text = "Buttön!",
		container = "mainmenu",
		order = 100,
		OnClick = function(self, menu)
			print("Buttön has been pressed!")
		end,
	},
	Button
	{
		text = "Quit!",
		container = "mainmenu",
		order = 200,
		OnClick = function(self, menu)
			EndGame()
		end,
	},
}