Creating a Bento-Layout with Perfection.dev

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:

The new layout look like this:

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:

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:

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

/* 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:

  "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:

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:

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

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