{
- "title": "My Customer Design",
- "author": "John Doe, Doe Design Agency"
+{
+ "title": "My Customer Design",
+ "author": "John Doe, Doe Design Agency"
}
Learn how to use BSI designs by taking part in the e-learning for designs.
+Learn how to use BSI designs by taking part in the e-learning for designs.
The interactive e-learning helps you to reach your goal faster. @@ -1234,11 +1234,11 @@
design.json file. It contains general information on the design, such as the name and author, as well as element specific information, such as with which description and icon the elements are to be displayed to the right of the editor.
{
- "title": "My Customer Design",
- "author": "John Doe, Doe Design Agency"
+{
+ "title": "My Customer Design",
+ "author": "John Doe, Doe Design Agency"
}
{
- "__REM000": "-------------------- Metadata --------------------",
- "title": "My Customer Design",
- "author": "John Doe, Doe Design Agency",
- "schemaVersion": "22.0",
- "defaultLocale": "en",
- "__REM001": "-------------------- Content-Elements, -Groups and -Parts --------------------",
- "contentElementGroups": [
+Listing 3. Example of a fully featured design.json file
+
+{
+ "__REM000": "-------------------- Metadata --------------------",
+ "title": "My Customer Design",
+ "author": "John Doe, Doe Design Agency",
+ "schemaVersion": "22.0",
+ "defaultLocale": "en",
+ "__REM001": "-------------------- Content-Elements, -Groups and -Parts --------------------",
+ "contentElementGroups": [
{
- "groupId": "buttons-and-links",
- "label": "Buttons & Links",
- "contentElements": [
+ "groupId": "buttons-and-links",
+ "label": "Buttons & Links",
+ "contentElements": [
{
- "elementId": "button",
- "label": "Button",
- "icon": "megaphone",
- "file": "content-elements/button.html",
- "parts": [
+ "elementId": "button",
+ "label": "Button",
+ "icon": "megaphone",
+ "file": "content-elements/button.html",
+ "parts": [
{
- "partId": "link",
- "label": "Button"
+ "partId": "link",
+ "label": "Button"
}
],
- "styleConfigs": [
- "background-color"
+ "styleConfigs": [
+ "background-color"
]
}
]
},
{
- "groupId": "text-and-images",
- "label": "Text & Images",
- "contentElements": [
+ "groupId": "text-and-images",
+ "label": "Text & Images",
+ "contentElements": [
{
- "elementId": "text",
- "label": "Text",
- "icon": "text",
- "file": "content-elements/text.html",
- "parts": [
+ "elementId": "text",
+ "label": "Text",
+ "icon": "text",
+ "file": "content-elements/text.html",
+ "parts": [
{
- "partId": "formatted-text",
- "label": "Text",
- "htmlEditorConfig": "custom"
+ "partId": "formatted-text",
+ "label": "Text",
+ "htmlEditorConfig": "custom"
}
]
@@ -1298,34 +1298,34 @@ 2.1. The Basics
"__REM002": "-------------------- Style Configs --------------------",
+ "styleConfigs": {
+ "background-color": {
+ "label": "Background color",
+ "cssClasses": [
{
- "cssClass": "green-background",
- "label": "Green"
+ "cssClass": "green-background",
+ "label": "Green"
},
{
- "cssClass": "red-background",
- "label": "Red"
+ "cssClass": "red-background",
+ "label": "Red"
}
]
}
},
- "__REM003": "-------------------- HTML Editor Configs --------------------",
- "htmlEditorConfigs": {
- "custom": {
- "features": [
- "bold",
- "italic",
- "underline",
- "textColor"
+ "__REM003": "-------------------- HTML Editor Configs --------------------",
+ "htmlEditorConfigs": {
+ "custom": {
+ "features": [
+ "bold",
+ "italic",
+ "underline",
+ "textColor"
],
- "textColors": [
- "#16616d",
- "#383e42"
+ "textColors": [
+ "#16616d",
+ "#383e42"
]
}
}
@@ -1339,16 +1339,16 @@ 2.2.
Each content element is assigned to a group. Add an entry to the design.json file to specify an identifier and a display name for each group element.
-Listing 4. giving groups clearly identifiable descriptions
+Listing 4. Giving groups clearly identifiable descriptions
-"contentElementGroups": [
+"contentElementGroups": [
{
- "groupId": "buttons-and-links",
- "label": "Buttons & Links"
+ "groupId": "buttons-and-links",
+ "label": "Buttons & Links"
},
{
- "groupId": "text-and-images",
- "label": "Text & Images"
+ "groupId": "text-and-images",
+ "label": "Text & Images"
}
]
@@ -1360,19 +1360,19 @@ 2.3. Co
For each content element the following entries should be defined in order to get a clean user experience. The element identifier is the value of the data-bsi-element attribute, that is defined in the corresponding html file.
-Listing 5. important metadata for content elements
+Listing 5. Important metadata for content elements
-"contentElements": [
+"contentElements": [
{
- "elementId": "logo",
- "label": "Cooperate Logo",
- "description": "Visualize your corporate logo",
- "icon": "image",
- "file": "content-elements/logo.html",
- "parts": [
+ "elementId": "logo",
+ "label": "Cooperate Logo",
+ "description": "Visualize your corporate logo",
+ "icon": "image",
+ "file": "content-elements/logo.html",
+ "parts": [
{
- "partId": "image",
- "label": "Mobile image for Logo"
+ "partId": "image",
+ "label": "Mobile image for Logo"
}
]
}
@@ -1417,19 +1417,19 @@ 2.4. Styles
Figure 4. example of a style dropdown
-Listing 6. defining style capabilities
+Listing 6. Defining style capabilities
-"styleConfigs": {
- "background-color": {
- "label": "Background color",
- "cssClasses": [
+"styleConfigs": {
+ "background-color": {
+ "label": "Background color",
+ "cssClasses": [
{
- "cssClass": "green-background",
- "label": "Green"
+ "cssClass": "green-background",
+ "label": "Green"
},
{
- "cssClass": "red-background",
- "label": "Red"
+ "cssClass": "red-background",
+ "label": "Red"
}
]
}
@@ -1440,16 +1440,16 @@ 2.4. Styles
1 to n styles can be defined to appear as individual dropdowns in the editor, where one style can be selected from the list of styles.
-Listing 7. assigning style capabilities to content elements
+Listing 7. Assigning style capabilities to content elements
-"contentElements": [
+"contentElements": [
{
- "elementId": "button",
- "label": "Button",
- "styleConfigs": [
- "background-color",
- "border-color",
- "text-color"
+ "elementId": "button",
+ "label": "Button",
+ "styleConfigs": [
+ "background-color",
+ "border-color",
+ "text-color"
]
}
]
@@ -1483,17 +1483,17 @@ 2.5. Co
Listing 10. Rich text editor configuration example
-"htmlEditorConfigs": {
- "my-config": {
- "features": [
- "bold",
- "italic",
- "underline",
- "textColor"
+"htmlEditorConfigs": {
+ "my-config": {
+ "features": [
+ "bold",
+ "italic",
+ "underline",
+ "textColor"
],
- "textColors": [
- "#ff00cc",
- "#aabbcc"
+ "textColors": [
+ "#ff00cc",
+ "#aabbcc"
]
}
}
@@ -1505,15 +1505,15 @@ 2.5. Co
Listing 11. Applying an HTML editor configuration on a content element 'text'
-"contentElements": [
+"contentElements": [
{
- "elementId": "text",
- "label": "Text",
- "parts": [
+ "elementId": "text",
+ "label": "Text",
+ "parts": [
{
- "partId": "formatted-text",
- "label": "Text",
- "htmlEditorConfig": "my-config"
+ "partId": "formatted-text",
+ "label": "Text",
+ "htmlEditorConfig": "my-config"
}
]
@@ -1540,12 +1540,12 @@ 2.5.1. Feature
Listing 12. Feature list example
-"htmlEditorConfigs": {
- "my-config": {
- "features": [
- "bold",
- "italic",
- "underline"
+"htmlEditorConfigs": {
+ "my-config": {
+ "features": [
+ "bold",
+ "italic",
+ "underline"
]
}
}
@@ -1820,42 +1820,42 @@ 2.5.2. Value List
Listing 13. An example using configuration with different value lists set
-"htmlEditorConfigs": {
- "my-extended-config": {
- "features": [
- "bold",
- "italic",
- "underline"
+"htmlEditorConfigs": {
+ "my-extended-config": {
+ "features": [
+ "bold",
+ "italic",
+ "underline"
],
- "textColors": [
- "#16616d",
- "#ff7d00",
- "#383e42"
+ "textColors": [
+ "#16616d",
+ "#ff7d00",
+ "#383e42"
],
- "backgroundColors": [
- "#ffffff",
- "#383e42"
+ "backgroundColors": [
+ "#ffffff",
+ "#383e42"
],
- "formats": [
- "p",
- "h1",
- "h2",
- "pre"
+ "formats": [
+ "p",
+ "h1",
+ "h2",
+ "pre"
],
- "fontSizes": [
- 12,
- 16,
- 24
+ "fontSizes": [
+ 12,
+ 16,
+ 24
],
- "fontSizeUnit": "px",
- "fontSizeDefault": 16,
- "lineHeights": [
- 1,
- 1.15,
- 1.5,
- 2
+ "fontSizeUnit": "px",
+ "fontSizeDefault": 16,
+ "lineHeights": [
+ 1,
+ 1.15,
+ 1.5,
+ 2
],
- "enter": "p"
+ "enter": "p"
}
}
@@ -1873,19 +1873,19 @@ 2.5.2.1. Colors
Listing 14. textColor example
-"textColors": [
- "#16616d",
- "#ff7d00",
- "#383e42"
+"textColors": [
+ "#16616d",
+ "#ff7d00",
+ "#383e42"
]
Listing 15. backgroundColor example
-"backgroundColors": [
- "#ffffff",
- "#383e42"
+"backgroundColors": [
+ "#ffffff",
+ "#383e42"
]
@@ -1898,11 +1898,11 @@ 2.5.2
Listing 16. formats example
-"formats": [
- "p",
- "h1",
- "h2",
- "pre"
+"formats": [
+ "p",
+ "h1",
+ "h2",
+ "pre"
]
@@ -1986,11 +1986,11 @@ 2.5.2.3. Line h
Listing 17. lineHeight example
-"lineHeights": [
- 1,
- 1.15,
- 1.5,
- 2
+"lineHeights": [
+ 1,
+ 1.15,
+ 1.5,
+ 2
]
@@ -2061,15 +2061,15 @@ 2.5.2.4. Font size
Listing 18. fontSizes, fontSizeUnit and fontSizeDefault example
-"fontSizes": [
- 8,
- 12,
- 16,
- 24,
- 32
+"fontSizes": [
+ 8,
+ 12,
+ 16,
+ 24,
+ 32
],
-"fontSizeUnit": "px",
-"fontSizeDefault": 16
+"fontSizeUnit": "px",
+"fontSizeDefault": 16
@@ -2112,7 +2112,7 @@ 2.5.2.5. Entry mode
Listing 19. enter mode example
-"enter": "div"
+"enter": "div"
@@ -5727,7 +5727,7 @@