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:
├── 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:
{
"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:
{
"name": "My Theme",
"key": "my-theme-key",
"description": "My theme description",
"componentFolders": ["./components/"],
"decorations": [...],
"layouts": [...]
}
Section Decorations
{
...
"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.
{
...
"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"
}
]
}
}