@medyll/cssfabric 0.2.0 → 0.2.3

package/{styles → src/lib/styles}/theme/theme.css

@@ -194,4 +194,52 @@
 }
 .theme-border-tertiary-invert {
   border-color: var(--theme-color-tertiary-invert);
+}
+
+.theme-text-color, .theme-foreground-color {
+  color: var(--theme-color-text);
+}
+
+.theme-foreground-color-alpha {
+  color: var(--theme-color-foreground-alpha);
+}
+
+.theme-foreground-color-alpha-low {
+  color: var(--theme-color-foreground-alpha-low);
+}
+
+.theme-foreground-color-alpha-high {
+  color: var(--theme-color-foreground-alpha-high);
+}
+
+.theme-bg {
+  background-color: var(--theme-color-background);
+}
+
+.theme-bg-alpha {
+  background-color: var(--theme-color-background-alpha);
+}
+
+.theme-bg-alpha-low {
+  background-color: var(--theme-color-background-alpha-low);
+}
+
+.theme-bg-alpha-high {
+  background-color: var(--theme-color-background-alpha-high);
+}
+
+.theme-bg-paper {
+  background-color: var(--theme-color-paper);
+}
+
+.theme-bg-paper-alpha {
+  background-color: var(--theme-color-paper-alpha);
+}
+
+.theme-bg-paper-alpha-low {
+  background-color: var(--theme-color-paper-alpha-low);
+}
+
+.theme-bg-paper-alpha-high {
+  background-color: var(--theme-color-paper-alpha-high);
 }

package/{styles → src/lib/styles}/theme/theme.min.css

