settings.json

{
    "pageTemplates": "WebModeler",
    "cssFiles": [
        "styles/web/css/main.css"
    ],
    "designProperties": {
        "Widget": [
            {
                "name": "Spacing top",
                "type": "Dropdown",
                "description": "The spacing above this element.",
                "options": [
                    {
                        "name": "None",
                        "class": "spacing-outer-top-none"
                    },
                    {
                        "name": "Small",
                        "class": "spacing-outer-top"
                    },
                    {
                        "name": "Medium",
                        "class": "spacing-outer-top-medium"
                    },
                    {
                        "name": "Large",
                        "class": "spacing-outer-top-large"
                    }
                ]
            },
            {
                "name": "Spacing bottom",
                "type": "Dropdown",
                "description": "The spacing below this element.",
                "options": [
                    {
                        "name": "None",
                        "class": "spacing-outer-bottom-none"
                    },
                    {
                        "name": "Small",
                        "class": "spacing-outer-bottom"
                    },
                    {
                        "name": "Medium",
                        "class": "spacing-outer-bottom-medium"
                    },
                    {
                        "name": "Large",
                        "class": "spacing-outer-bottom-large"
                    }
                ]
            },
            {
                "name": "Spacing left",
                "type": "Dropdown",
                "description": "The spacing to the left of this element.",
                "options": [
                    {
                        "name": "None",
                        "class": "spacing-outer-left-none"
                    },
                    {
                        "name": "Small",
                        "class": "spacing-outer-left"
                    },
                    {
                        "name": "Medium",
                        "class": "spacing-outer-left-medium"
                    },
                    {
                        "name": "Large",
                        "class": "spacing-outer-left-large"
                    }
                ]
            },
            {
                "name": "Spacing right",
                "type": "Dropdown",
                "description": "The spacing to the right of this element.",
                "options": [
                    {
                        "name": "None",
                        "class": "spacing-outer-right-none"
                    },
                    {
                        "name": "Small",
                        "class": "spacing-outer-right"
                    },
                    {
                        "name": "Medium",
                        "class": "spacing-outer-right-medium"
                    },
                    {
                        "name": "Large",
                        "class": "spacing-outer-right-large"
                    }
                ]
            },
            {
                "name": "Align self",
                "oldNames": [
                    "Align Self"
                ],
                "type": "Dropdown",
                "description": "Float the element to the left or to the right.",
                "options": [
                    {
                        "name": "Left",
                        "class": "pull-left"
                    },
                    {
                        "name": "Right",
                        "class": "pull-right"
                    }
                ]
            },
            {
                "name": "Hide on phone",
                "oldNames": [
                    "Hide On Phone"
                ],
                "type": "Toggle",
                "description": "Hide element on phone.",
                "class": "hide-phone"
            },
            {
                "name": "Hide on tablet",
                "oldNames": [
                    "Hide On Tablet"
                ],
                "type": "Toggle",
                "description": "Hide element on tablet.",
                "class": "hide-tablet"
            },
            {
                "name": "Hide on desktop",
                "oldNames": [
                    "Hide On Desktop"
                ],
                "type": "Toggle",
                "description": "Hide element on desktop.",
                "class": "hide-desktop"
            }
        ],
        "DivContainer": [
            {
                "name": "Align content",
                "type": "Dropdown",
                "description": "Align content of this element left, right or center it. Align elements inside the container as a row or as a column.",
                "options": [
                    {
                        "name": "Left align as a row",
                        "oldNames": [
                            "Left align as row"
                        ],
                        "class": "row-left"
                    },
                    {
                        "name": "Center align as a row",
                        "oldNames": [
                            "Center align as row"
                        ],
                        "class": "row-center"
                    },
                    {
                        "name": "Right align as a row",
                        "oldNames": [
                            "Right align as row"
                        ],
                        "class": "row-right"
                    },
                    {
                        "name": "Left align as a column",
                        "oldNames": [
                            "Left align as column"
                        ],
                        "class": "col-left"
                    },
                    {
                        "name": "Center align as a column",
                        "oldNames": [
                            "Center align as column"
                        ],
                        "class": "col-center"
                    },
                    {
                        "name": "Right align as a column",
                        "oldNames": [
                            "Right align as column"
                        ],
                        "class": "col-right"
                    }
                ]
            },
            {
                "name": "Background color",
                "type": "Dropdown",
                "description": "Change the background color of the container.",
                "options": [
                    {
                        "name": "Brand Default",
                        "oldNames": [
                            "Default"
                        ],
                        "class": "background-default"
                    },
                    {
                        "name": "Brand Primary",
                        "oldNames": [
                            "Primary"
                        ],
                        "class": "background-primary"
                    },
                    {
                        "name": "Brand Inverse",
                        "oldNames": [
                            "Inverse"
                        ],
                        "class": "background-inverse"
                    },
                    {
                        "name": "Brand Info",
                        "oldNames": [
                            "Info"
                        ],
                        "class": "background-info"
                    },
                    {
                        "name": "Brand Success",
                        "oldNames": [
                            "Success"
                        ],
                        "class": "background-success"
                    },
                    {
                        "name": "Brand Warning",
                        "oldNames": [
                            "Warning"
                        ],
                        "class": "background-warning"
                    },
                    {
                        "name": "Brand Danger",
                        "oldNames": [
                            "Danger"
                        ],
                        "class": "background-danger"
                    },
                    {
                        "name": "Background Default",
                        "class": "background-main"
                    },
                    {
                        "name": "Background Dashboard",
                        "class": "background-secondary"
                    }
                ]
            }
        ],
        "Button": [
            {
                "name": "Size",
                "type": "Dropdown",
                "description": "Size of the buttons",
                "options": [
                    {
                        "name": "Small",
                        "class": "btn-sm"
                    },
                    {
                        "name": "Large",
                        "class": "btn-lg"
                    }
                ]
            },
            {
                "name": "Full width",
                "type": "Toggle",
                "description": "Extend the button to the full width of the container it is placed in.",
                "class": "btn-block"
            },
            {
                "name": "Border",
                "oldNames": [
                    "Bordered"
                ],
                "type": "Toggle",
                "description": "Style the button with a transparent background, a colored border, and colored text.",
                "class": "btn-bordered"
            },
            {
                "name": "Align icon",
                "type": "Dropdown",
                "description": "Place the icon to the right or on top of the button.",
                "options": [
                    {
                        "name": "Right",
                        "class": "btn-icon-right"
                    },
                    {
                        "name": "Top",
                        "class": "btn-icon-top"
                    }
                ]
            }
        ],
        "ListView": [
            {
                "name": "Style",
                "type": "Dropdown",
                "description": "Change the appearance of rows in the list view.",
                "options": [
                    {
                        "name": "Striped",
                        "class": "listview-striped"
                    },
                    {
                        "name": "Bordered",
                        "class": "listview-bordered"
                    },
                    {
                        "name": "Lined",
                        "class": "listview-lined"
                    },
                    {
                        "name": "No Styling",
                        "class": "listview-stylingless"
                    }
                ]
            },
            {
                "name": "Hover style",
                "type": "Toggle",
                "description": "Highlight a row when hovering over it. Only useful when the row is clickable.",
                "class": "listview-hover"
            },
            {
                "name": "Row Size",
                "type": "Dropdown",
                "description": "Change the row spacing of the list view.",
                "options": [
                    {
                        "name": "Small",
                        "class": "listview-sm"
                    },
                    {
                        "name": "Large",
                        "class": "listview-lg"
                    }
                ]
            }
        ],
        "DataGrid": [
            {
                "name": "Style",
                "type": "Dropdown",
                "description": "Choose one of the following styles to change the appearance of the data grid.",
                "options": [
                    {
                        "name": "Striped",
                        "class": "datagrid-striped"
                    },
                    {
                        "name": "Bordered",
                        "class": "datagrid-bordered"
                    },
                    {
                        "name": "Lined",
                        "class": "datagrid-lined"
                    }
                ]
            },
            {
                "name": "Hover style",
                "type": "Toggle",
                "description": "Enable data grid hover to make the rows hoverable.",
                "class": "datagrid-hover"
            },
            {
                "name": "Row size",
                "type": "Dropdown",
                "description": "Increase or decrease the row spacing of the data grid row.",
                "options": [
                    {
                        "name": "Small",
                        "class": "datagrid-sm"
                    },
                    {
                        "name": "Large",
                        "class": "datagrid-lg"
                    }
                ]
            }
        ],
        "TemplateGrid": [
            {
                "name": "Style",
                "type": "Dropdown",
                "description": "Choose one of the following styles to change the appearance of the template grid.",
                "options": [
                    {
                        "name": "Striped",
                        "class": "templategrid-striped"
                    },
                    {
                        "name": "Bordered",
                        "class": "templategrid-bordered"
                    },
                    {
                        "name": "Lined",
                        "class": "templategrid-lined"
                    },
                    {
                        "name": "No styling",
                        "class": "templategrid-stylingless"
                    }
                ]
            },
            {
                "name": "Hover style",
                "type": "Toggle",
                "description": "Enable template grid hover to make the rows hoverable.",
                "class": "templategrid-hover"
            }
        ],
        "GroupBox": [
            {
                "name": "Style",
                "type": "Dropdown",
                "description": "Choose one of the following styles to change the appearance of the groupbox.",
                "options": [
                    {
                        "name": "Brand Default",
                        "oldNames": [
                            "Default"
                        ],
                        "class": "groupbox-default"
                    },
                    {
                        "name": "Brand Primary",
                        "oldNames": [
                            "Primary"
                        ],
                        "class": "groupbox-primary"
                    },
                    {
                        "name": "Brand Inverse",
                        "oldNames": [
                            "Inverse"
                        ],
                        "class": "groupbox-inverse"
                    },
                    {
                        "name": "Brand Info",
                        "oldNames": [
                            "Info"
                        ],
                        "class": "groupbox-info"
                    },
                    {
                        "name": "Brand Success",
                        "oldNames": [
                            "Success"
                        ],
                        "class": "groupbox-success"
                    },
                    {
                        "name": "Brand Warning",
                        "oldNames": [
                            "Warning"
                        ],
                        "class": "groupbox-warning"
                    },
                    {
                        "name": "Brand Danger",
                        "oldNames": [
                            "Danger"
                        ],
                        "class": "groupbox-danger"
                    },
                    {
                        "name": "Transparent",
                        "class": "groupbox-transparent"
                    }
                ]
            },
            {
                "name": "Callout style",
                "type": "Toggle",
                "description": "Enable the groupbox callout functionality to highlight the importance of the groupbox.",
                "class": "groupbox-callout"
            }
        ],
        "StaticImageViewer": [
            {
                "name": "Style",
                "type": "Dropdown",
                "description": "Choose the style of your image.",
                "options": [
                    {
                        "name": "Rounded",
                        "class": "img-rounded"
                    },
                    {
                        "name": "Thumbnail",
                        "class": "img-thumbnail"
                    },
                    {
                        "name": "Circle",
                        "class": "img-circle"
                    }
                ]
            },
            {
                "name": "Center",
                "type": "Toggle",
                "description": "Align the image in the center of an element.",
                "class": "img-center"
            }
        ],
        "DynamicImageViewer": [
            {
                "name": "Style",
                "type": "Dropdown",
                "description": "Choose the style of your image.",
                "options": [
                    {
                        "name": "Rounded",
                        "class": "img-rounded"
                    },
                    {
                        "name": "Thumbnail",
                        "class": "img-thumbnail"
                    },
                    {
                        "name": "Circle",
                        "class": "img-circle"
                    }
                ]
            },
            {
                "name": "Center",
                "type": "Toggle",
                "description": "Align the image in the center of an element.",
                "class": "img-center"
            }
        ],
        "Label": [
            {
                "name": "Style",
                "type": "Dropdown",
                "description": "Change the appearance of a label.",
                "options": [
                    {
                        "name": "Brand Default",
                        "oldNames": [
                            "Default"
                        ],
                        "class": "label-default"
                    },
                    {
                        "name": "Brand Primary",
                        "oldNames": [
                            "Primary"
                        ],
                        "class": "label-primary"
                    },
                    {
                        "name": "Brand Inverse",
                        "oldNames": [
                            "Inverse"
                        ],
                        "class": "label-inverse"
                    },
                    {
                        "name": "Brand Info",
                        "oldNames": [
                            "Info"
                        ],
                        "class": "label-info"
                    },
                    {
                        "name": "Brand Success",
                        "oldNames": [
                            "Success"
                        ],
                        "class": "label-success"
                    },
                    {
                        "name": "Brand Warning",
                        "oldNames": [
                            "Warning"
                        ],
                        "class": "label-warning"
                    },
                    {
                        "name": "Brand Danger",
                        "oldNames": [
                            "Danger"
                        ],
                        "class": "label-danger"
                    }
                ]
            }
        ],
        "DynamicText": [
            {
                "name": "Font Weight",
                "oldNames": [
                    "Weight"
                ],
                "type": "Dropdown",
                "description": "Emphasize the text with a heavier or lighter font weight",
                "options": [
                    {
                        "name": "Light",
                        "class": "text-light"
                    },
                    {
                        "name": "Normal",
                        "class": "text-normal"
                    },
                    {
                        "name": "Semibold",
                        "class": "text-semibold"
                    },
                    {
                        "name": "Bold",
                        "class": "text-bold"
                    }
                ]
            },
            {
                "name": "Color",
                "type": "Dropdown",
                "description": "Change the color of text.",
                "options": [
                    {
                        "name": "Header color",
                        "class": "text-header"
                    },
                    {
                        "name": "Detail color",
                        "class": "text-detail"
                    },
                    {
                        "name": "Brand Default",
                        "oldNames": [
                            "Default"
                        ],
                        "class": "text-default"
                    },
                    {
                        "name": "Brand Primary",
                        "oldNames": [
                            "Primary"
                        ],
                        "class": "text-primary"
                    },
                    {
                        "name": "Brand Inverse",
                        "oldNames": [
                            "Inverse"
                        ],
                        "class": "text-inverse"
                    },
                    {
                        "name": "Brand Info",
                        "oldNames": [
                            "Info"
                        ],
                        "class": "text-info"
                    },
                    {
                        "name": "Brand Success",
                        "oldNames": [
                            "Success"
                        ],
                        "class": "text-success"
                    },
                    {
                        "name": "Brand Warning",
                        "oldNames": [
                            "Warning"
                        ],
                        "class": "text-warning"
                    },
                    {
                        "name": "Brand Danger",
                        "oldNames": [
                            "Danger"
                        ],
                        "class": "text-danger"
                    }
                ]
            },
            {
                "name": "Alignment",
                "type": "Dropdown",
                "description": "Align the text.",
                "options": [
                    {
                        "name": "Left",
                        "class": "text-left d-block"
                    },
                    {
                        "name": "Center",
                        "class": "text-center d-block"
                    },
                    {
                        "name": "Right",
                        "class": "text-right d-block"
                    }
                ]
            },
            {
                "name": "Transform",
                "type": "Dropdown",
                "description": "Change the letter case of the text.",
                "options": [
                    {
                        "name": "Lowercase",
                        "class": "text-lowercase"
                    },
                    {
                        "name": "Uppercase",
                        "class": "text-uppercase"
                    },
                    {
                        "name": "Capitalize",
                        "class": "text-capitalize"
                    }
                ]
            },
            {
                "name": "Wrap options",
                "type": "Dropdown",
                "description": "Break long words and sentences into multiple lines.",
                "options": [
                    {
                        "name": "Wrap",
                        "class": "text-break"
                    },
                    {
                        "name": "No Wrap",
                        "class": "text-nowrap"
                    }
                ]
            }
        ]
    }
}