# Viewboxes

Viewboxes are the mechanism by which things are positioned on the screen.

Viewboxes allow you to split the screen (`Size`) into many different sections. You can then anchor objects to specific anchor points within each box you create.

For instance: Here's a few Viewboxes:

```
TopHeaderView: Size[0] ^
    100~,
    0-,
]

TopHeaderHalves: TopHeaderView[1] >
    1:2,
    1:2,
]

TopHeaderThirdsLeft: TopHeaderHalves[0] ^
    1:3,
    1:3,
    1:3,
]
```

The viewboxes above resolve to these

- `TopHeaderView`
![TopHeaderView viewbox image](images/TopHeaderView.png)
- `TopHeaderHalves`
![TopHeaderHalves viewbox image](images/TopHeaderHalves.png)
- `TopHeaderThirdsLeft`
![TopHeaderThirdsLeft viewbox image](images/TopHeaderThirdsLeft.png)

The only Viewbox that's provided for you is `Size`, which is just one box, that is the full size of the screen.

- `TopHeaderView` splits `Size` into 2 boxes
  - One box is 100 logical pixels long
  - And the second box has a minimum length of 0 logical pixels (you can use `0-` to just make the box take the rest of the splitting area).

- `TopHeaderHalves` splits `TopHeaderView` into 2 more boxes
  - One box takes one half of the splitting area
  - And the other box takes the other half of the splitting area

- Finally, `TopHeaderThirdsLeft` splits `TopHeaderView` into 3 more boxes
  - One box takes one third of the splitting area
  - Another box takes one third of the splitting area
  - And the last box takes one third of the splitting area

You'll also notice that each viewbox is split in different directions

  - `^` and `_` mean that the viewbox is splititng horizontally, or that the boxes are travelling downwards as the box index increases
  - `>` and `<` mean that the viewbox is splitting vertically, or that the boxes are travelling to the right as the box index increases

Viewboxes support many constraints aside from just ratios

- `{number}%`: Allocates a given percentage of the splitting area
- `{number}-`: Allocates at least a given size of the splitting area 
- `{number}+`: Allocates at most a given size of the splitting area
- `{number}~`: Allocates the exact size given of the splitting area
- `{number}:{number}`: Allocates the given ratio of the splitting area