@@ -1 +1 @@
-.theme-text-primary{color:var(--theme-color-primary)}.theme-text-primary-light{color:var(--theme-color-primary-light)}.theme-text-primary-lighter{color:var(--theme-color-primary-lighter)}.theme-text-primary-dark{color:var(--theme-color-primary-dark)}.theme-text-primary-darker{color:var(--theme-color-primary-darker)}.theme-text-primary-complement{color:var(--theme-color-primary-complement)}.theme-text-primary-invert{color:var(--theme-color-primary-invert)}.theme-bg-primary{background-color:var(--theme-color-primary)}.theme-bg-primary-light{background-color:var(--theme-color-primary-light)}.theme-bg-primary-lighter{background-color:var(--theme-color-primary-lighter)}.theme-bg-primary-dark{background-color:var(--theme-color-primary-dark)}.theme-bg-primary-darker{background-color:var(--theme-color-primary-darker)}.theme-bg-primary-complement{background-color:var(--theme-color-primary-complement)}.theme-bg-primary-invert{background-color:var(--theme-color-primary-invert)}.theme-border-primary{border-color:var(--theme-color-primary)}.theme-border-primary-light{border-color:var(--theme-color-primary-light)}.theme-border-primary-lighter{border-color:var(--theme-color-primary-lighter)}.theme-border-primary-dark{border-color:var(--theme-color-primary-dark)}.theme-border-primary-darker{border-color:var(--theme-color-primary-darker)}.theme-border-primary-complement{border-color:var(--theme-color-primary-complement)}.theme-border-primary-invert{border-color:var(--theme-color-primary-invert)}.theme-text-secondary{color:var(--theme-color-secondary)}.theme-text-secondary-light{color:var(--theme-color-secondary-light)}.theme-text-secondary-lighter{color:var(--theme-color-secondary-lighter)}.theme-text-secondary-dark{color:var(--theme-color-secondary-dark)}.theme-text-secondary-darker{color:var(--theme-color-secondary-darker)}.theme-text-secondary-complement{color:var(--theme-color-secondary-complement)}.theme-text-secondary-invert{color:var(--theme-color-secondary-invert)}.theme-bg-secondary{background-color:var(--theme-color-secondary)}.theme-bg-secondary-light{background-color:var(--theme-color-secondary-light)}.theme-bg-secondary-lighter{background-color:var(--theme-color-secondary-lighter)}.theme-bg-secondary-dark{background-color:var(--theme-color-secondary-dark)}.theme-bg-secondary-darker{background-color:var(--theme-color-secondary-darker)}.theme-bg-secondary-complement{background-color:var(--theme-color-secondary-complement)}.theme-bg-secondary-invert{background-color:var(--theme-color-secondary-invert)}.theme-border-secondary{border-color:var(--theme-color-secondary)}.theme-border-secondary-light{border-color:var(--theme-color-secondary-light)}.theme-border-secondary-lighter{border-color:var(--theme-color-secondary-lighter)}.theme-border-secondary-dark{border-color:var(--theme-color-secondary-dark)}.theme-border-secondary-darker{border-color:var(--theme-color-secondary-darker)}.theme-border-secondary-complement{border-color:var(--theme-color-secondary-complement)}.theme-border-secondary-invert{border-color:var(--theme-color-secondary-invert)}.theme-text-tertiary{color:var(--theme-color-tertiary)}.theme-text-tertiary-light{color:var(--theme-color-tertiary-light)}.theme-text-tertiary-lighter{color:var(--theme-color-tertiary-lighter)}.theme-text-tertiary-dark{color:var(--theme-color-tertiary-dark)}.theme-text-tertiary-darker{color:var(--theme-color-tertiary-darker)}.theme-text-tertiary-complement{color:var(--theme-color-tertiary-complement)}.theme-text-tertiary-invert{color:var(--theme-color-tertiary-invert)}.theme-bg-tertiary{background-color:var(--theme-color-tertiary)}.theme-bg-tertiary-light{background-color:var(--theme-color-tertiary-light)}.theme-bg-tertiary-lighter{background-color:var(--theme-color-tertiary-lighter)}.theme-bg-tertiary-dark{background-color:var(--theme-color-tertiary-dark)}.theme-bg-tertiary-darker{background-color:var(--theme-color-tertiary-darker)}.theme-bg-tertiary-complement{background-color:var(--theme-color-tertiary-complement)}.theme-bg-tertiary-invert{background-color:var(--theme-color-tertiary-invert)}.theme-border-tertiary{border-color:var(--theme-color-tertiary)}.theme-border-tertiary-light{border-color:var(--theme-color-tertiary-light)}.theme-border-tertiary-lighter{border-color:var(--theme-color-tertiary-lighter)}.theme-border-tertiary-dark{border-color:var(--theme-color-tertiary-dark)}.theme-border-tertiary-darker{border-color:var(--theme-color-tertiary-darker)}.theme-border-tertiary-complement{border-color:var(--theme-color-tertiary-complement)}.theme-border-tertiary-invert{border-color:var(--theme-color-tertiary-invert)}
+.theme-text-primary{color:var(--theme-color-primary)}.theme-text-primary-light{color:var(--theme-color-primary-light)}.theme-text-primary-lighter{color:var(--theme-color-primary-lighter)}.theme-text-primary-dark{color:var(--theme-color-primary-dark)}.theme-text-primary-darker{color:var(--theme-color-primary-darker)}.theme-text-primary-complement{color:var(--theme-color-primary-complement)}.theme-text-primary-invert{color:var(--theme-color-primary-invert)}.theme-bg-primary{background-color:var(--theme-color-primary)}.theme-bg-primary-light{background-color:var(--theme-color-primary-light)}.theme-bg-primary-lighter{background-color:var(--theme-color-primary-lighter)}.theme-bg-primary-dark{background-color:var(--theme-color-primary-dark)}.theme-bg-primary-darker{background-color:var(--theme-color-primary-darker)}.theme-bg-primary-complement{background-color:var(--theme-color-primary-complement)}.theme-bg-primary-invert{background-color:var(--theme-color-primary-invert)}.theme-border-primary{border-color:var(--theme-color-primary)}.theme-border-primary-light{border-color:var(--theme-color-primary-light)}.theme-border-primary-lighter{border-color:var(--theme-color-primary-lighter)}.theme-border-primary-dark{border-color:var(--theme-color-primary-dark)}.theme-border-primary-darker{border-color:var(--theme-color-primary-darker)}.theme-border-primary-complement{border-color:var(--theme-color-primary-complement)}.theme-border-primary-invert{border-color:var(--theme-color-primary-invert)}.theme-text-secondary{color:var(--theme-color-secondary)}.theme-text-secondary-light{color:var(--theme-color-secondary-light)}.theme-text-secondary-lighter{color:var(--theme-color-secondary-lighter)}.theme-text-secondary-dark{color:var(--theme-color-secondary-dark)}.theme-text-secondary-darker{color:var(--theme-color-secondary-darker)}.theme-text-secondary-complement{color:var(--theme-color-secondary-complement)}.theme-text-secondary-invert{color:var(--theme-color-secondary-invert)}.theme-bg-secondary{background-color:var(--theme-color-secondary)}.theme-bg-secondary-light{background-color:var(--theme-color-secondary-light)}.theme-bg-secondary-lighter{background-color:var(--theme-color-secondary-lighter)}.theme-bg-secondary-dark{background-color:var(--theme-color-secondary-dark)}.theme-bg-secondary-darker{background-color:var(--theme-color-secondary-darker)}.theme-bg-secondary-complement{background-color:var(--theme-color-secondary-complement)}.theme-bg-secondary-invert{background-color:var(--theme-color-secondary-invert)}.theme-border-secondary{border-color:var(--theme-color-secondary)}.theme-border-secondary-light{border-color:var(--theme-color-secondary-light)}.theme-border-secondary-lighter{border-color:var(--theme-color-secondary-lighter)}.theme-border-secondary-dark{border-color:var(--theme-color-secondary-dark)}.theme-border-secondary-darker{border-color:var(--theme-color-secondary-darker)}.theme-border-secondary-complement{border-color:var(--theme-color-secondary-complement)}.theme-border-secondary-invert{border-color:var(--theme-color-secondary-invert)}.theme-text-tertiary{color:var(--theme-color-tertiary)}.theme-text-tertiary-light{color:var(--theme-color-tertiary-light)}.theme-text-tertiary-lighter{color:var(--theme-color-tertiary-lighter)}.theme-text-tertiary-dark{color:var(--theme-color-tertiary-dark)}.theme-text-tertiary-darker{color:var(--theme-color-tertiary-darker)}.theme-text-tertiary-complement{color:var(--theme-color-tertiary-complement)}.theme-text-tertiary-invert{color:var(--theme-color-tertiary-invert)}.theme-bg-tertiary{background-color:var(--theme-color-tertiary)}.theme-bg-tertiary-light{background-color:var(--theme-color-tertiary-light)}.theme-bg-tertiary-lighter{background-color:var(--theme-color-tertiary-lighter)}.theme-bg-tertiary-dark{background-color:var(--theme-color-tertiary-dark)}.theme-bg-tertiary-darker{background-color:var(--theme-color-tertiary-darker)}.theme-bg-tertiary-complement{background-color:var(--theme-color-tertiary-complement)}.theme-bg-tertiary-invert{background-color:var(--theme-color-tertiary-invert)}.theme-border-tertiary{border-color:var(--theme-color-tertiary)}.theme-border-tertiary-light{border-color:var(--theme-color-tertiary-light)}.theme-border-tertiary-lighter{border-color:var(--theme-color-tertiary-lighter)}.theme-border-tertiary-dark{border-color:var(--theme-color-tertiary-dark)}.theme-border-tertiary-darker{border-color:var(--theme-color-tertiary-darker)}.theme-border-tertiary-complement{border-color:var(--theme-color-tertiary-complement)}.theme-border-tertiary-invert{border-color:var(--theme-color-tertiary-invert)}.theme-text-color,.theme-foreground-color{color:var(--theme-color-text)}.theme-foreground-color-alpha{color:var(--theme-color-foreground-alpha)}.theme-foreground-color-alpha-low{color:var(--theme-color-foreground-alpha-low)}.theme-foreground-color-alpha-high{color:var(--theme-color-foreground-alpha-high)}.theme-bg{background-color:var(--theme-color-background)}.theme-bg-alpha{background-color:var(--theme-color-background-alpha)}.theme-bg-alpha-low{background-color:var(--theme-color-background-alpha-low)}.theme-bg-alpha-high{background-color:var(--theme-color-background-alpha-high)}.theme-bg-paper{background-color:var(--theme-color-paper)}.theme-bg-paper-alpha{background-color:var(--theme-color-paper-alpha)}.theme-bg-paper-alpha-low{background-color:var(--theme-color-paper-alpha-low)}.theme-bg-paper-alpha-high{background-color:var(--theme-color-paper-alpha-high)}

