@medyll/cssfabric 0.1.12 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (159) hide show
  1. package/.github/workflows/main.yml +33 -0
  2. package/.idea/cssfabric.iml +4 -1
  3. package/README.md +38 -240
  4. package/bin/index.js +2 -1
  5. package/{cssfabric.json → cssfabric.sass.js} +3 -3
  6. package/gulpfile.js +77 -143
  7. package/package.json +69 -69
  8. package/src/app.css +107 -0
  9. package/src/app.d.ts +15 -0
  10. package/src/app.html +13 -0
  11. package/src/components/Header.svelte +17 -0
  12. package/src/components/HeaderSiteTitle.svelte +12 -0
  13. package/src/components/InnerMenu.svelte +27 -0
  14. package/src/components/SubHeader.svelte +10 -0
  15. package/src/components/SubHeaderH.svelte +3 -0
  16. package/src/components/SubSubHeader.svelte +22 -0
  17. package/src/components/demo/DemoElement.svelte +86 -0
  18. package/src/components/demo/elements/DemoElementBackgroundColor.svelte +7 -0
  19. package/src/components/demo/elements/DemoElementBorder.svelte +8 -0
  20. package/src/components/demo/elements/DemoElementBorderColor.svelte +8 -0
  21. package/src/components/demo/elements/DemoElementColor.svelte +8 -0
  22. package/src/components/demo/elements/DemoElementGrid.svelte +53 -0
  23. package/src/components/demo/elements/DemoElementMargin.svelte +8 -0
  24. package/src/components/demo/elements/DemoElementPadding.svelte +10 -0
  25. package/src/components/demo/elements/DemoElementScale.svelte +9 -0
  26. package/src/components/demo/elements/DemoElementTable.svelte +34 -0
  27. package/src/components/demo/elements/DemoElementText.svelte +10 -0
  28. package/src/components/demo/proxy/ProxyDsp.svelte +12 -0
  29. package/src/components/demo/proxy/ProxyDspArray.svelte +19 -0
  30. package/src/components/demo/proxy/ProxyDspObject.svelte +17 -0
  31. package/src/components/docs/Docs.svelte +97 -0
  32. package/src/components/docs/DocsClassNames.svelte +34 -0
  33. package/src/components/docs/DocsDemo.svelte +84 -0
  34. package/src/components/header/Header.svelte +105 -0
  35. package/src/components/header/svelte-logo.svg +1 -0
  36. package/src/cssfabric/modules/_cssfabric-config.scss +15 -5
  37. package/src/cssfabric/modules/base/base.scss +1 -6
  38. package/src/cssfabric/modules/box/_box-build.scss +20 -3
  39. package/src/cssfabric/modules/box/_box-vars.scss +1 -1
  40. package/src/cssfabric/modules/css-fabric.scss +1 -1
  41. package/src/cssfabric/modules/menu/_menu-build.scss +9 -8
  42. package/src/cssfabric/modules/vars.scss +3 -2
  43. package/src/hooks.ts +27 -0
  44. package/src/index.ts +1 -1
  45. package/src/lib/_generated/cssFabric.vars.json +13 -0
  46. package/src/{_generated → lib/_generated}/export.variables.md +0 -0
  47. package/src/{_generated → lib/_generated}/index.d.ts +0 -0
  48. package/src/{_generated → lib/_generated}/readme.md +0 -0
  49. package/src/lib/init/importCssVars.ts +3 -0
  50. package/src/{scripts → lib/scripts}/cssfabric.ts +1 -1
  51. package/src/{scripts → lib/scripts}/cssfabricClassNames.ts +0 -0
  52. package/src/{scripts → lib/scripts}/index.d.ts +0 -0
  53. package/src/{scripts → lib/scripts}/index.ts +0 -0
  54. package/src/lib/scripts/utils.ts +37 -0
  55. package/{lib/styles/core → src/lib/styles}/animation/animation.css +0 -0
  56. package/{lib/styles/core → src/lib/styles}/animation/animation.min.css +0 -0
  57. package/{lib/styles/core → src/lib/styles}/base/base.css +0 -7
  58. package/src/lib/styles/base/base.min.css +1 -0
  59. package/{lib/styles/core → src/lib/styles}/box/box.css +127 -111
  60. package/src/lib/styles/box/box.min.css +1 -0
  61. package/{lib/styles/core → src/lib/styles}/box/box.responsive.css +508 -444
  62. package/src/lib/styles/box/box.responsive.min.css +1 -0
  63. package/{lib/styles/core → src/lib/styles}/color/color.css +0 -0
  64. package/src/lib/styles/color/color.min.css +1 -0
  65. package/{lib/styles/core → src/lib/styles}/color/color.responsive.css +0 -0
  66. package/src/lib/styles/color/color.responsive.min.css +1 -0
  67. package/src/lib/styles/cssfabric.css +61792 -0
  68. package/src/lib/styles/cssfabric.min.css +168 -0
  69. package/src/lib/styles/cssfabric.responsive.css +200596 -0
  70. package/src/lib/styles/cssfabric.responsive.min.css +108 -0
  71. package/{lib/styles/core → src/lib/styles}/flex/flex.css +0 -0
  72. package/src/lib/styles/flex/flex.min.css +1 -0
  73. package/{lib/styles/core → src/lib/styles}/flex/flex.responsive.css +0 -0
  74. package/src/lib/styles/flex/flex.responsive.min.css +1 -0
  75. package/{lib/styles/core → src/lib/styles}/grid/grid.css +0 -0
  76. package/src/lib/styles/grid/grid.min.css +1 -0
  77. package/{lib/styles/core → src/lib/styles}/grid/grid.responsive.css +0 -0
  78. package/src/lib/styles/grid/grid.responsive.min.css +1 -0
  79. package/{lib/styles/core → src/lib/styles}/menu/menu.css +16 -12
  80. package/src/lib/styles/menu/menu.min.css +1 -0
  81. package/{lib/styles/core → src/lib/styles}/menu/menu.responsive.css +64 -48
  82. package/src/lib/styles/menu/menu.responsive.min.css +1 -0
  83. package/{lib/styles/core → src/lib/styles}/overflow/overflow.css +0 -0
  84. package/{lib/styles/core → src/lib/styles}/overflow/overflow.min.css +0 -0
  85. package/{lib/styles/core → src/lib/styles}/overflow/overflow.responsive.css +0 -0
  86. package/src/lib/styles/overflow/overflow.responsive.min.css +1 -0
  87. package/{lib/styles/core → src/lib/styles}/scale/scale.css +0 -0
  88. package/{lib/styles/core → src/lib/styles}/scale/scale.min.css +0 -0
  89. package/{lib/styles/core → src/lib/styles}/scale/scale.responsive.css +0 -0
  90. package/src/lib/styles/scale/scale.responsive.min.css +1 -0
  91. package/{lib/styles/core → src/lib/styles}/table/table.css +0 -0
  92. package/src/lib/styles/table/table.min.css +1 -0
  93. package/{lib/styles/core → src/lib/styles}/table/table.responsive.css +0 -0
  94. package/src/lib/styles/table/table.responsive.min.css +1 -0
  95. package/{lib/styles/core → src/lib/styles}/text/text.css +0 -0
  96. package/src/lib/styles/text/text.min.css +1 -0
  97. package/{lib/styles/core → src/lib/styles}/text/text.responsive.css +0 -0
  98. package/src/lib/styles/text/text.responsive.min.css +1 -0
  99. package/{lib/styles/core → src/lib/styles}/theme/theme.css +0 -0
  100. package/{lib/styles/core → src/lib/styles}/theme/theme.min.css +0 -0
  101. package/{lib/styles/core → src/lib/styles}/vars.css +6 -2
  102. package/src/lib/styles/vars.min.css +1 -0
  103. package/{lib/styles/core → src/lib/styles}/zindex/zindex.css +0 -0
  104. package/{lib/styles/core → src/lib/styles}/zindex/zindex.min.css +0 -0
  105. package/src/routes/__layout.svelte +91 -0
  106. package/src/routes/cssfabric-modules/[module]/__layout.svelte +75 -0
  107. package/src/routes/cssfabric-modules/[module]/classnames/index.svelte +24 -0
  108. package/src/routes/cssfabric-modules/[module]/demo/index.svelte +24 -0
  109. package/src/routes/cssfabric-modules/[module]/docs/index.svelte +30 -0
  110. package/src/routes/cssfabric-modules/[module]/index.svelte +3 -0
  111. package/src/routes/cssfabric-modules/__layout.svelte +26 -0
  112. package/src/routes/cssfabric-modules/index.svelte +0 -0
  113. package/src/routes/index.svelte +62 -0
  114. package/src/routes/installation/__layout.svelte +1 -0
  115. package/src/routes/installation/index.svelte +28 -0
  116. package/src/scripts/utils.ts +26 -37
  117. package/src/utils.ts +71 -0
  118. package/static/favicon.png +0 -0
  119. package/static/robots.txt +3 -0
  120. package/svelte.config.js +25 -0
  121. package/tsconfig.json +3 -46
  122. package/cssfabric.config.js +0 -3
  123. package/lib/_generated/export.variables.json +0 -583
  124. package/lib/index.d.ts +0 -2
  125. package/lib/index.js +0 -7
  126. package/lib/scripts/cssfabric.d.ts +0 -24
  127. package/lib/scripts/cssfabric.js +0 -48
  128. package/lib/scripts/cssfabricClassNames.d.ts +0 -14
  129. package/lib/scripts/cssfabricClassNames.js +0 -150
  130. package/lib/scripts/index.d.ts +0 -2
  131. package/lib/scripts/index.js +0 -6
  132. package/lib/scripts/utils.d.ts +0 -5
  133. package/lib/scripts/utils.js +0 -40
  134. package/lib/styles/core/base/base.min.css +0 -1
  135. package/lib/styles/core/box/box.min.css +0 -1
  136. package/lib/styles/core/box/box.responsive.min.css +0 -1
  137. package/lib/styles/core/color/color.min.css +0 -1
  138. package/lib/styles/core/color/color.responsive.min.css +0 -1
  139. package/lib/styles/core/flex/flex.min.css +0 -1
  140. package/lib/styles/core/flex/flex.responsive.min.css +0 -1
  141. package/lib/styles/core/grid/grid.min.css +0 -1
  142. package/lib/styles/core/grid/grid.responsive.min.css +0 -1
  143. package/lib/styles/core/main.min.css +0 -1
  144. package/lib/styles/core/menu/menu.min.css +0 -1
  145. package/lib/styles/core/menu/menu.responsive.min.css +0 -1
  146. package/lib/styles/core/overflow/overflow.responsive.min.css +0 -1
  147. package/lib/styles/core/scale/scale.responsive.min.css +0 -1
  148. package/lib/styles/core/table/table.min.css +0 -1
  149. package/lib/styles/core/table/table.responsive.min.css +0 -1
  150. package/lib/styles/core/text/text.min.css +0 -1
  151. package/lib/styles/core/text/text.responsive.min.css +0 -1
  152. package/lib/styles/core/vars.min.css +0 -1
  153. package/lib/styles/core/vars2.css +0 -4
  154. package/lib/styles/core/vars2.min.css +0 -1
  155. package/lib/styles/cssfabric.css +0 -5147
  156. package/lib/styles/cssfabric.min.css +0 -16
  157. package/lib/styles/cssfabric.responsive.css +0 -16679
  158. package/lib/styles/cssfabric.responsive.min.css +0 -9
  159. package/src/_generated/export.variables.json +0 -759
