forked from adaptlearning/adapt-contrib-vanilla
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.json
227 lines (179 loc) · 8.94 KB
/
example.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
--------------------------------------------------
JSON
--------------------------------------------------
Background images, styles, minimum heights, and responsive classes json config
--------------------------------------------------
contentObjects.json
"_vanilla": {
"_backgroundImage": {
"_large": "course/en/images/example.jpg",
"_medium": "course/en/images/example.jpg",
"_small": "course/en/images/example.jpg"
},
"_backgroundStyles": {
"_backgroundSize": "contain",
"_backgroundRepeat": "repeat",
"_backgroundPosition": "center center"
},
"_responsiveClasses": {
"_large": "class-large",
"_medium": "class-medium",
"_small": "class-small"
},
"_pageHeader": {
"_backgroundImage": {
"_large": "course/en/images/example.jpg",
"_medium": "course/en/images/example.jpg",
"_small": "course/en/images/example.jpg"
},
"_backgroundStyles": {
"_backgroundSize": "contain",
"_backgroundRepeat": "repeat",
"_backgroundPosition": "center center"
},
"_minimumHeights": {
"_large": 600,
"_medium": 400,
"_small": 200
}
}
}
articles.json
"_vanilla": {
"_backgroundImage": {
"_large": "course/en/images/example.jpg",
"_medium": "course/en/images/example.jpg",
"_small": "course/en/images/example.jpg"
},
"_backgroundStyles": {
"_backgroundSize": "contain",
"_backgroundRepeat": "repeat",
"_backgroundPosition": "center center"
},
"_responsiveClasses": {
"_large": "class-large",
"_medium": "class-medium",
"_small": "class-small"
}
}
blocks.json
"_vanilla": {
"_backgroundImage": {
"_large": "course/en/images/example.jpg",
"_medium": "course/en/images/example.jpg",
"_small": "course/en/images/example.jpg"
},
"_backgroundStyles": {
"_backgroundSize": "contain",
"_backgroundRepeat": "repeat",
"_backgroundPosition": "center center"
},
"_minimumHeights": {
"_large": 600,
"_medium": 400,
"_small": 200
},
"_responsiveClasses": {
"_large": "class-large",
"_medium": "class-medium",
"_small": "class-small"
},
// Divider Block - adds class to `.block` element
"_isDividerBlock": false
}
On screen animation json config
--------------------------------------------------
blocks.json / components.json
"_onScreen": {
"_isEnabled": true,
"_comment": "Supported classes = 'fade-in' | 'fade-in-left' | 'fade-in-right' | 'fade-in-top' | 'fade-in-bottom'. Additional classes can be used but they must be predefined in one of the Less files",
"_classes": "fade-in-bottom",
"_percentInviewVertical": 50
}
--------------------------------------------------
Classes
--------------------------------------------------
Common classes
--------------------------------------------------
"_classes": "bg-color",
"_comment": "Sets up the solid background colour mixin. Combine with one of the following classes e.g. 'bg-color black'. Note: the following class must be a predefined variable. Mixin can be extended to include custom colours.",
"_classes": "transparent-light",
"_comment": "Sets the background colour of the block to transparent and changes the font colour to black. Useful for displaying text over a light background image.",
"_classes": "transparent-dark",
"_comment": "Sets the background colour of the block to transparent and changes the font colour to white. Useful for displaying text over a dark background image.",
"_classes": "black",
"_comment": "Sets the background colour of the block to black and changes the font colour to white.",
"_classes": "background",
"_comment": "Sets the background colour of the block to use the variable @background (default is black) and changes the font colour to use the variable @background-inverted (default is white). These variables can be changed in the ‘_colors.less’ file.",
Content Object classes
--------------------------------------------------
"_htmlClasses": "hide-nav-back-btn",
"_comment": "Hides the navigation back button on the page.",
"_classes": "hide-page-header",
"_comment": "Hides the page header on the page.",
"_classes": "header-color",
"_comment": "Sets up the header solid background colour mixin. Combine with one of the following classes e.g. 'header-color background'. Note: the following class must be a predefined variable. Mixin can be extended to include client colours. Can be set for menu and/or page header.",
"_classes": "transparent-light",
"_comment": "Sets the background colour of the header to transparent and changes the font colour to @font-color. Useful for displaying text over a light background image.",
"_classes": "transparent-dark",
"_comment": "Sets the background colour of the header to transparent and changes the font colour to @font-color-inverted. Useful for displaying text over a dark background image.",
"_classes": "background",
"_comment": "Sets the background colour of the header to use the variable @background (default is black) and changes the font colour to use the variable @background-inverted (default is white). These variables can be changed in the ‘_colors.less’ file.",
Block classes
--------------------------------------------------
"_classes": "align-vert-center",
"_comment": "Aligns the blocks child components centrally on the vertical axis.",
"_classes": "align-vert-bottom",
"_comment": "Aligns child components to the bottom of the parent block on the vertical axis.",
"_classes": "reverse-desktop-order",
"_comment": "Reverses the visual layout of the components above the medium breakpoint (default is 760px). e.g. Left layout components would still render first in the DOM order but visually appear on the right-hand side above the medium breakpoint. The components would vertically stack as per the DOM order below the breakpoint.",
"_classes": "extend-content-container",
"_comment": "Extend width of block to 70rem (default is 1120px).",
"_classes": "extend-container",
"_comment": "Extend width of block to max page width (default is 1440px).",
"_classes": "remove-padding-top | remove-top-padding",
"_comment": "Removes the top padding from block.",
"_classes": "remove-padding-bottom | remove-bottom-padding",
"_comment": "Removes the bottom padding from block.",
"_classes": "reduce-padding-top",
"_comment": "Reduce the blocks top padding by half.",
"_classes": "reduce-padding-bottom",
"_comment": "Reduce the blocks bottom padding by half.",
"_classes": "increase-padding-top",
"_comment": "Double the blocks top padding.",
"_classes": "increase-padding-bottom",
"_comment": "Double the blocks bottom padding.",
Component classes
--------------------------------------------------
Columns
Breakpoints are assigned from the smallest screen resolution to the widest until they reach the max width value. Multiple column classes can be defined on a singular component to change the layout responsively. The column number assigned to a component is configurable and can be any number between 1 and 12. It is advisable to not exceed a combined total of 12 columns for all components within a block for each breakpoint.
"_classes": "col-xs-8",
"_comment": "On screens ranging from 0px to 520px the component fills 8 out of the 12 columns available.",
"_classes": "col-sm-8",
"_comment": "On screens ranging from 520px to 760px the component fills 8 out of the 12 columns available.",
"_classes": "col-md-8",
"_comment": "On screens ranging from 760px to 900px the component fills 8 out of the 12 columns available.",
"_classes": "col-lg-8",
"_comment": "On screens ranging from 900px to 1440px the component fills 8 out of the 12 columns available.",
"_classes": "col-xl-8",
"_comment": "On screens above 1440px the component fills 8 out of the 12 columns available.",
Accordion item
"_classes": "align-image-left",
"_comment": "Aligns the image to the left of the body text on desktop, defaults to underneath on smaller screens.",
"_classes": "align-image-right",
"_comment": "Aligns the image to the right of the body text on desktop, defaults to underneath on smaller screens.",
Hotgraphic item
"_classes": "align-image-left",
"_comment": "Align the hotgraphic pop up image to the left on desktop.",
"_classes": "hide-desktop-image",
"_comment": "Hide the hotgraphic pop up image on desktop.",
"_classes": "hide-popup-image",
"_comment": "Hide the hotgraphic pop up image for all screen sizes.",
Media
"_classes": "invert-play-icon",
"_comment": "Inverts the media player play icon from white to black.",
"_classes": "offset-media-controls",
"_comment": "Offset control bar to display underneath the video element instead of overlaid. Useful for videos which contain subtitles or text within the bottom area of the video frame.",
Narrative
"_classes": "items-are-full-width",
"_comment": "Increases the width of the narrative elements to 100% in desktop view.",