Creating a Bento-Layout with Perfection.dev
Tags: webdev, css, tutorial
Published: 2023-11-14 08:05:57

If you add Perfection.dev to your website and have our **Layout Designer** enabled, you get **70 out-of-the-box** layouts to chose from. 

But what if that's not enough? What if your designer has come up with a cool, new bento-inspired layout, that doesn't exist among Perfection's default layouts? 

Luckily, it's **super-easy** to add your own, custom layouts — and commit the changes through our CLI.

---

## First things first

On your page, you have a regular, 3-column layout looking like this:

![33:33:33 Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utpxeximugwlhejcyolv.png)

The new layout look like this:

![Bento](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k65u17ujivcnukw5krk6.png)

Let's break that layout into grid columns- and rows (unless the designer has provided a Figma-file with this info!)

In this case, seven columns should do the trick:

![Grid Visualiser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wutdxsil7sav6qw4ruvr.png)

The first grid-item spans **four columns**, the next one spans **three columns and two rows**. We need to write that information down for each item, as we're going to update _CSS Custom Properties_ with these values in a sec.

---

## Diving Deep into the Layout Designer

Perfection.dev provides _CSS Custom Properties_ for all the parts of the _Layout Designer_. The most obvious ones, like **gaps** and **widths** are "public", and prefixed with `--section-`. 

The more "private" properties, that are normally not meant to be tampered with (but it's perfectly fine to do so!), are all prefixed with double hyphens and an underscore, like `--_`.

In our bento-inspired layout, we need to control these three properties:

| Key | Description |
| --- | ----------- |
| `--_c` | Number of columns in the grid |
| `--_cs` | Column-span for an item in the grid |
| `--_rs` | Row-span for an item in the grid |

Using the values we gathered earlier, we create a new layout, `sc-tp-bento`, and fill it out:

```css
/* Custom Bento-Layout */
.sc-tp-bento {
  --_c: 7;
  & >*:nth-child(7n+1) { --_cs: span 4; }
  & >*:nth-child(7n+2) { --_cs: span 3; --_rs: span 2; }
  & >*:nth-child(7n+3) { --_cs: span 2; --_rs: span 2; }
  & >*:nth-child(7n+4) { --_cs: span 2; --_rs: span 2; }
  & >*:nth-child(7n+5) { --_cs: span 3; }
  & >*:nth-child(7n+6) { --_cs: span 3; }
  & >*:nth-child(7n+7) { --_cs: span 4; }
}
```

What's up with the `7n+1`-pattern? 

Strictly, that's not needed, but it's useful if your content-creator adds **more** items than this layout was designed for. Then they will simply repeat the pattern.


---

## CLI

Time to add `sc-tp-bento` to your custom layouts.

First, we need to add our new layout to your site's **theme-file**, `theme.json`:


```json
  "layouts": {
"layouts": {
  "prebuilt": [...],
  "custom": [
    {
      "name": "Bento",
      "category": "grid",
      "description": "A custom layout using Bento-design",
      "class": "sc-tp-bento"
    }
  ]
},
```

Next, we need to **sync** this with the Perfection CLI:

```cmd
perfection app theme sync -f theme.json --apiKey  --subscription
```

Now, if you go to the **Admin Panel** of your site, you'll see the new layout:


![New Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ccwxnrgs8uzw5q66v9b.png)

... and finally, if you go to your website and open Perfection, you'll see the new layout in the list of layouts:


![Layout Designer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zwzoz79t6m35xpu2qnt.png)

---

Follow this channel to get more insights into Perfection.dev.