Docs
Basic Setup

Basic Setup

Profile image
Miro Kosut
Jan 30, 2024 • 2 min read

Animations

Bento theme supports three animation options:

  • Disabled
  • Subtle
  • Playful

The default setting is subtle.

The animations apply to all Bento tiles across the site and trigger on scroll (each tile waits until it is visible before the animation runs).

Please go to Site → Design & branding → Site-wide (tab) and look for the Animation setting.

Brand

Although the basic setup has little to do with the Bento theme, it is recommended to make your website look more complete.

Please go to Site → Design & branding → Brand (tab).

Accent Color

Please skip this setting for a moment. We will return to the Accent Color in the chapter Color Scheme.

Publication Icon

Please make sure you have uploaded a publication icon.

🖼️
The recommended size of the publication icon is 500x500. It should be a square and it should not be transparent.

Bento shows the publication icon as a placeholder if no social media accounts have been set, for example.

Please make sure you have uploaded a publication logo.

🖼️
The recommended height of the publication logo is 256px, and it should be transparent.

The publication logo is always displayed in the top left corner of the site and it is linked to the home page. If no publication logo has been uploaded, the site's title is shown instead.

Publication Cover

Please make sure you have uploaded a publication cover.

💡
The recommended size of the publication cover is at least 1280x800.

By default, Bento uses the publication cover at the bottom of the first tile on the home page. This behavior can be overriden (see Homepage Sections).

Routes

Bento expects the default template for the homepage.

🛣️
Please ensure your routes do not have a specific route for the home page, such as "/: home" or similar.

Below is an example of the default routes.yaml file that has no specific routes for the homepage (which is good for Bento). It is also recommended to keep taxonomies (tag and author) there to prevent the Bento theme from showing errors whenever you click on a tag or an author.

## routes.yaml

routes:

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

For more information about Routes, please refer to the Ghost Documentation, specifically Dynamic URLs & Routing.

Package.json

Please do not adjust the "posts_per_page" key in the package.json file. Bento will not render the layout correctly if its value is not 8.