@@ -1,759 +0,0 @@
1
- {
2
- "cssfabric": {
3
- "modules": {
4
- "animation": {
5
- "_data": {
6
-
7
- "attention_props": [],
8
- "in_out_props": {
9
- "back": []
10
- }
11
- }
12
-
13
- ,
14
- "_metadata": {
15
- "title": "animation", "description": "cssfabric simplest animation module"
16
- }
17
-
18
- ,
19
- "_docs": {
20
- "attention_props": "", "in_out_props": ""
21
- }
22
- }
23
-
24
- ,
25
- "base": {
26
- "_data": {
27
-
28
- "cfg-has-dimension-strict": true,
29
- "CFG_HAS_DIMENSION_MIN": true,
30
- "CFG_HAS_DIMENSION_MAX": true,
31
- "size_step": "0.5rem",
32
- "sizes": {
33
- "tiny": 32, "small": 64, "medium": 128, "large": 256, "full": "100%"
34
- }
35
- }
36
-
37
- ,
38
- "_metadata": {
39
- "title": "base", "tag": "base", "description": "cssfabric base config variables"
40
- }
41
-
42
- ,
43
- "_docs": []
44
- }
45
-
46
- ,
47
- "box": {
48
- "_data": {
49
-
50
- "unit-config": "rem",
51
- "border-unit-config": "px",
52
- "unit-size-config": 0.5,
53
- "unit-border-size-config": 1,
54
- "sizes-config": 12,
55
- "border-sizes-px-config": 3,
56
- "shadows-steps": 5,
57
- "shadows_step_multiplier": 2,
58
- "position-shorthand-config": "pos",
59
- "display-shorthand-config": "dsp",
60
- "shadow-shorthand-config": "shad",
61
- "border-shorthand-config": "border",
62
- "padding-shorthand-config": "pad",
63
- "margin-shorthand-config": "marg",
64
- "cssProps": {
65
- "borderShorthands": {
66
- "_": ["top", "bottom", "left", "right"], "t": "top", "b": "bottom", "l": "left", "r": "right", "all": ["top", "bottom", "left", "right"], "u": ["bottom", "left", "right"], "ii": ["left", "right"], "tb": ["top", "bottom"]
67
- }
68
-
69
- ,
70
- "positionProps": {
71
- "abs": "absolute", "rel": "relative", "stat": "static", "fix": "fixed", "sticky": "sticky"
72
- }
73
-
74
- ,
75
- "displayProps": {
76
- "block": "block", "none": "none", "inline": "inline", "block-inline": "inline-block", "flex-inline": "inline-flex", "tbl": "table", "tbl-row": "table-row", "tbl-cell": "table-cell", "tbl-column": "table-column"
77
- }
78
- }
79
- }
80
-
81
- ,
82
- "_metadata": {
83
- "title": "box", "tag": "box", "description": "cssfabric box module to set heights, paddings, margins and shadows on all html elements"
84
- }
85
-
86
- ,
87
- "_docs": {
88
- "attributes": {
89
- "padding": {
90
-
91
- "tag": "pad",
92
- "keys": ["_",
93
- "t",
94
- "b",
95
- "l",
96
- "r",
97
- "all",
98
- "u",
99
- "ii",
100
- "tb"],
101
- "values": {
102
- "_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"
103
- }
104
-
105
- ,
106
- "levels": {
107
- "_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
108
- }
109
-
110
- ,
111
- "about": "padding properties for html elements"
112
- }
113
-
114
- ,
115
- "margin": {
116
-
117
- "tag": "marg",
118
- "keys": ["_",
119
- "t",
120
- "b",
121
- "l",
122
- "r",
123
- "all",
124
- "u",
125
- "ii",
126
- "tb"],
127
- "values": {
128
- "_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"
129
- }
130
-
131
- ,
132
- "levels": {
133
- "_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
134
- }
135
-
136
- ,
137
- "about": "margin properties for html elements"
138
- }
139
-
140
- ,
141
- "border": {
142
-
143
- "tag": "border",
144
- "keys": ["_",
145
- "t",
146
- "b",
147
- "l",
148
- "r",
149
- "all",
150
- "u",
151
- "ii",
152
- "tb"],
153
- "values": {
154
- "_": "_", "1": "1px", "2": "2px", "3": "3px"
155
- }
156
-
157
- ,
158
- "levels": {
159
- "_": ["_", 1, 2, 3]
160
- }
161
-
162
- ,
163
- "about": "border properties for html elements"
164
- }
165
-
166
- ,
167
- "shadow": {
168
-
169
- "tag": "shad",
170
- "values": {
171
- "2": "0.83333333331.724137931", "4": "1.66666666673.4482758621", "8": "3.33333333336.8965517241", "16": "6.666666666713.7931034483", "32": "13.333333333327.5862068966"
172
- }
173
-
174
- ,
175
- "levels": {
176
- "_": [2, 4, 8, 16, 32]
177
- }
178
-
179
- ,
180
- "about": "applying shadows give depth and levels to your design"
181
- }
182
- }
183
- }
184
- }
185
-
186
- ,
187
- "color": {
188
- "_data": {
189
- "gray-config": {
190
- "start": "#f4f4f4", "end": "#999", "steps": 5
191
- }
192
-
193
- ,
194
- "color-types-config": ["color",
195
- "bg",
196
- "bg-themed",
197
- "border-color"],
198
- "theme": {
199
- "primary": "#201700", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#ffffff", "paper": "#f1f1f1"
200
- }
201
-
202
- ,
203
- "scheme": {
204
- "discrete": "#ccc", "success": "green", "info": "#FFDD57FF", "warning": "#e6b905", "alert": "#ff7300", "error": "red"
205
- }
206
-
207
- ,
208
- "palette": {
209
- "yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4", "dark": "#323232"
210
- }
211
-
212
- ,
213
- "gray": "getGraySteps(5, #f4f4f4, #999)"
214
- }
215
-
216
- ,
217
- "_metadata": {
218
- "title": "color", "title_tag": "its about colors", "description": "cssfabric color system: its about colors"
219
- }
220
-
221
- ,
222
- "_docs": {
223
- "attributes": {
224
- "color": {
225
-
226
- "tag": "color",
227
- "keys": ["scheme",
228
- "palette",
229
- "gray"],
230
- "levelsLinked": {
231
- "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(5, #f4f4f4, #999)"]
232
- }
233
-
234
- ,
235
- "levelsDeclin": {
236
- "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
237
- }
238
-
239
- ,
240
- "about": "color for text level html elements"
241
- }
242
-
243
- ,
244
- "background-color": {
245
-
246
- "tag": "bg",
247
- "keys": ["scheme",
248
- "palette",
249
- "gray"],
250
- "levelsLinked": {
251
- "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(5, #f4f4f4, #999)"]
252
- }
253
-
254
- ,
255
- "levelsDeclin": {
256
- "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
257
- }
258
-
259
- ,
260
- "about": "background colors"
261
- }
262
-
263
- ,
264
- "background-themed": {
265
-
266
- "tag": "bg-themed",
267
- "keys": ["scheme",
268
- "palette",
269
- "gray"],
270
- "levelsLinked": {
271
- "gray": ["getGraySteps(5, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
272
- }
273
-
274
- ,
275
- "levelsDeclin": {
276
- "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
277
- }
278
-
279
- ,
280
- "about": "same as background-color, but with added contrasted color to text"
281
- }
282
-
283
- ,
284
- "border-color": {
285
-
286
- "tag": "border-color",
287
- "keys": ["palette",
288
- "gray"],
289
- "levelsLinked": {
290
- "gray": ["getGraySteps(5, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
291
- }
292
-
293
- ,
294
- "about": "border colors are slightly darker to maximize surrounding effect"
295
- }
296
- }
297
- }
298
- }
299
-
300
- ,
301
- "flex": {
302
- "_data": {
303
-
304
- "moduleName": "flex",
305
- "moduleNameShort": "flex",
306
- "horCode": "h",
307
- "vertCode": "v",
308
- "gridFullWidth": "main",
309
- "grow-shrink-steps": 2,
310
- "cssProps": {
311
- "flexWrap": {
312
- "wrap": "wrap", "wrap-reverse": "wrap-reverse"
313
- }
314
-
315
- ,
316
- "grid-justify": {
317
- "start": "flex-start", "end": "flex-end", "between": "space-between", "stretch": "stretch", "center": "flex-center"
318
- }
319
-
320
- ,
321
- "grid-items": {
322
- "baseline": "baseline", "stretch": "stretch", "start": "flex-start", "center": "center", "end": "flex-end"
323
- }
324
-
325
- ,
326
- "grid-content": {
327
- "start": "flex-start", "center": "center", "end": "flex-end", "between": "space-between", "equal": "space-evenly"
328
- }
329
- }
330
-
331
- ,
332
- "cssItemsProps": {
333
- "self": {
334
- "start": "flex-start", "end": "flex-end", "stretch": "stretch"
335
- }
336
- }
337
- }
338
-
339
- ,
340
- "_metadata": {
341
- "title": "flex", "tag": "flex", "description": "cssfabric flex system module"
342
- }
343
-
344
- ,
345
- "_docs": {
346
- "attributes": {
347
- "grid": {
348
-
349
- "tag": "flex",
350
- "keys": ["v",
351
- "h"],
352
- "classNames": {
353
- "align": ["top", "middle", "bottom", "left", "right", "center", "middle-center", "stretch"], "grid": ["wrap", "wrap-reverse"]
354
- }
355
-
356
- ,
357
- "about": "a classic flex grid system, and hey, it gets height !"
358
- }
359
-
360
- ,
361
- "self": {
362
- "tag": "self", "keys": ["start", "end", "stretch"], "about": "flex children specific classnames"
363
- }
364
- }
365
- }
366
- }
367
-
368
- ,
369
- "grid": {
370
- "_data": {
371
-
372
- "moduleName": "grid",
373
- "moduleNameShort": "grid",
374
- "horCode": "h",
375
- "vertCode": "v",
376
- "gridFullWidth": "main",
377
- "grow-shrink-steps": 4,
378
- "cssProps": {
379
- "flexWrap": {
380
- "wrap": "wrap", "wrap-reverse": "wrap-reverse"
381
- }
382
-
383
- ,
384
- "grid-justify": {
385
- "start": "flex-start", "end": "flex-end", "between": "space-between", "stretch": "stretch", "center": "flex-center"
386
- }
387
-
388
- ,
389
- "grid-items": {
390
- "baseline": "baseline", "stretch": "stretch", "start": "flex-start", "center": "center", "end": "flex-end"
391
- }
392
-
393
- ,
394
- "grid-content": {
395
- "start": "flex-start", "center": "center", "end": "flex-end", "between": "space-between", "equal": "space-evenly"
396
- }
397
- }
398
-
399
- ,
400
- "cssItemsProps": {
401
- "self": {
402
- "start": "flex-start", "end": "flex-end", "stretch": "stretch"
403
- }
404
- }
405
-
406
- ,
407
- "grid-max-rows": 8,
408
- "grid-max-cols": 12
409
- }
410
-
411
- ,
412
- "_metadata": {
413
- "title": "grid", "tag": "grid", "description": "cssfabric flex grid system module"
414
- }
415
-
416
- ,
417
- "_docs": {
418
- "attributes": {
419
- "grid": {
420
-
421
- "tag": "grid",
422
- "keys": ["v",
423
- "h"],
424
- "classNames": {
425
- "align": ["top", "middle", "bottom", "left", "right", "center", "middle-center", "stretch"], "grid": ["wrap", "wrap-reverse"]
426
- }
427
-
428
- ,
429
- "about": "a classic grid system"
430
- }
431
-
432
- ,
433
- "self": {
434
- "tag": "self", "keys": ["start", "end", "stretch"], "about": "grid children specific classnames"
435
- }
436
- }
437
- }
438
- }
439
-
440
- ,
441
- "menu": {
442
- "_data": {
443
-
444
- "menu_class_name": "menu",
445
- "menu_class_name_short": "ul",
446
- "orientations": {
447
- "v": "vertical", "h": "horizontal"
448
- }
449
-
450
- ,
451
- "menu_item_class_name": "menu-item",
452
- "menu_item_class_name_short": "li",
453
- "menu_item_disabled_tag": "disabled",
454
- "menu_item_selected_tag": "selected",
455
- "menu_dropdown_tag": "drop",
456
- "menu_dropdown_open": "open",
457
- "menu_dropdown_close": "close"
458
- }
459
-
460
- ,
461
- "_metadata": {
462
- "title": "menu", "tag": "ul", "description": "cssfabric menu module to set menu style"
463
- }
464
-
465
- ,
466
- "_docs": {
467
- "attributes": {
468
- "menu": {
469
- "tag": "menu", "keys": ["h", "v"]
470
- }
471
- }
472
- }
473
- }
474
-
475
- ,
476
- "overflow": {
477
- "_data": {
478
-
479
- "overflow_props": ["overflow",
480
- "overflow-x",
481
- "overflow-y"],
482
- "overflow_values": ["visible",
483
- "hidden",
484
- "clip",
485
- "scroll",
486
- "auto"],
487
- "cssProps": {
488
- "overflow": {
489
- "visible": "visible", "hidden": "hidden", "clip": "clip", "scroll": "scroll", "_": "auto"
490
- }
491
- }
492
- }
493
-
494
- ,
495
- "_metadata": {
496
- "title": "overflow", "tag": "flow", "description": "cssfabric overflow module to set overflow styles on all html elements"
497
- }
498
-
499
- ,
500
- "_docs": {
501
- "attributes": {
502
- "overflow": {
503
- "tag": "flow", "keys": ["visible", "hidden", "clip", "scroll", "auto"]
504
- }
505
-
506
- ,
507
- "overflowX": {
508
- "tag": "flowX", "keys": ["visible", "hidden", "clip", "scroll", "auto"]
509
- }
510
-
511
- ,
512
- "overflowY": {
513
- "tag": "flowY", "keys": ["visible", "hidden", "clip", "scroll", "auto"]
514
- }
515
- }
516
- }
517
- }
518
-
519
- ,
520
- "scale": {
521
- "_data": {
522
-
523
- "weight-config": "1em",
524
- "unit-tag-config": {
525
- "width": "w", "height": "h"
526
- }
527
-
528
- ,
529
- "grid-ratios-config": 16,
530
- "defined-step-size": 2,
531
- "defined-step-unit": "rem",
532
- "defined-steps": [1,
533
- 2,
534
- 4,
535
- 8,
536
- 16,
537
- 24,
538
- 32,
539
- 48,
540
- 64],
541
- "cssProps": {
542
- "size": {
543
- "full": "100%", "mid": "50%", "quarter": "25%", "tiers": "33%"
544
- }
545
-
546
- ,
547
- "content": {
548
- "content-max": "max-content", "content-min": "min-content"
549
- }
550
-
551
- ,
552
- "defined-steps": [1,
553
- 2,
554
- 4,
555
- 8,
556
- 16,
557
- 24,
558
- 32,
559
- 48,
560
- 64]
561
- }
562
- }
563
-
564
- ,
565
- "_metadata": {
566
- "title": "scale", "tag": "scale", "description": "cssfabric scale module to set dimensions and ratios on all html elements"
567
- }
568
-
569
- ,
570
- "_docs": {
571
- "attributes": {
572
- "scale": {
573
-
574
- "tag": "scale",
575
- "keys": ["w",
576
- "h"],
577
- "levels": {
578
- "_size": ["full", "mid", "quarter", "tiers"], "_content": ["content-max", "content-min"], "_defined-steps": [1, 2, 4, 8, 16, 24, 32, 48, 64], "_grid-16": ["1-16", "2-16", "3-16", "4-16", "5-16", "6-16", "7-16", "8-16", "9-16", "10-16", "11-16", "12-16", "13-16", "14-16", "15-16", "16-16"]
579
- }
580
- }
581
- }
582
- }
583
- }
584
-
585
- ,
586
- "table": {
587
- "_data": {
588
- "className": "table", "classNameShort": "tbl", "table_class_name": "table", "table_class_name_short": "tbl", "table-bg-color-head": "#f4f4f4", "table-bg-color-strip-main": "#ededed", "table-bg-color-strip-second": "#f5f5f5", "table-border-color-header": "#ccc", "table-border-color-main": "#ededed", "table-border-color-second": "#f5f5f5"
589
- }
590
-
591
- ,
592
- "_metadata": {
593
- "title": "table", "tag": "table", "description": "cssfabric table module to set different table styles"
594
- }
595
-
596
- ,
597
- "_docs": {
598
- "attributes": {
599
- "table": {
600
-
601
- "tag": "table",
602
- "classNames": {
603
- "_": ["bg-strip-2", "bg-strip-5"], "_pos": ["sticky", "layout"], "_deco": ["h-line", "v-line", "border"]
604
- }
605
-
606
- ,
607
- "about": "is a table"
608
- }
609
- }
610
- }
611
- }
612
-
613
- ,
614
- "text": {
615
- "_data": {
616
-
617
- "moduleName": "text",
618
- "moduleNameShort": "text",
619
- "title-size-declination-config": 6,
620
- "font-size-unit-config": "rem",
621
- "font-sizes-h1-rem-config": 3.1,
622
- "font-size-h-min-rem-config": 1,
623
- "text-ellipsis-tag-config": "ellipsis",
624
- "cssProps": {
625
- "textTransform": {
626
- "cap": "capitalize", "up": "uppercase", "low": "lowercase", "none": "none", "full": "full-width"
627
- }
628
-
629
- ,
630
- "fontWeight": {
631
- "50": 50, "100": 100, "300": 400, "500": 500, "900": 900, "light": "lighter", "cap": "normal", "bold": "bold", "bolder": "bolder"
632
- }
633
-
634
- ,
635
- "textAlign": {
636
- "l": "left", "r": "right", "center": "center", "justify": "justify"
637
- }
638
- }
639
-
640
- ,
641
- "scheme": {
642
- "discrete": "#ccc", "success": "green", "info": "#FFDD57FF", "warning": "#e6b905", "alert": "#ff7300", "error": "red"
643
- }
644
-
645
- ,
646
- "palette": {
647
- "yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4", "dark": "#323232"
648
- }
649
-
650
- ,
651
- "gray": "getGraySteps(5, #f4f4f4, #999)"
652
- }
653
-
654
- ,
655
- "_metadata": {
656
- "title": "text", "tag": "text", "description": "cssfabric text module to set text style on all html elements"
657
- }
658
-
659
- ,
660
- "_docs": {
661
- "attributes": {
662
- "text-transform": {
663
- "tag": "text", "keys": ["cap", "up", "low", "none", "full"]
664
- }
665
-
666
- ,
667
- "font-weight": {
668
- "tag": "text", "keys": [50, 100, 300, 500, 900, "light", "cap", "bold", "bolder"]
669
- }
670
-
671
- ,
672
- "text-align": {
673
- "tag": "text", "keys": ["l", "r", "center", "justify"]
674
- }
675
-
676
- ,
677
- "text-shadow": {
678
- "tag": "text-shad", "keys": ["palette"]
679
- }
680
- }
681
-
682
- ,
683
- "classNames": {
684
- "_": {
685
- "et": "ellipsis"
686
- }
687
- }
688
- }
689
- }
690
-
691
- ,
692
- "theme": {
693
- "_data": {
694
-
695
- "moduleName": "theme",
696
- "moduleNameShort": "theme",
697
- "color-default-config": {
698
- "primary": "#201700", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#ffffff", "paper": "#f1f1f1"
699
- }
700
-
701
- ,
702
- "declinations-config": ["primary",
703
- "secondary",
704
- "tertiary"],
705
- "theme-level-config": ["light",
706
- "lighter",
707
- "dark",
708
- "darker",
709
- "complement",
710
- "invert"],
711
- "theme-properties-apply-config": ["text",
712
- "bg",
713
- "border"],
714
- "color": {
715
- "primary": "#201700", "primary-light": "#6d4e00", "primary-lighter": "#b98500", "primary-dark": "black", "primary-darker": "black", "primary-complement": "#000920", "primary-invert": "#dfe8ff", "secondary": "#D14B02", "secondary-light": "#fd7023", "secondary-lighter": "#fea16e", "secondary-dark": "#9e3902", "secondary-darker": "#6c2701", "secondary-complement": "#0288d1", "secondary-invert": "#2eb4fd", "tertiary": "#88D102", "tertiary-light": "#b0fd23", "tertiary-lighter": "#cbfe6e", "tertiary-dark": "#679e02", "tertiary-darker": "#466c01", "tertiary-complement": "#4b02d1", "tertiary-invert": "#772efd"
716
- }
717
- }
718
-
719
- ,
720
- "_metadata": {
721
- "title": "theme", "description": ""
722
- }
723
-
724
- ,
725
- "_docs": {
726
- "attributes": {
727
- "theme": {
728
-
729
- "tag": "theme",
730
- "keys": ["text",
731
- "bg",
732
- "border"],
733
- "levels": {
734
- "primary": ["_", "light", "lighter", "dark", "darker", "complement", "invert"], "secondary": ["_", "light", "lighter", "dark", "darker", "complement", "invert"], "tertiary": ["_", "light", "lighter", "dark", "darker", "complement", "invert"]
735
- }
736
- }
737
- }
738
- }
739
- }
740
-
741
- ,
742
- "zindex": {
743
- "_data": {
744
- "z_groups": ["a", "z"]
745
- }
746
-
747
- ,
748
- "_metadata": {
749
- "title": "zindex", "tag": "zI", "description": "cssfabric zindex module to set z-index on all html elements"
750
- }
751
-
752
- ,
753
- "_docs": {
754
- "z_groups": "_"
755
- }
756
- }
757
- }
758
- }
759
- }