package/{styles → src/lib/styles}/vars.css

@@ -1,4 +1,4 @@
-/* cssFabric vars yes */
+/* cssFabric vars yes  */
 :root {
   /* theme primary colors*/
   --theme-color-primary: #201700;

package/src/routes/__layout.svelte

@@ -0,0 +1,91 @@
+<script context="module" lang="ts">
+
+  export const prerender = true;
+</script>
+<script lang="ts">
+  import Header from '$lib/../components/header/Header.svelte';
+  import '../app.css';
+  import HeaderSiteTitle from "../components/HeaderSiteTitle.svelte";
+  import {fabricNavigation} from "../scripts/utils";
+
+  const links: string[] = fabricNavigation.getActiveLinks();
+
+  export let moduleTag  = '';
+  export let modulePage = '';
+
+
+
+</script>
+
+<main class={"w-full  flex flex-v   h-full content-start overflow-auto"}>
+    <div class={"w-full w-sm-main "}>
+        <HeaderSiteTitle
+                description={"cssFabric is an alpha cssFabric"}
+                title="cssfabric"
+                title_tag={"just.fabric.it"}
+        />
+
+    </div>
+    <div class={" dsp-none"}>
+        <div class={"dsp-none dsp-sm-block"}>sm</div>
+        <div class={"dsp-md-block dsp-none "}>md</div>
+        <div class={"dsp-lg-block dsp-none"}>lg</div>
+        <div class={"dsp-none dsp-xl-block dsp-none"}>xl</div>
+        <div class={"dsp-none dsp-xxl-block dsp-none"}>xxl</div>
+        <div class={"dsp-none dsp-xxxl-block dsp-none"}>xxxl</div>
+    </div>
+    <div class={"flex flex-lg-v flex-h  h-full"}>
+        <aside class={"w-lg-full w-8 pad "}>
+            <nav class={"pad pad-lg"}>
+                <ul class={"menu-lg-h menu-v"}>
+                    <li class={"menu-item " }>
+                        <a href={'/installation'}>
+                            <span>installation</span>
+                        </a>
+                    </li>
+                </ul>
+                <ul class={"menu-lg-h menu-v"}>
+                    {#each Object.values(links) as key}
+                        <!--{    css = (staticModule === key) ? 'active' : '';}-->
+                        <li class={"menu-item " } class:active={(moduleTag === key)}>
+                            <a  rel="external" href={fabricNavigation.getModuleClassNamesPage(key)}>
+                                <span>{`${key}`}</span>
+                            </a>
+                        </li>
+                    {/each}
+                </ul>
+            </nav>
+        </aside>
+        <section class={"flex-main"}>
+            <slot>slot test</slot>
+        </section>
+    </div>
+</main>
+
+
+<style global lang="scss">
+  @import "src/lib/styles/cssfabric.min";
+
+  main {
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+
+  footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 40px;
+  }
+
+  footer a {
+    font-weight: bold;
+  }
+
+  @media (min-width: 480px) {
+    footer {
+      padding: 40px 0;
+    }
+  }
+</style>

package/src/routes/cssfabric-modules/[module]/__layout.svelte

@@ -0,0 +1,75 @@
+<svelte:head>
+
+    <title>{staticModule} {staticAction} cssfabric</title>
+</svelte:head>
+<script context="module" lang="ts">
+  export const prerender = true;
+  /** @type {import('./modules/[module]/[page]').Load} */
+  export async function load({params, fetch, session, stuff}) {
+    console.log(params)
+    // console.log(params, fetch, session, stuff);
+    return {
+      status: 200,
+      props : {
+        moduleTag : params.module,
+        modulePage: params.page
+      }
+    };
+  }
+</script>
+
+<script lang="ts">
+  import cssfabric from '../../../lib/scripts/cssfabric';
+  import {fabricNavigation} from '../../../scripts/utils';
+  import InnerMenu from '../../../components/InnerMenu.svelte';
+  import SubHeader from '../../../components/SubHeader.svelte';
+  import Header from '../../../components/Header.svelte';
+
+  export let moduleTag  = '';
+  export let modulePage = '';
+
+  const links: string[] = fabricNavigation.getActiveLinks();
+
+  let tagProperties: Record<string, any> = {};
+
+  let staticModule: string = moduleTag;
+  let staticAction: string = '';
+
+  $: tagProperties = cssfabric.getModuleMetaData(moduleTag);
+  $: staticAction = modulePage;
+
+</script>
+<Header
+        description={tagProperties.description}
+        tag={"fabric.css." + tagProperties.title}
+        title={"." + tagProperties.title}
+/>
+<div class={"flex  flex-xl-v flex-h marg-t-2"}>
+    <div class={"marg-t-2 marg-lg-l-4 pad"}>
+        <div class="">
+            <ul class={"menu-xl-h menu-v menu-small shad-8"}>
+                <li class={(modulePage==='demo')? 'active':''}>
+                    <a href={fabricNavigation.getModuleDemoPage(moduleTag)}>
+                        <a>Demo</a>
+                    </a>
+                </li>
+                <li class={(modulePage==='classnames')? 'active':''}>
+                    <a href={fabricNavigation.getModuleClassNamesPage(moduleTag)}>
+                        <a>Classnames</a>
+                    </a>
+                </li>
+                <li class={(modulePage==='docs')? 'active':''}>
+                    <a href={fabricNavigation.getModuleDocsPage(moduleTag)}>
+                        <a>Docs</a>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class={"pad-l-4 flex-main"}>
+        <SubHeader title={staticModule + '.' + staticAction}/>
+        <div>
+            <slot module={staticModule} ></slot>
+        </div>
+    </div>
+</div>

package/src/routes/cssfabric-modules/[module]/classnames/index.svelte

@@ -0,0 +1,24 @@
+<script context="module" lang="ts">
+  export const prerender = true;
+  /** @type {import('./[module]/classnames').Load} */
+  export async function load({params, fetch, session, stuff}) {
+    console.log({params})
+    // console.log(params, fetch, session, stuff);
+    return {
+      status: 200,
+      props : {
+        moduleTag : params.module,
+        modulePage: params.page
+      }
+    };
+  }
+</script>
+<script>
+    import DocsClassNames from "../../../../components/docs/DocsClassNames.svelte";
+
+    export let moduleTag  = '';
+    export let modulePage = '';
+</script>
+
+
+<DocsClassNames  module={moduleTag} />

package/src/routes/cssfabric-modules/[module]/demo/index.svelte

@@ -0,0 +1,24 @@
+<script context="module" lang="ts">
+  export const prerender = true;
+  /** @type {import('./[module]/classnames').Load} */
+  export async function load({params, fetch, session, stuff}) {
+    console.log({params})
+    // console.log(params, fetch, session, stuff);
+    return {
+      status: 200,
+      props : {
+        moduleTag : params.module,
+        modulePage: params.page
+      }
+    };
+  }
+</script>
+<script>
+    import DocsDemo from "../../../../components/docs/DocsDemo.svelte";
+
+    export let moduleTag  = '';
+    export let modulePage = '';
+</script>
+
+
+<DocsDemo  module={moduleTag} />

package/src/routes/cssfabric-modules/[module]/docs/index.svelte

@@ -0,0 +1,30 @@
+
+<script context="module" lang="ts">
+  export const prerender = true;
+  /** @type {import('./[module]/docs').Load} */
+  export async function load({params, fetch, session, stuff}) {
+
+    return {
+      status: 200,
+      props : {
+        moduleTag : params.module,
+        modulePage: params.page
+      }
+    };
+  }
+</script>
+<script lang="ts">
+    import { HighlightAuto  } from "svelte-highlight";
+    import "svelte-highlight/styles/github.css";
+    import Docs from "../../../../components/docs/Docs.svelte";
+
+    export let moduleTag  = '';
+    export let modulePage = 'docs';
+
+    let code = `let a = 123; let fr = 'red'; const red = function(args:any){}`
+</script>
+<HighlightAuto  code={`<div class="noclass"></div>`} />
+<HighlightAuto  code={`npm i @medyll/cssfabric`} />
+<HighlightAuto  code={code} />
+
+<Docs module={moduleTag}  />

package/src/routes/cssfabric-modules/[module]/index.svelte

@@ -0,0 +1,3 @@
+module index <br />
+<slot></slot>
+module index <br />

package/src/routes/cssfabric-modules/__layout.svelte

@@ -0,0 +1,26 @@
+<script context="module" lang="ts">
+
+  export const prerender = true;
+</script>
+<script lang="ts">
+
+  import {fabricNavigation} from '../../scripts/utils';
+  import cssfabric from '../../lib/scripts/cssfabric';
+  import HeaderSiteTitle from '../../components/HeaderSiteTitle.svelte';
+
+  export let moduleTag  = '';
+  export let modulePage = '';
+
+  const links: string[] = fabricNavigation.getActiveLinks();
+
+  let DynamicComponent;
+  let tagProperties: Record<string, any> = {};
+
+  let staticModule: string = moduleTag;
+  let staticPage: string   = modulePage;
+
+  $: tagProperties = cssfabric.getModuleMetaData(moduleTag);
+  $: staticPage = modulePage;
+</script>
+
+<slot></slot>

package/src/routes/index.svelte

@@ -0,0 +1,62 @@
+<script context="module" lang="ts">
+  export const prerender = true;
+</script>
+
+<script lang="ts">
+  import {fabricNavigation} from '../scripts/utils';
+  import github from "svelte-highlight/styles/github";
+  const cssfabricModules = fabricNavigation.getActiveLinks();
+  $: console.log({cssfabricModules});
+</script>
+<svelte:head>
+    <title>cssFabric home</title>
+    {@html github}
+</svelte:head>
+<div class={"flex-main flex-align-middle scale-w-sm-full scale-w-lg-32 scale-w-64 pad-all"}>
+    <div title={"a css framework"}>
+        <p>
+            <strong>cssfabric</strong> is a css framework built around css properties<br/>
+            it's goal is to permit you to achieve of all your design task, from single page applications to frontend web sites
+        </p>
+    </div>
+    <p title={"with some css in"}>
+    </p>
+    <div class={"flex-h flex-wrap flex-align-center"}>
+        {#each Object.values(cssfabricModules) as key, name }
+            <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"}>
+                <a href={fabricNavigation.getModuleDemoPage(key)}>
+                    <span>{`${key}`}</span>
+                </a>
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style lang="scss">
+  section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+  }
+
+  h1 {
+    width: 100%;
+  }
+
+  .welcome {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding: 0 0 calc(100% * 495 / 2048) 0;
+  }
+
+  .welcome img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    display: block;
+  }
+</style>

package/src/routes/installation/__layout.svelte

@@ -0,0 +1 @@
+<slot></slot>

package/src/routes/installation/index.svelte

@@ -0,0 +1,28 @@
+<script context="module" lang="ts">
+
+</script>
+<script>
+    import {HighlightAuto,Highlight} from "svelte-highlight";
+    import typescript from "svelte-highlight/languages/typescript";
+    import node from "svelte-highlight/languages/node-repl";
+
+    const code1 = `npm i @medyll/cssfabric
+#or
+yarn add @medyll/cssfabric`
+
+    const code2 = `npm init @medyll/cssfabric # will create configuration files`
+
+    const htmlCode = "<style></style>"
+</script>
+
+
+<h4>install cssfabric</h4>
+
+<Highlight language={typescript} code={code1}/>
+then
+<Highlight language={node} code={code2}/>
+
+
+<Highlight   code={htmlCode}/>
+
+

package/src/scripts/utils.ts

@@ -0,0 +1,26 @@
+import cssfabric from '../lib/scripts/cssfabric';
+
+export const urlModule  = 'cssfabric-modules';
+const pageDocsName      = 'docs';
+const pageDemoName      = 'demo';
+const pageDemoClassName = 'classnames';
+
+export const fabricNavigation = {
+  getHomePages           : () => {
+    return `/${urlModule}`;
+  },
+  getModuleDocsPage      : (module: string) => {
+    return `/${urlModule}/${module}/${pageDocsName}`;
+  },
+  getModuleClassNamesPage: (module: string) => {
+    return `/${urlModule}/${module}/${pageDemoClassName}`;
+  },
+  getModuleDemoPage      : (module: string) => {
+    return `/${urlModule}/${module}/${pageDemoName}`;
+  },
+  getActiveLinks         : (): string[] => {
+    const cssfab = cssfabric.getModuleList();
+    return Object.keys(cssfab).filter((link: string) => cssfab?.[link]?._docs?.attributes);
+  }
+};
+

package/src/utils.ts

@@ -0,0 +1,71 @@
+import cssfabric from './lib/scripts/cssfabric';
+
+
+const utils = {
+    
+    isArrayOfTypes: (arr: any): any => {
+        let ret = '';
+        
+        if (!Array.isArray(arr)) {
+            return false;
+        }
+        if (arr.every(x => Array.isArray(x))) ret = 'arrays'
+        if (arr.every(x => typeof x === 'number' || typeof x === 'string')) ret = 'strings'
+        if (arr.every(x => typeof x === 'string')) ret = 'strings'
+        if (arr.every(x => typeof x === 'number')) ret = 'numbers'
+        if (arr.every(x => typeof x === 'object' && !Array.isArray(x))) ret = 'objects'
+        
+        return ret;
+    },
+    
+    isObjectOfTypes: (arr: any): string | boolean => {
+        
+        if (Array.isArray(arr)) {
+            return false;
+        }
+        
+        let ret       = '';
+        let arrValues = Object.values(arr);
+        
+        if (arrValues.every(x => typeof x === 'number' || typeof x === 'string')) ret = 'strings'
+        if (arrValues.every(x => Array.isArray(x))) ret = 'arrays'
+        if (arrValues.every(x => typeof x === 'string')) ret = 'strings'
+        if (arrValues.every(x => typeof x === 'number')) ret = 'numbers'
+        if (arrValues.every(x => typeof x === 'object' && !Array.isArray(x))) ret = 'objects'
+        
+        return ret;
+    }
+}
+
+export const htmlUtils = {
+    enclose: (content: any, tag: string = 'div') => {
+        return `<div className={"cell-spacing cell-padding"}>${content}</div>`
+    }
+}
+export default utils;
+
+
+const urlModule         = 'cssfabric-modules';
+const pageDocsName      = 'docs';
+const pageDemoName      = 'demo';
+const pageDemoClassName = 'classnames';
+
+export const fabricNavigation = {
+    getHomePages:            () => {
+        return `/${urlModule}`;
+    },
+    getModuleDocsPage:       (module: string) => {
+        return `/${urlModule}/${module}/${pageDocsName}`;
+    },
+    getModuleClassNamesPage: (module: string) => {
+        return `/${urlModule}/${module}/${pageDemoClassName}`;
+    },
+    getModuleDemoPage:       (module: string) => {
+        return `/${urlModule}/${module}/${pageDemoName}`;
+    },
+    getActiveLinks:          (): string[] => {
+        const cssfab     = cssfabric.getModuleList();
+        return Object.keys(cssfab).filter((link: string) => cssfab?.[link]?._docs?.attributes);
+    }
+}
+

package/src/vendor/index.d.ts

@@ -0,0 +1,3 @@
+declare const module;
+
+export default module;

package/src/vendor/normalize/normalize.min.css

@@ -0,0 +1,2 @@
+/*! 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}
+/*# sourceMappingURL=normalize.min.css.map */