@medyll/cssfabric 0.2.0 → 0.2.1

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 (207) hide show
  1. package/.github/workflows/main.yml +33 -0
  2. package/.idea/cssfabric.iml +11 -0
  3. package/.idea/misc.xml +9 -0
  4. package/.idea/modules.xml +8 -0
  5. package/.idea/vcs.xml +6 -0
  6. package/.vscode/settings.json +24 -0
  7. package/bin/index.js +8 -0
  8. package/cssfabric.sass.js +8 -0
  9. package/gulpfile.js +532 -0
  10. package/package.json +17 -61
  11. package/src/app.css +107 -0
  12. package/src/app.d.ts +15 -0
  13. package/src/app.html +13 -0
  14. package/src/components/Header.svelte +17 -0
  15. package/src/components/HeaderSiteTitle.svelte +12 -0
  16. package/src/components/InnerMenu.svelte +27 -0
  17. package/src/components/SubHeader.svelte +10 -0
  18. package/src/components/SubHeaderH.svelte +3 -0
  19. package/src/components/SubSubHeader.svelte +22 -0
  20. package/src/components/demo/DemoElement.svelte +86 -0
  21. package/src/components/demo/elements/DemoElementBackgroundColor.svelte +7 -0
  22. package/src/components/demo/elements/DemoElementBorder.svelte +8 -0
  23. package/src/components/demo/elements/DemoElementBorderColor.svelte +8 -0
  24. package/src/components/demo/elements/DemoElementColor.svelte +8 -0
  25. package/src/components/demo/elements/DemoElementGrid.svelte +53 -0
  26. package/src/components/demo/elements/DemoElementMargin.svelte +8 -0
  27. package/src/components/demo/elements/DemoElementPadding.svelte +10 -0
  28. package/src/components/demo/elements/DemoElementScale.svelte +9 -0
  29. package/src/components/demo/elements/DemoElementTable.svelte +34 -0
  30. package/src/components/demo/elements/DemoElementText.svelte +10 -0
  31. package/src/components/demo/proxy/ProxyDsp.svelte +12 -0
  32. package/src/components/demo/proxy/ProxyDspArray.svelte +19 -0
  33. package/src/components/demo/proxy/ProxyDspObject.svelte +17 -0
  34. package/src/components/docs/Docs.svelte +97 -0
  35. package/src/components/docs/DocsClassNames.svelte +34 -0
  36. package/src/components/docs/DocsDemo.svelte +84 -0
  37. package/src/components/header/Header.svelte +105 -0
  38. package/src/components/header/svelte-logo.svg +1 -0
  39. package/src/cssfabric/_utils.scss +203 -0
  40. package/{_generated → src/cssfabric}/index.d.ts +0 -0
  41. package/src/cssfabric/modules/_cssfabric-config.scss +173 -0
  42. package/src/cssfabric/modules/_mixins.scss +1 -0
  43. package/src/cssfabric/modules/animation/_animation-vars.scss +17 -0
  44. package/src/cssfabric/modules/animation/animation.scss +3 -0
  45. package/src/cssfabric/modules/base/_base-vars.scss +19 -0
  46. package/src/cssfabric/modules/base/base.scss +75 -0
  47. package/src/cssfabric/modules/box/_box-build.scss +306 -0
  48. package/src/cssfabric/modules/box/_box-vars.scss +121 -0
  49. package/src/cssfabric/modules/box/box-responsive.scss +18 -0
  50. package/src/cssfabric/modules/box/box.scss +3 -0
  51. package/src/cssfabric/modules/color/_color-build.scss +196 -0
  52. package/src/cssfabric/modules/color/_color-vars.scss +80 -0
  53. package/src/cssfabric/modules/color/color-responsive.scss +23 -0
  54. package/src/cssfabric/modules/color/color.scss +9 -0
  55. package/src/cssfabric/modules/css-fabric.scss +2 -0
  56. package/src/cssfabric/modules/flex/_flex-build.scss +150 -0
  57. package/src/cssfabric/modules/flex/_flex-vars.scss +84 -0
  58. package/src/cssfabric/modules/flex/flex-responsive.scss +25 -0
  59. package/src/cssfabric/modules/flex/flex.scss +3 -0
  60. package/src/cssfabric/modules/grid/_grid-build.scss +84 -0
  61. package/src/cssfabric/modules/grid/_grid-vars.scss +88 -0
  62. package/src/cssfabric/modules/grid/grid-responsive.scss +25 -0
  63. package/src/cssfabric/modules/grid/grid.scss +6 -0
  64. package/src/cssfabric/modules/menu/_menu-build.scss +120 -0
  65. package/src/cssfabric/modules/menu/_menu-vars.scss +29 -0
  66. package/src/cssfabric/modules/menu/menu-responsive.scss +19 -0
  67. package/src/cssfabric/modules/menu/menu.scss +6 -0
  68. package/src/cssfabric/modules/overflow/_overflow-build.scss +22 -0
  69. package/src/cssfabric/modules/overflow/_overflow-vars.scss +31 -0
  70. package/src/cssfabric/modules/overflow/overflow-responsive.scss +25 -0
  71. package/src/cssfabric/modules/overflow/overflow.scss +7 -0
  72. package/src/cssfabric/modules/scale/_scale-build.scss +142 -0
  73. package/src/cssfabric/modules/scale/_scale-vars.scss +84 -0
  74. package/src/cssfabric/modules/scale/scale-responsive.scss +23 -0
  75. package/src/cssfabric/modules/scale/scale.scss +8 -0
  76. package/src/cssfabric/modules/table/_table-build.scss +134 -0
  77. package/src/cssfabric/modules/table/_table-vars.scss +30 -0
  78. package/src/cssfabric/modules/table/table-responsive.scss +24 -0
  79. package/src/cssfabric/modules/table/table.scss +8 -0
  80. package/src/cssfabric/modules/text/_text-build.scss +166 -0
  81. package/src/cssfabric/modules/text/_text-vars.scss +87 -0
  82. package/src/cssfabric/modules/text/text-responsive.scss +26 -0
  83. package/src/cssfabric/modules/text/text.scss +6 -0
  84. package/src/cssfabric/modules/theme/_theme-build.scss +90 -0
  85. package/src/cssfabric/modules/theme/_theme-vars.scss +46 -0
  86. package/src/cssfabric/modules/theme/theme.scss +6 -0
  87. package/src/cssfabric/modules/vars.scss +50 -0
  88. package/src/cssfabric/modules/zindex/_zindex-vars.scss +14 -0
  89. package/src/cssfabric/modules/zindex/zindex.scss +15 -0
  90. package/src/hooks.ts +27 -0
  91. package/src/index.d.ts +3 -0
  92. package/src/index.ts +4 -0
  93. package/{_generated → src/lib/_generated}/cssFabric.vars.json +0 -0
  94. package/{_generated → src/lib/_generated}/export.variables.md +0 -0
  95. package/src/lib/_generated/index.d.ts +3 -0
  96. package/{_generated → src/lib/_generated}/readme.md +0 -0
  97. package/{init/importCssVars.js → src/lib/init/importCssVars.ts} +3 -2
  98. package/src/lib/scripts/cssfabric.ts +54 -0
  99. package/{scripts/cssfabricClassNames.js → src/lib/scripts/cssfabricClassNames.ts} +112 -42
  100. package/{scripts → src/lib/scripts}/index.d.ts +0 -0
  101. package/src/lib/scripts/index.ts +8 -0
  102. package/src/lib/scripts/utils.ts +37 -0
  103. package/{styles → src/lib/styles}/animation/animation.css +0 -0
  104. package/{styles → src/lib/styles}/animation/animation.min.css +0 -0
  105. package/{styles → src/lib/styles}/base/base.css +0 -0
  106. package/{styles → src/lib/styles}/base/base.min.css +0 -0
  107. package/{styles → src/lib/styles}/box/box.css +0 -0
  108. package/{styles → src/lib/styles}/box/box.min.css +0 -0
  109. package/{styles → src/lib/styles}/box/box.responsive.css +0 -0
  110. package/{styles → src/lib/styles}/box/box.responsive.min.css +0 -0
  111. package/{styles → src/lib/styles}/color/color.css +0 -0
  112. package/{styles → src/lib/styles}/color/color.min.css +0 -0
  113. package/{styles → src/lib/styles}/color/color.responsive.css +0 -0
  114. package/{styles → src/lib/styles}/color/color.responsive.min.css +0 -0
  115. package/{styles → src/lib/styles}/cssfabric.css +0 -0
  116. package/{styles → src/lib/styles}/cssfabric.min.css +0 -0
  117. package/{styles → src/lib/styles}/cssfabric.responsive.css +0 -0
  118. package/{styles → src/lib/styles}/cssfabric.responsive.min.css +0 -0
  119. package/{styles → src/lib/styles}/flex/flex.css +0 -0
  120. package/{styles → src/lib/styles}/flex/flex.min.css +0 -0
  121. package/{styles → src/lib/styles}/flex/flex.responsive.css +0 -0
  122. package/{styles → src/lib/styles}/flex/flex.responsive.min.css +0 -0
  123. package/{styles → src/lib/styles}/grid/grid.css +0 -0
  124. package/{styles → src/lib/styles}/grid/grid.min.css +0 -0
  125. package/{styles → src/lib/styles}/grid/grid.responsive.css +0 -0
  126. package/{styles → src/lib/styles}/grid/grid.responsive.min.css +0 -0
  127. package/{styles → src/lib/styles}/menu/menu.css +0 -0
  128. package/{styles → src/lib/styles}/menu/menu.min.css +0 -0
  129. package/{styles → src/lib/styles}/menu/menu.responsive.css +0 -0
  130. package/{styles → src/lib/styles}/menu/menu.responsive.min.css +0 -0
  131. package/{styles → src/lib/styles}/overflow/overflow.css +0 -0
  132. package/{styles → src/lib/styles}/overflow/overflow.min.css +0 -0
  133. package/{styles → src/lib/styles}/overflow/overflow.responsive.css +0 -0
  134. package/{styles → src/lib/styles}/overflow/overflow.responsive.min.css +0 -0
  135. package/{styles → src/lib/styles}/scale/scale.css +0 -0
  136. package/{styles → src/lib/styles}/scale/scale.min.css +0 -0
  137. package/{styles → src/lib/styles}/scale/scale.responsive.css +0 -0
  138. package/{styles → src/lib/styles}/scale/scale.responsive.min.css +0 -0
  139. package/{styles → src/lib/styles}/table/table.css +0 -0
  140. package/{styles → src/lib/styles}/table/table.min.css +0 -0
  141. package/{styles → src/lib/styles}/table/table.responsive.css +0 -0
  142. package/{styles → src/lib/styles}/table/table.responsive.min.css +0 -0
  143. package/{styles → src/lib/styles}/text/text.css +0 -0
  144. package/{styles → src/lib/styles}/text/text.min.css +0 -0
  145. package/{styles → src/lib/styles}/text/text.responsive.css +0 -0
  146. package/{styles → src/lib/styles}/text/text.responsive.min.css +0 -0
  147. package/{styles → src/lib/styles}/theme/theme.css +0 -0
  148. package/{styles → src/lib/styles}/theme/theme.min.css +0 -0
  149. package/{styles → src/lib/styles}/vars.css +0 -0
  150. package/{styles → src/lib/styles}/vars.min.css +0 -0
  151. package/{styles → src/lib/styles}/zindex/zindex.css +0 -0
  152. package/{styles → src/lib/styles}/zindex/zindex.min.css +0 -0
  153. package/src/routes/__layout.svelte +91 -0
  154. package/src/routes/cssfabric-modules/[module]/__layout.svelte +75 -0
  155. package/src/routes/cssfabric-modules/[module]/classnames/index.svelte +24 -0
  156. package/src/routes/cssfabric-modules/[module]/demo/index.svelte +24 -0
  157. package/src/routes/cssfabric-modules/[module]/docs/index.svelte +30 -0
  158. package/src/routes/cssfabric-modules/[module]/index.svelte +3 -0
  159. package/src/routes/cssfabric-modules/__layout.svelte +26 -0
  160. package/src/routes/cssfabric-modules/index.svelte +0 -0
  161. package/src/routes/index.svelte +62 -0
  162. package/src/routes/installation/__layout.svelte +1 -0
  163. package/src/routes/installation/index.svelte +28 -0
  164. package/src/scripts/utils.ts +26 -0
  165. package/src/utils.ts +71 -0
  166. package/src/vendor/index.d.ts +3 -0
  167. package/src/vendor/normalize/normalize.min.css +2 -0
  168. package/src/vendor/sass-json-export/CHANGELOG.md +26 -0
  169. package/src/vendor/sass-json-export/Gruntfile.js +60 -0
  170. package/src/vendor/sass-json-export/LICENSE +20 -0
  171. package/src/vendor/sass-json-export/README.md +90 -0
  172. package/src/vendor/sass-json-export/package.json +60 -0
  173. package/src/vendor/sass-json-export/stylesheets/encode/api/_json.scss +26 -0
  174. package/src/vendor/sass-json-export/stylesheets/encode/encode.scss +17 -0
  175. package/src/vendor/sass-json-export/stylesheets/encode/helpers/_quote.scss +9 -0
  176. package/src/vendor/sass-json-export/stylesheets/encode/mixins/_json.scss +42 -0
  177. package/src/vendor/sass-json-export/stylesheets/encode/types/_bool.scss +7 -0
  178. package/src/vendor/sass-json-export/stylesheets/encode/types/_color.scss +8 -0
  179. package/src/vendor/sass-json-export/stylesheets/encode/types/_list.scss +14 -0
  180. package/src/vendor/sass-json-export/stylesheets/encode/types/_map.scss +15 -0
  181. package/src/vendor/sass-json-export/stylesheets/encode/types/_null.scss +7 -0
  182. package/src/vendor/sass-json-export/stylesheets/encode/types/_number.scss +8 -0
  183. package/src/vendor/sass-json-export/stylesheets/encode/types/_string.scss +8 -0
  184. package/src/vendor/sass-json-export/stylesheets/sass-json-export.scss +2 -0
  185. package/src/vendor/sass-json-export/test/encode/_index.scss +14 -0
  186. package/src/vendor/sass-json-export/test/encode/api/_json.scss +29 -0
  187. package/src/vendor/sass-json-export/test/encode/helpers/_quote.scss +6 -0
  188. package/src/vendor/sass-json-export/test/encode/types/_bool.scss +6 -0
  189. package/src/vendor/sass-json-export/test/encode/types/_color.scss +7 -0
  190. package/src/vendor/sass-json-export/test/encode/types/_list.scss +25 -0
  191. package/src/vendor/sass-json-export/test/encode/types/_map.scss +17 -0
  192. package/src/vendor/sass-json-export/test/encode/types/_null.scss +8 -0
  193. package/src/vendor/sass-json-export/test/encode/types/_number.scss +68 -0
  194. package/src/vendor/sass-json-export/test/encode/types/_string.scss +9 -0
  195. package/src/vendor/sass-json-export/test/test.scss +9 -0
  196. package/static/favicon.png +0 -0
  197. package/static/robots.txt +3 -0
  198. package/svelte.config.js +25 -0
  199. package/tsconfig.json +3 -0
  200. package/webpack.config.js +55 -0
  201. package/init/importCssVars.d.ts +0 -1
  202. package/scripts/cssfabric.d.ts +0 -24
  203. package/scripts/cssfabric.js +0 -43
  204. package/scripts/cssfabricClassNames.d.ts +0 -14
  205. package/scripts/index.js +0 -4
  206. package/scripts/utils.d.ts +0 -5
  207. package/scripts/utils.js +0 -38
