Repositioning Elements Tutorial

Let's make a game!

Settings
stylesheet:stuff/bigBlue.css

Resources
*res1
	name:Resource 1
	start with:100



*res2
	name:Resource 2
	start with:100

*res3
	name:Resource 3
	start with:100

Buttons
*specialButton1
	name:Special Button 1
	tag:specialButton
	class:special

*specialButton2
	name:Special Button 2
	tag:specialButton
	class:special

*specialButton3
	name:Special Button 3
	tag:specialButton
	class:special

*specialButton4
	name:Special Button 4
	tag:specialButton
	class:special

*button1
	name:Button 1

*button2
	name:Button 2

*button3
	name:Button 3

*bigButton1
class:bigButton
icon:https://file.garden/YYjCqvtBp0P7hcN1/coin%20button%20icon.png
tag:rightButton

*bigButton2
class:bigButton
icon:https://file.garden/YYjCqvtBp0P7hcN1/coin%20button%20icon.png
tag:leftButton

Layout
*main
  contains:res, buttons
  *res
    contains:Resources
    class:fullWidth
  *buttons
    contains:Buttons
*store
  contains:buildings, upgrades
  *buildings
    contains:BulkDisplay, Buildings
    header:Buildings
    tooltip origin:left
  *upgrades
    contains:Upgrades
    header:Upgrades
    costs:hide
    names:hide

*specialButtons
contains:tag:specialButton

*rightButtonBox
contains:tag:rightButton

*leftButtonBox
contains:tag:leftButton

CSS

.special
{
	float:left;
	margin:0px;
	width:33.3333333333333333333%;
	height:40px;
}

#box-buttons
{
	top:25%;
}

#box-main
{
	top:80%;
}

#box-rightButtonBox
{
	top:40%;
	right:5%;
}

#box-leftButtonBox
{
	top:40%;
	right:35%;
}

#box-store
{
	top:40px;
}

#box-specialButtons
{
	width:40%;
	height:40px;
	left:60%;
	background:#39f;
	overflow:auto;
}