Skip to main content

Developers - CLI and Themes

theme.json

This file contains your Theme information and define the available Layouts and Decorations available for your Sections. It also contains a link to a directory that stores all your components configuration files. This practice enhances the maintability of your project by keeping component-specific settings distinct and easily accessible.

Files structure​

We recommend you to created a perfection directory at the root of your project that contains all the Themes and components configuration files that will be synced with our CLI. Your theme.json should be located at the root level as follow:

Project folder structure example
├── root
│  ├── perfection
│  │  ├── theme.json
│  │  ├── perfection.json
│  │  ├── components
│  │  │  ├── component-name.json
│  │  │  ├── hero-banner.json
│  │  │  ├── product-card.json
│  │  │  ├── ...

As an example, here is a theme json file with decorations and layouts set for your Sections:

theme.json
{
  "name": "My Theme",
  "key": "my-theme-key",
  "description": "My theme description",
  "componentFolders": ["./components/"],
  
  "decorations": [
    {
      "name": "Decoration 1",
      "class": "dark-decoration"
    },
    {
      "name": "Decoration 2",
      "class": "light-decoration"
    }
  ],

  "layouts": {
    "prebuilt": [
      "col_100",
      "col_50_50",
      "grid_2s_1l"
    ],
    "custom": [
      {
        "name": "20:80",
        "category": "grid",
        "description": "20% and 80% width",
        "class": "custom-20-80"
      }
    ]
  }
}

JSON schema​

Metadata​

The first thing you need to define are the theme's metadata information. Each theme must have a unique name and key, short description and link to a component folder:

theme.json
{
  "name": "My Theme",
  "key": "my-theme-key",
  "description": "My theme description",
  "componentFolders": ["./components/"],

  "decorations": [...],
  "layouts": [...]
}

Section Decorations​

theme.json
{
  ...

  "decorations": [
    {
      "name": "Decoration 1",
      "class": "dark-decoration"
    },
    {
      "name": "Decoration 2",
      "class": "light-decoration"
    }
  ],

  ...
}

Section Layouts​

If you are using Perfection Layouts System in your project, go to that page to see the list of 70+ available prebuilt layout. Simply adde them in the prebuild array.

theme.json
{
  ...

  "layouts": {
    "prebuilt": [
      "col_100",
      "col_50_50",
      "grid_2s_1l"
    ],
    "custom": [
      {
        "name": "20:80",
        "category": "grid",
        "description": "20% and 80% width",
        "class": "custom-20-80"
      }
    ]
  }
}