@@ -0,0 +1,75 @@
1
+ <svelte:head>
2
+
3
+ <title>{staticModule} {staticAction} cssfabric</title>
4
+ </svelte:head>
5
+ <script context="module" lang="ts">
6
+ export const prerender = true;
7
+ /** @type {import('./modules/[module]/[page]').Load} */
8
+ export async function load({params, fetch, session, stuff}) {
9
+ console.log(params)
10
+ // console.log(params, fetch, session, stuff);
11
+ return {
12
+ status: 200,
13
+ props : {
14
+ moduleTag : params.module,
15
+ modulePage: params.page
16
+ }
17
+ };
18
+ }
19
+ </script>
20
+
21
+ <script lang="ts">
22
+ import cssfabric from '../../../lib/scripts/cssfabric';
23
+ import {fabricNavigation} from '../../../scripts/utils';
24
+ import InnerMenu from '../../../components/InnerMenu.svelte';
25
+ import SubHeader from '../../../components/SubHeader.svelte';
26
+ import Header from '../../../components/Header.svelte';
27
+
28
+ export let moduleTag = '';
29
+ export let modulePage = '';
30
+
31
+ const links: string[] = fabricNavigation.getActiveLinks();
32
+
33
+ let tagProperties: Record<string, any> = {};
34
+
35
+ let staticModule: string = moduleTag;
36
+ let staticAction: string = '';
37
+
38
+ $: tagProperties = cssfabric.getModuleMetaData(moduleTag);
39
+ $: staticAction = modulePage;
40
+
41
+ </script>
42
+ <Header
43
+ description={tagProperties.description}
44
+ tag={"fabric.css." + tagProperties.title}
45
+ title={"." + tagProperties.title}
46
+ />
47
+ <div class={"flex flex-xl-v flex-h marg-t-2"}>
48
+ <div class={"marg-t-2 marg-lg-l-4 pad"}>
49
+ <div class="">
50
+ <ul class={"menu-xl-h menu-v menu-small shad-8"}>
51
+ <li class={(modulePage==='demo')? 'active':''}>
52
+ <a href={fabricNavigation.getModuleDemoPage(moduleTag)}>
53
+ <a>Demo</a>
54
+ </a>
55
+ </li>
56
+ <li class={(modulePage==='classnames')? 'active':''}>
57
+ <a href={fabricNavigation.getModuleClassNamesPage(moduleTag)}>
58
+ <a>Classnames</a>
59
+ </a>
60
+ </li>
61
+ <li class={(modulePage==='docs')? 'active':''}>
62
+ <a href={fabricNavigation.getModuleDocsPage(moduleTag)}>
63
+ <a>Docs</a>
64
+ </a>
65
+ </li>
66
+ </ul>
67
+ </div>
68
+ </div>
69
+ <div class={"pad-l-4 flex-main"}>
70
+ <SubHeader title={staticModule + '.' + staticAction}/>
71
+ <div>
72
+ <slot module={staticModule} ></slot>
73
+ </div>
74
+ </div>
75
+ </div>
@@ -0,0 +1,24 @@
1
+ <script context="module" lang="ts">
2
+ export const prerender = true;
3
+ /** @type {import('./[module]/classnames').Load} */
4
+ export async function load({params, fetch, session, stuff}) {
5
+ console.log({params})
6
+ // console.log(params, fetch, session, stuff);
7
+ return {
8
+ status: 200,
9
+ props : {
10
+ moduleTag : params.module,
11
+ modulePage: params.page
12
+ }
13
+ };
14
+ }
15
+ </script>
16
+ <script>
17
+ import DocsClassNames from "../../../../components/docs/DocsClassNames.svelte";
18
+
19
+ export let moduleTag = '';
20
+ export let modulePage = '';
21
+ </script>
22
+
23
+
24
+ <DocsClassNames module={moduleTag} />
@@ -0,0 +1,24 @@
1
+ <script context="module" lang="ts">
2
+ export const prerender = true;
3
+ /** @type {import('./[module]/classnames').Load} */
4
+ export async function load({params, fetch, session, stuff}) {
5
+ console.log({params})
6
+ // console.log(params, fetch, session, stuff);
7
+ return {
8
+ status: 200,
9
+ props : {
10
+ moduleTag : params.module,
11
+ modulePage: params.page
12
+ }
13
+ };
14
+ }
15
+ </script>
16
+ <script>
17
+ import DocsDemo from "../../../../components/docs/DocsDemo.svelte";
18
+
19
+ export let moduleTag = '';
20
+ export let modulePage = '';
21
+ </script>
22
+
23
+
24
+ <DocsDemo module={moduleTag} />
@@ -0,0 +1,30 @@
1
+
2
+ <script context="module" lang="ts">
3
+ export const prerender = true;
4
+ /** @type {import('./[module]/docs').Load} */
5
+ export async function load({params, fetch, session, stuff}) {
6
+
7
+ return {
8
+ status: 200,
9
+ props : {
10
+ moduleTag : params.module,
11
+ modulePage: params.page
12
+ }
13
+ };
14
+ }
15
+ </script>
16
+ <script lang="ts">
17
+ import { HighlightAuto } from "svelte-highlight";
18
+ import "svelte-highlight/styles/github.css";
19
+ import Docs from "../../../../components/docs/Docs.svelte";
20
+
21
+ export let moduleTag = '';
22
+ export let modulePage = 'docs';
23
+
24
+ let code = `let a = 123; let fr = 'red'; const red = function(args:any){}`
25
+ </script>
26
+ <HighlightAuto code={`<div class="noclass"></div>`} />
27
+ <HighlightAuto code={`npm i @medyll/cssfabric`} />
28
+ <HighlightAuto code={code} />
29
+
30
+ <Docs module={moduleTag} />
@@ -0,0 +1,3 @@
1
+ module index <br />
2
+ <slot></slot>
3
+ module index <br />
@@ -0,0 +1,26 @@
1
+ <script context="module" lang="ts">
2
+
3
+ export const prerender = true;
4
+ </script>
5
+ <script lang="ts">
6
+
7
+ import {fabricNavigation} from '../../scripts/utils';
8
+ import cssfabric from '../../lib/scripts/cssfabric';
9
+ import HeaderSiteTitle from '../../components/HeaderSiteTitle.svelte';
10
+
11
+ export let moduleTag = '';
12
+ export let modulePage = '';
13
+
14
+ const links: string[] = fabricNavigation.getActiveLinks();
15
+
16
+ let DynamicComponent;
17
+ let tagProperties: Record<string, any> = {};
18
+
19
+ let staticModule: string = moduleTag;
20
+ let staticPage: string = modulePage;
21
+
22
+ $: tagProperties = cssfabric.getModuleMetaData(moduleTag);
23
+ $: staticPage = modulePage;
24
+ </script>
25
+
26
+ <slot></slot>
File without changes
@@ -0,0 +1,62 @@
1
+ <script context="module" lang="ts">
2
+ export const prerender = true;
3
+ </script>
4
+
5
+ <script lang="ts">
6
+ import {fabricNavigation} from '../scripts/utils';
7
+ import github from "svelte-highlight/styles/github";
8
+ const cssfabricModules = fabricNavigation.getActiveLinks();
9
+ $: console.log({cssfabricModules});
10
+ </script>
11
+ <svelte:head>
12
+ <title>cssFabric home</title>
13
+ {@html github}
14
+ </svelte:head>
15
+ <div class={"flex-main flex-align-middle scale-w-sm-full scale-w-lg-32 scale-w-64 pad-all"}>
16
+ <div title={"a css framework"}>
17
+ <p>
18
+ <strong>cssfabric</strong> is a css framework built around css properties<br/>
19
+ it's goal is to permit you to achieve of all your design task, from single page applications to frontend web sites
20
+ </p>
21
+ </div>
22
+ <p title={"with some css in"}>
23
+ </p>
24
+ <div class={"flex-h flex-wrap flex-align-center"}>
25
+ {#each Object.values(cssfabricModules) as key, name }
26
+ <div class={"pad-4 marg-4 scale-w-8 scale-h-8 flex-v flex-align-middle text-center bg-themed-gray-200 shad-4"}>
27
+ <a href={fabricNavigation.getModuleDemoPage(key)}>
28
+ <span>{`${key}`}</span>
29
+ </a>
30
+ </div>
31
+ {/each}
32
+ </div>
33
+ </div>
34
+
35
+ <style lang="scss">
36
+ section {
37
+ display: flex;
38
+ flex-direction: column;
39
+ justify-content: center;
40
+ align-items: center;
41
+ flex: 1;
42
+ }
43
+
44
+ h1 {
45
+ width: 100%;
46
+ }
47
+
48
+ .welcome {
49
+ position: relative;
50
+ width: 100%;
51
+ height: 0;
52
+ padding: 0 0 calc(100% * 495 / 2048) 0;
53
+ }
54
+
55
+ .welcome img {
56
+ position: absolute;
57
+ width: 100%;
58
+ height: 100%;
59
+ top: 0;
60
+ display: block;
61
+ }
62
+ </style>
@@ -0,0 +1 @@
1
+ <slot></slot>
@@ -0,0 +1,28 @@
1
+ <script context="module" lang="ts">
2
+
3
+ </script>
4
+ <script>
5
+ import {HighlightAuto,Highlight} from "svelte-highlight";
6
+ import typescript from "svelte-highlight/languages/typescript";
7
+ import node from "svelte-highlight/languages/node-repl";
8
+
9
+ const code1 = `npm i @medyll/cssfabric
10
+ #or
11
+ yarn add @medyll/cssfabric`
12
+
13
+ const code2 = `npm init @medyll/cssfabric # will create configuration files`
14
+
15
+ const htmlCode = "<style></style>"
16
+ </script>
17
+
18
+
19
+ <h4>install cssfabric</h4>
20
+
21
+ <Highlight language={typescript} code={code1}/>
22
+ then
23
+ <Highlight language={node} code={code2}/>
24
+
25
+
26
+ <Highlight code={htmlCode}/>
27
+
28
+
@@ -0,0 +1,26 @@
1
+ import cssfabric from '../lib/scripts/cssfabric';
2
+
3
+ export const urlModule = 'cssfabric-modules';
4
+ const pageDocsName = 'docs';
5
+ const pageDemoName = 'demo';
6
+ const pageDemoClassName = 'classnames';
7
+
8
+ export const fabricNavigation = {
9
+ getHomePages : () => {
10
+ return `/${urlModule}`;
11
+ },
12
+ getModuleDocsPage : (module: string) => {
13
+ return `/${urlModule}/${module}/${pageDocsName}`;
14
+ },
15
+ getModuleClassNamesPage: (module: string) => {
16
+ return `/${urlModule}/${module}/${pageDemoClassName}`;
17
+ },
18
+ getModuleDemoPage : (module: string) => {
19
+ return `/${urlModule}/${module}/${pageDemoName}`;
20
+ },
21
+ getActiveLinks : (): string[] => {
22
+ const cssfab = cssfabric.getModuleList();
23
+ return Object.keys(cssfab).filter((link: string) => cssfab?.[link]?._docs?.attributes);
24
+ }
25
+ };
26
+
package/src/utils.ts ADDED
@@ -0,0 +1,71 @@
1
+ import cssfabric from './lib/scripts/cssfabric';
2
+
3
+
4
+ const utils = {
5
+
6
+ isArrayOfTypes: (arr: any): any => {
7
+ let ret = '';
8
+
9
+ if (!Array.isArray(arr)) {
10
+ return false;
11
+ }
12
+ if (arr.every(x => Array.isArray(x))) ret = 'arrays'
13
+ if (arr.every(x => typeof x === 'number' || typeof x === 'string')) ret = 'strings'
14
+ if (arr.every(x => typeof x === 'string')) ret = 'strings'
15
+ if (arr.every(x => typeof x === 'number')) ret = 'numbers'
16
+ if (arr.every(x => typeof x === 'object' && !Array.isArray(x))) ret = 'objects'
17
+
18
+ return ret;
19
+ },
20
+
21
+ isObjectOfTypes: (arr: any): string | boolean => {
22
+
23
+ if (Array.isArray(arr)) {
24
+ return false;
25
+ }
26
+
27
+ let ret = '';
28
+ let arrValues = Object.values(arr);
29
+
30
+ if (arrValues.every(x => typeof x === 'number' || typeof x === 'string')) ret = 'strings'
31
+ if (arrValues.every(x => Array.isArray(x))) ret = 'arrays'
32
+ if (arrValues.every(x => typeof x === 'string')) ret = 'strings'
33
+ if (arrValues.every(x => typeof x === 'number')) ret = 'numbers'
34
+ if (arrValues.every(x => typeof x === 'object' && !Array.isArray(x))) ret = 'objects'
35
+
36
+ return ret;
37
+ }
38
+ }
39
+
40
+ export const htmlUtils = {
41
+ enclose: (content: any, tag: string = 'div') => {
42
+ return `<div className={"cell-spacing cell-padding"}>${content}</div>`
43
+ }
44
+ }
45
+ export default utils;
46
+
47
+
48
+ const urlModule = 'cssfabric-modules';
49
+ const pageDocsName = 'docs';
50
+ const pageDemoName = 'demo';
51
+ const pageDemoClassName = 'classnames';
52
+
53
+ export const fabricNavigation = {
54
+ getHomePages: () => {
55
+ return `/${urlModule}`;
56
+ },
57
+ getModuleDocsPage: (module: string) => {
58
+ return `/${urlModule}/${module}/${pageDocsName}`;
59
+ },
60
+ getModuleClassNamesPage: (module: string) => {
61
+ return `/${urlModule}/${module}/${pageDemoClassName}`;
62
+ },
63
+ getModuleDemoPage: (module: string) => {
64
+ return `/${urlModule}/${module}/${pageDemoName}`;
65
+ },
66
+ getActiveLinks: (): string[] => {
67
+ const cssfab = cssfabric.getModuleList();
68
+ return Object.keys(cssfab).filter((link: string) => cssfab?.[link]?._docs?.attributes);
69
+ }
70
+ }
71
+
@@ -0,0 +1,3 @@
1
+ declare const module;
2
+
3
+ export default module;
@@ -0,0 +1,2 @@
1
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
2
+ /*# sourceMappingURL=normalize.min.css.map */
@@ -0,0 +1,26 @@
1
+ # Changelog
2
+ * `2.0.1`: Resolve Sass deprecation warnings (Sass 3.5+) -- [#3](https://github.com/oddbird/sass-json-export/pull/3).
3
+ * `2.0.0`: Removed json-decode and changed name to `sass-json-export`.
4
+ * `1.1.8`: Solved an issue with tabs
5
+ * `1.1.7`: Included cosmetic changes made after linting with [scss-lint](https://github.com/causes/scss-lint)
6
+ * `1.1.6`: JSON files that are loaded via `@import "data.json?varname` can be pretty printed now.
7
+ * `1.1.5`: Fixed `json-encode` mixin to keep `body::before` in the render tree. Making it possible to access via `getComputedStyle(document.body, ':before')`
8
+ * `1.1.4`: Small fix for the `npm` release
9
+ * `1.1.3`: fixed error in `_pow` introduced after updating to Sass 3.3.0.rc.3
10
+ * `1.1.2`: Made it possible to import JSON files via `@import 'relative/path/to/file.json?variable-name'`
11
+ * `1.1.1`: fixing a minor issue with the gem
12
+ * `1.1.0`: adding the ability to import a JSON file
13
+ * `1.0.11`: fixing an issue with scientific number parsing
14
+ * `1.0.10`: improving number and string helpers
15
+ * `1.0.9`: fixing a bug in `_find-exponent`
16
+ * `1.0.8`: fixing a major issue in Ruby Gem
17
+ * `1.0.7`: minor fixes and stable Ruby Gem
18
+ * `1.0.6`: released a Ruby Gem
19
+ * `1.0.5`: improved the encoding mixin
20
+ * `1.0.4`: fixed an error in map parsing
21
+ * `1.0.3`: slightly edited the mixin to dump JSON to CSS
22
+ * `1.0.2`: fixed an issue with string parsing
23
+ * `1.0.1`: fixed an issue with alpha color parsing
24
+ * `1.0.0`: Stable API. `json-encode` and `json-decode`
25
+ * `0.0.2`: added `json-decode` and test
26
+ * `0.0.1`: initial commit
@@ -0,0 +1,60 @@
1
+ module.exports = function(grunt) {
2
+
3
+ // Modules
4
+ grunt.loadNpmTasks('bootcamp');
5
+ grunt.loadNpmTasks('grunt-contrib-watch');
6
+ grunt.loadNpmTasks('grunt-sass');
7
+ grunt.loadNpmTasks('grunt-sass-lint');
8
+
9
+ // Grunt Tasks
10
+ grunt.initConfig({
11
+ dir : {
12
+ src : 'stylesheets',
13
+ },
14
+ pkg: grunt.file.readJSON('package.json'),
15
+
16
+ // Sass
17
+ sass: {
18
+ options: {
19
+ outputStyle: 'expanded',
20
+ includePaths: ['./node_modules/bootcamp/dist', './<%= dir.src %>']
21
+ },
22
+ all: {
23
+ files: {
24
+ './tmp/all.css': './test/test.scss'
25
+ }
26
+ }
27
+ },
28
+
29
+ sasslint : {
30
+ all: {
31
+ src : ['<%= dir.src %>/**/*']
32
+ }
33
+ },
34
+
35
+ // Bootcamp
36
+ bootcamp: {
37
+ all: {
38
+ files: {
39
+ src: ['./tmp/all.css']
40
+ }
41
+ }
42
+ },
43
+
44
+ // Watch
45
+ watch: {
46
+ all: {
47
+ files: [
48
+ './test/**/*.scss',
49
+ './<%= dir.src %>/**/*.scss'
50
+ ],
51
+ tasks: ['test']
52
+ }
53
+ }
54
+ });
55
+
56
+ // Tasks
57
+ grunt.registerTask('test', ['sasslint', 'sass', 'bootcamp']);
58
+ grunt.registerTask('dev', ['test', 'watch']);
59
+ grunt.registerTask('default', ['test']);
60
+ };
@@ -0,0 +1,20 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2014-2015 Hugo Giraudel and contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
6
+ this software and associated documentation files (the "Software"), to deal in
7
+ the Software without restriction, including without limitation the rights to
8
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9
+ the Software, and to permit persons to whom the Software is furnished to do so,
10
+ subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17
+ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18
+ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19
+ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,90 @@
1
+ # sass-json-export [![npm version](https://badge.fury.io/js/sass-json-export.svg)](https://badge.fury.io/js/sass-json-export) [![Circle CI](https://circleci.com/gh/oddbird/sass-json-export.svg?style=svg)](https://circleci.com/gh/oddbird/sass-json-export)
2
+
3
+ `sass-json-export` allows you to export your Sass data structures as JSON.
4
+
5
+ It is based on Hugo Giraudel's
6
+ [SassyJSON](https://github.com/HugoGiraudel/SassyJSON), which is
7
+ [no longer maintained](https://github.com/HugoGiraudel/SassyJSON/issues/91). It
8
+ is simplified to include only the JSON exporter from SassyJSON, and not the
9
+ (much more complex) JSON parser.
10
+
11
+ ## Install
12
+
13
+ sass-json-export is available on [npm](https://npmjs.org/).
14
+
15
+ ### Git
16
+
17
+ ``` git
18
+ git clone https://github.com/oddbird/sass-json-export.git && cd sass-json-export
19
+ ```
20
+
21
+ ### npm
22
+
23
+ ``` bash
24
+ npm install sass-json-export --save-dev
25
+ ```
26
+
27
+ ## Example
28
+
29
+ ### Encoding Sass to JSON
30
+
31
+ #### Sass
32
+
33
+ ``` scss
34
+ $map: ((a: (1 2 ( b : 1 )), b: ( #444444, false, ( a: 1, b: test ) ), c: (2 3 4 string)));
35
+
36
+ @include json-encode($map);
37
+ ```
38
+
39
+ #### CSS
40
+
41
+ ``` css
42
+ /*! json-encode: '{"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]}' */
43
+
44
+ body::before {
45
+ display:block;
46
+ width:0;height:0;
47
+ overflow:hidden;
48
+ content: '{"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]}';
49
+ }
50
+
51
+ head {
52
+ font-family: '{"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]}';
53
+ }
54
+
55
+ @media -json-encode {
56
+ json {
57
+ json: '{"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]}';
58
+ }
59
+ }
60
+ ```
61
+
62
+ If you want to restrict the output to only one of the three drivers (comment,
63
+ media query or regular output) you can pass a flag as the second parameter with
64
+ one of the four following keywords: `all`, `comment`, `media` or
65
+ `regular`. Default is `all`.
66
+
67
+ ## Requirements
68
+
69
+ All you need is Sass 3.3+. Otherwise it's just pure Sass madness.
70
+
71
+ ## Development
72
+
73
+ ### You need
74
+
75
+ * [NodeJS](http://nodejs.org)
76
+ * Sass 3.3
77
+ * `grunt-cli` via `npm install -g grunt-cli`
78
+
79
+ ### How to
80
+
81
+ 1. Fork this repository
82
+ 2. Run `npm install`
83
+ 3. `grunt dev`
84
+ 4. Make your changes + write tests
85
+ 5. Commit + Pull request
86
+
87
+ ## Credits
88
+
89
+ * [Fabrice Weinberg](http://twitter.com/fweinb)
90
+ * [Hugo Giraudel](http://twitter.com/hugogiraudel)
@@ -0,0 +1,60 @@
1
+ {
2
+ "_from": "sass-json-export",
3
+ "_id": "sass-json-export@2.0.1",
4
+ "_inBundle": false,
5
+ "_integrity": "sha512-xNoOlN+36MKOnNxB/zQ09s6vZH6WmC/u9lXJ9FAbTf65lRJNyT2sPRS1iqKopLb9ZbdXfukpvHzh1n1/BkqVdA==",
6
+ "_location": "/sass-json-export",
7
+ "_phantomChildren": {},
8
+ "_requested": {
9
+ "type": "tag",
10
+ "registry": true,
11
+ "raw": "sass-json-export",
12
+ "name": "sass-json-export",
13
+ "escapedName": "sass-json-export",
14
+ "rawSpec": "",
15
+ "saveSpec": null,
16
+ "fetchSpec": "latest"
17
+ },
18
+ "_requiredBy": [
19
+ "#DEV:/",
20
+ "#USER"
21
+ ],
22
+ "_resolved": "https://registry.npmjs.org/sass-json-export/-/sass-json-export-2.0.1.tgz",
23
+ "_shasum": "265d822db87d5c1a12cc3934531404b889bbf26b",
24
+ "_spec": "sass-json-export",
25
+ "_where": "D:\\boulot\\app-node\\cssfabric",
26
+ "author": {
27
+ "name": "Hugo Giraudel, Fabrice Weinberg"
28
+ },
29
+ "bugs": {
30
+ "url": "https://github.com/oddbird/sass-json-export/issues"
31
+ },
32
+ "bundleDependencies": false,
33
+ "dependencies": {},
34
+ "deprecated": false,
35
+ "description": "Export your Sass data structures to JSON.",
36
+ "devDependencies": {
37
+ "bootcamp": "^1.1.7",
38
+ "grunt": "^0.4.5",
39
+ "grunt-contrib-watch": "^0.6.1",
40
+ "grunt-sass": "^1.1.0",
41
+ "grunt-sass-lint": "0.1.0-beta.4"
42
+ },
43
+ "homepage": "https://github.com/oddbird/sass-json-export",
44
+ "keywords": [
45
+ "sass",
46
+ "scss",
47
+ "json"
48
+ ],
49
+ "license": "MIT",
50
+ "maintainer": "OddBird",
51
+ "name": "sass-json-export",
52
+ "repository": {
53
+ "type": "git",
54
+ "url": "git+https://github.com/oddbird/sass-json-export.git"
55
+ },
56
+ "scripts": {
57
+ "test": "grunt test"
58
+ },
59
+ "version": "2.0.1"
60
+ }