# Frame

A **Frame** is a **Scene2D Object** in **Incari** that acts as a 'container' to its *children* and has rigid boundaries. It is the only **Object** in **Scene2Ds** which can be a *parent*.

## Create

When a **Frame** is created, its boundaries are displayed in green, an example of which can be seen in the image below. It can then be populated with other **Objects**.

The dimensions of the **Frame** are provided in its **Attributes**.

Without any **Objects** as *children*, a **Frame** doesn't look like much:

![Frame Object Before.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-8c82c3e6b053bb49c02c66aa9fdfe1ba878fc101%2Fframeimage1update.png?alt=media)

An **Ellipse** and **Rectangle** are now added as *children*. Notice the `Position` and `Size` describe these boundaries numerically. The top-left corner starts at `0,0` and it extends 100 units in both the X and Y-axes. **Objects**, however, will still appear in full outside the boundaries of the **Frame** if they happen to not be entirely encapsulated.

![Frame with Objects.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-e4359694bd07d43b67e4dc40409358b338173e8f%2Fframeimage2update.png?alt=media)

## Attributes

![Frame Attributes.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-f8ded1d2ecb4016a1b695971c98b930142e626f0%2Fframeattributes.png?alt=media)

Find a description of a **Frame's** crucial **Attributes** in the sections below.

### Hug Content

When `Hug Content` is toggled on, the size of the **Frame** is always automatically recalculated to perfectly fit all its elements. If a `Layout` is used on the **Frame** and then an **Object** is added while `Hug Content` is on, the size of the **Frame** will increase. The same happens when a `Gap` or `Padding` is added.

![Hug Content in Frames.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-7ef3dcb845bde1c95db76f579fb25ba296d62f20%2Fhugcontentexamplegif.gif?alt=media)

### Layout

The `Layout` of the **Frame** can be adjusted to display its *children* horizontally or vertically. Please note that changing the `Layout` causes **Objects** to be placed at their default positions in the **Frame**. Here the gap between the **Ellipse** and **Rectangle** disappears when it is first changed to vertical.

![Frame Layout.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-e45af7aa5d1d815be95cc5e14ae87a24265895ed%2Fframelayout.gif?alt=media)

### Gap

This **Attribute** adds a gap between each of the **Objects** placed in the frame, with the specified distance given by the user.

![Gaps in Frames.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-39201933bc98ae1d207ef7eca8fd8a20e2e5005b%2Fgapexamplegif.gif?alt=media)

### Padding

This **Attribute** adds *padding* to a **Frame** depending on what sizes are specified and for which sides. The options are `t` for top, `r` for right, `b` for bottom, and `l` for left. [Padding](https://www.w3schools.com/cssref/pr_padding.php) is often seen in the context of *CSS*. Similarly, in **Incari**, it is the extra space around elements within the confines of the **Frame**.

![Padding in Frames.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-310cba6d8b484cc3e66d5a8b7b5ba2585f831ee6%2Fpaddingexamplegif.gif?alt=media)

### Crop

`Crop` cuts off all content which is outside of the **Frame**. However, this only applies to its *children* and not any unrelated **Objects** in the **Scene2D**.

If a *child* **Object** (or part of a *child* **Object**) is moved outside the boundary of the **Frame** and `Crop` is toggled on, the **Object** (or part of it) will no longer be visible.