@medyll/cssfabric 0.1.1 → 0.2.1

package/src/lib/styles/vars.min.css

@@ -0,0 +1 @@
+:root{--theme-color-primary: #201700;--theme-color-primary-light: #6d4e00;--theme-color-primary-lighter: #b98500;--theme-color-primary-dark: black;--theme-color-primary-darker: black;--theme-color-primary-complement: #000920;--theme-color-primary-invert: #dfe8ff;--theme-color-primary-alpha-low: rgba(32, 23, 0, 0.8);--theme-color-primary-alpha: rgba(32, 23, 0, 0.3);--theme-color-primary-alpha-high: rgba(32, 23, 0, 0.1);--theme-color-secondary: #D14B02;--theme-color-secondary-light: #fd7023;--theme-color-secondary-lighter: #fea16e;--theme-color-secondary-dark: #9e3902;--theme-color-secondary-darker: #6c2701;--theme-color-secondary-complement: #0288d1;--theme-color-secondary-invert: #2eb4fd;--theme-color-secondary-alpha-low: rgba(209, 75, 2, 0.8);--theme-color-secondary-alpha: rgba(209, 75, 2, 0.3);--theme-color-secondary-alpha-high: rgba(209, 75, 2, 0.1);--theme-color-tertiary: #88D102;--theme-color-tertiary-light: #b0fd23;--theme-color-tertiary-lighter: #cbfe6e;--theme-color-tertiary-dark: #679e02;--theme-color-tertiary-darker: #466c01;--theme-color-tertiary-complement: #4b02d1;--theme-color-tertiary-invert: #772efd;--theme-color-tertiary-alpha-low: rgba(136, 209, 2, 0.8);--theme-color-tertiary-alpha: rgba(136, 209, 2, 0.3);--theme-color-tertiary-alpha-high: rgba(136, 209, 2, 0.1);--color-scheme-discrete: #ccc;--color-scheme-discrete-light: #f2f2f2;--color-scheme-discrete-dark: #b3b3b3;--color-scheme-discrete-alpha: rgba(204, 204, 204, 0.3);--color-scheme-discrete-alpha-low: rgba(204, 204, 204, 0.8);--color-scheme-discrete-alpha-high: rgba(204, 204, 204, 0.1);--color-scheme-success: green;--color-scheme-success-light: #00cd00;--color-scheme-success-dark: #004d00;--color-scheme-success-alpha: rgba(0, 128, 0, 0.3);--color-scheme-success-alpha-low: rgba(0, 128, 0, 0.8);--color-scheme-success-alpha-high: rgba(0, 128, 0, 0.1);--color-scheme-info: #FFDD57FF;--color-scheme-info-light: #ffeca4;--color-scheme-info-dark: #ffd324;--color-scheme-info-alpha: rgba(255, 221, 87, 0.3);--color-scheme-info-alpha-low: rgba(255, 221, 87, 0.8);--color-scheme-info-alpha-high: rgba(255, 221, 87, 0.1);--color-scheme-warning: #e6b905;--color-scheme-warning-light: #fbd53c;--color-scheme-warning-dark: #b49104;--color-scheme-warning-alpha: rgba(230, 185, 5, 0.3);--color-scheme-warning-alpha-low: rgba(230, 185, 5, 0.8);--color-scheme-warning-alpha-high: rgba(230, 185, 5, 0.1);--color-scheme-alert: #ff7300;--color-scheme-alert-light: #ff9d4d;--color-scheme-alert-dark: #cc5c00;--color-scheme-alert-alpha: rgba(255, 115, 0, 0.3);--color-scheme-alert-alpha-low: rgba(255, 115, 0, 0.8);--color-scheme-alert-alpha-high: rgba(255, 115, 0, 0.1);--color-scheme-error: red;--color-scheme-error-light: #ff4d4d;--color-scheme-error-dark: #cc0000;--color-scheme-error-alpha: rgba(255, 0, 0, 0.3);--color-scheme-error-alpha-low: rgba(255, 0, 0, 0.8);--color-scheme-error-alpha-high: rgba(255, 0, 0, 0.1);--color-palette-yellow: #ffb900;--color-palette-yellow-alpha: rgba(255, 185, 0, 0.3);--color-palette-yellow-alpha-low: rgba(255, 185, 0, 0.8);--color-palette-yellow-alpha-high: rgba(255, 185, 0, 0.1);--color-palette-yellow-lighter: #ffe399;--color-palette-yellow-light: #ffce4d;--color-palette-yellow-dark: #cc9400;--color-palette-yellow-darker: #996f00;--color-palette-yellow-complement: #0046ff;--color-palette-yellow-complement-alpha: rgba(0, 70, 255, 0.3);--color-palette-yellow-complement-alpha-low: rgba(0, 70, 255, 0.8);--color-palette-yellow-complement-alpha-high: rgba(0, 70, 255, 0.1);--color-palette-yellow-invert: #0046ff;--color-palette-yellow-invert-alpha: rgba(0, 70, 255, 0.3);--color-palette-yellow-invert-alpha-low: rgba(0, 70, 255, 0.8);--color-palette-yellow-invert-alpha-high: rgba(0, 70, 255, 0.1);--color-palette-orange: #d83b01;--color-palette-orange-alpha: rgba(216, 59, 1, 0.3);--color-palette-orange-alpha-low: rgba(216, 59, 1, 0.8);--color-palette-orange-alpha-high: rgba(216, 59, 1, 0.1);--color-palette-orange-lighter: #fe9974;--color-palette-orange-light: #fe6127;--color-palette-orange-dark: #a52d01;--color-palette-orange-darker: #721f01;--color-palette-orange-complement: #019ed8;--color-palette-orange-complement-alpha: rgba(1, 158, 216, 0.3);--color-palette-orange-complement-alpha-low: rgba(1, 158, 216, 0.8);--color-palette-orange-complement-alpha-high: rgba(1, 158, 216, 0.1);--color-palette-orange-invert: #27c4fe;--color-palette-orange-invert-alpha: rgba(39, 196, 254, 0.3);--color-palette-orange-invert-alpha-low: rgba(39, 196, 254, 0.8);--color-palette-orange-invert-alpha-high: rgba(39, 196, 254, 0.1);--color-palette-red: #d13438;--color-palette-red-alpha: rgba(209, 52, 56, 0.3);--color-palette-red-alpha-low: rgba(209, 52, 56, 0.8);--color-palette-red-alpha-high: rgba(209, 52, 56, 0.1);--color-palette-red-lighter: #edb1b2;--color-palette-red-light: #df7275;--color-palette-red-dark: #ab272a;--color-palette-red-darker: #821d20;--color-palette-red-complement: #34d1cd;--color-palette-red-complement-alpha: rgba(52, 209, 205, 0.3);--color-palette-red-complement-alpha-low: rgba(52, 209, 205, 0.8);--color-palette-red-complement-alpha-high: rgba(52, 209, 205, 0.1);--color-palette-red-invert: #2ecbc7;--color-palette-red-invert-alpha: rgba(46, 203, 199, 0.3);--color-palette-red-invert-alpha-low: rgba(46, 203, 199, 0.8);--color-palette-red-invert-alpha-high: rgba(46, 203, 199, 0.1);--color-palette-magenta: #b4009e;--color-palette-magenta-alpha: rgba(180, 0, 158, 0.3);--color-palette-magenta-alpha-low: rgba(180, 0, 158, 0.8);--color-palette-magenta-alpha-high: rgba(180, 0, 158, 0.1);--color-palette-magenta-lighter: #ff4ee9;--color-palette-magenta-light: #ff02e0;--color-palette-magenta-dark: #810071;--color-palette-magenta-darker: #4e0044;--color-palette-magenta-complement: #00b416;--color-palette-magenta-complement-alpha: rgba(0, 180, 22, 0.3);--color-palette-magenta-complement-alpha-low: rgba(0, 180, 22, 0.8);--color-palette-magenta-complement-alpha-high: rgba(0, 180, 22, 0.1);--color-palette-magenta-invert: #4bff61;--color-palette-magenta-invert-alpha: rgba(75, 255, 97, 0.3);--color-palette-magenta-invert-alpha-low: rgba(75, 255, 97, 0.8);--color-palette-magenta-invert-alpha-high: rgba(75, 255, 97, 0.1);--color-palette-purple: #5c2d91;--color-palette-purple-alpha: rgba(92, 45, 145, 0.3);--color-palette-purple-alpha-low: rgba(92, 45, 145, 0.8);--color-palette-purple-alpha-high: rgba(92, 45, 145, 0.1);--color-palette-purple-lighter: #a980d7;--color-palette-purple-light: #8145c5;--color-palette-purple-dark: #43216a;--color-palette-purple-darker: #2b1543;--color-palette-purple-complement: #62912d;--color-palette-purple-complement-alpha: rgba(98, 145, 45, 0.3);--color-palette-purple-complement-alpha-low: rgba(98, 145, 45, 0.8);--color-palette-purple-complement-alpha-high: rgba(98, 145, 45, 0.1);--color-palette-purple-invert: #a3d26e;--color-palette-purple-invert-alpha: rgba(163, 210, 110, 0.3);--color-palette-purple-invert-alpha-low: rgba(163, 210, 110, 0.8);--color-palette-purple-invert-alpha-high: rgba(163, 210, 110, 0.1);--color-palette-green: #107c10;--color-palette-green-alpha: rgba(16, 124, 16, 0.3);--color-palette-green-alpha-low: rgba(16, 124, 16, 0.8);--color-palette-green-alpha-high: rgba(16, 124, 16, 0.1);--color-palette-green-lighter: #3fe63f;--color-palette-green-light: #19c019;--color-palette-green-dark: #0a4f0a;--color-palette-green-darker: #042204;--color-palette-green-complement: #7c107c;--color-palette-green-complement-alpha: rgba(124, 16, 124, 0.3);--color-palette-green-complement-alpha-low: rgba(124, 16, 124, 0.8);--color-palette-green-complement-alpha-high: rgba(124, 16, 124, 0.1);--color-palette-green-invert: #ef83ef;--color-palette-green-invert-alpha: rgba(239, 131, 239, 0.3);--color-palette-green-invert-alpha-low: rgba(239, 131, 239, 0.8);--color-palette-green-invert-alpha-high: rgba(239, 131, 239, 0.1);--color-palette-teal: #008272;--color-palette-teal-alpha: rgba(0, 130, 114, 0.3);--color-palette-teal-alpha-low: rgba(0, 130, 114, 0.8);--color-palette-teal-alpha-high: rgba(0, 130, 114, 0.1);--color-palette-teal-lighter: #1cffe3;--color-palette-teal-light: #00cfb5;--color-palette-teal-dark: #004f45;--color-palette-teal-darker: #001c19;--color-palette-teal-complement: #820010;--color-palette-teal-complement-alpha: rgba(130, 0, 16, 0.3);--color-palette-teal-complement-alpha-low: rgba(130, 0, 16, 0.8);--color-palette-teal-complement-alpha-high: rgba(130, 0, 16, 0.1);--color-palette-teal-invert: #ff7d8d;--color-palette-teal-invert-alpha: rgba(255, 125, 141, 0.3);--color-palette-teal-invert-alpha-low: rgba(255, 125, 141, 0.8);--color-palette-teal-invert-alpha-high: rgba(255, 125, 141, 0.1);--color-palette-blue: #0078d4;--color-palette-blue-alpha: rgba(0, 120, 212, 0.3);--color-palette-blue-alpha-low: rgba(0, 120, 212, 0.8);--color-palette-blue-alpha-high: rgba(0, 120, 212, 0.1);--color-palette-blue-lighter: #6ec0ff;--color-palette-blue-light: #229fff;--color-palette-blue-dark: #005ba1;--color-palette-blue-darker: #003e6e;--color-palette-blue-complement: #d45c00;--color-palette-blue-complement-alpha: rgba(212, 92, 0, 0.3);--color-palette-blue-complement-alpha-low: rgba(212, 92, 0, 0.8);--color-palette-blue-complement-alpha-high: rgba(212, 92, 0, 0.1);--color-palette-blue-invert: #ff872b;--color-palette-blue-invert-alpha: rgba(255, 135, 43, 0.3);--color-palette-blue-invert-alpha-low: rgba(255, 135, 43, 0.8);--color-palette-blue-invert-alpha-high: rgba(255, 135, 43, 0.1);--color-palette-dark: #323232;--color-palette-dark-alpha: rgba(50, 50, 50, 0.3);--color-palette-dark-alpha-low: rgba(50, 50, 50, 0.8);--color-palette-dark-alpha-high: rgba(50, 50, 50, 0.1);--color-palette-dark-lighter: #7f7f7f;--color-palette-dark-light: #585858;--color-palette-dark-dark: #191919;--color-palette-dark-darker: black;--color-palette-dark-complement: #323232;--color-palette-dark-complement-alpha: rgba(50, 50, 50, 0.3);--color-palette-dark-complement-alpha-low: rgba(50, 50, 50, 0.8);--color-palette-dark-complement-alpha-high: rgba(50, 50, 50, 0.1);--color-palette-dark-invert: #cdcdcd;--color-palette-dark-invert-alpha: rgba(205, 205, 205, 0.3);--color-palette-dark-invert-alpha-low: rgba(205, 205, 205, 0.8);--color-palette-dark-invert-alpha-high: rgba(205, 205, 205, 0.1);--color-gray-100: #f4f4f4;--color-gray-100-alpha: rgba(244, 244, 244, 0.3);--color-gray-100-alpha-low: rgba(244, 244, 244, 0.8);--color-gray-100-alpha-high: rgba(244, 244, 244, 0.1);--color-gray-200: #e2e2e2;--color-gray-200-alpha: rgba(226, 226, 226, 0.3);--color-gray-200-alpha-low: rgba(226, 226, 226, 0.8);--color-gray-200-alpha-high: rgba(226, 226, 226, 0.1);--color-gray-300: #d0d0d0;--color-gray-300-alpha: rgba(208, 208, 208, 0.3);--color-gray-300-alpha-low: rgba(208, 208, 208, 0.8);--color-gray-300-alpha-high: rgba(208, 208, 208, 0.1);--color-gray-400: #bdbdbd;--color-gray-400-alpha: rgba(189, 189, 189, 0.3);--color-gray-400-alpha-low: rgba(189, 189, 189, 0.8);--color-gray-400-alpha-high: rgba(189, 189, 189, 0.1);--color-gray-500: #ababab;--color-gray-500-alpha: rgba(171, 171, 171, 0.3);--color-gray-500-alpha-low: rgba(171, 171, 171, 0.8);--color-gray-500-alpha-high: rgba(171, 171, 171, 0.1);--color-gray-600: #999999;--color-gray-600-alpha: rgba(153, 153, 153, 0.3);--color-gray-600-alpha-low: rgba(153, 153, 153, 0.8);--color-gray-600-alpha-high: rgba(153, 153, 153, 0.1);--box-density-0: 0rem;--box-density-1: 0.5rem;--box-density-2: 1rem;--box-density-3: 1.5rem;--box-density-4: 2rem;--box-density-5: 2.5rem;--box-density-6: 3rem;--box-density-7: 3.5rem;--box-density-8: 4rem;--box-density-9: 4.5rem;--box-density-10: 5rem;--box-density-11: 5.5rem;--box-density-12: 6rem;--box-density-preset-tiny: 0.25rem;--box-density-preset-small: 0.5rem;--box-density-preset-medium: 1.5rem;--box-density-preset-large: 2rem;--radius-tiny: 4px;--radius-small: 8px;--radius-medium: 16px;--font-size-h1: 3.1rem;--font-size-h2: 2.68rem;--font-size-h3: 2.26rem;--font-size-h4: 1.84rem;--font-size-h5: 1.42rem;--font-size-h6: 1rem;--font-weight-50: 50;--font-weight-100: 100;--font-weight-300: 400;--font-weight-500: 500;--font-weight-900: 900;--font-weight-light: lighter;--font-weight-cap: normal;--font-weight-bold: bold;--font-weight-bolder: bolder;--text-shadow-discrete: 0 0 0.125em #ccc;--text-shadow-success: 0 0 0.125em green;--text-shadow-info: 0 0 0.125em #FFDD57FF;--text-shadow-warning: 0 0 0.125em #e6b905;--text-shadow-alert: 0 0 0.125em #ff7300;--text-shadow-error: 0 0 0.125em red;--text-shadow-yellow: 0 0 0.125em #ffb900;--text-shadow-orange: 0 0 0.125em #d83b01;--text-shadow-red: 0 0 0.125em #d13438;--text-shadow-magenta: 0 0 0.125em #b4009e;--text-shadow-purple: 0 0 0.125em #5c2d91;--text-shadow-green: 0 0 0.125em #107c10;--text-shadow-teal: 0 0 0.125em #008272;--text-shadow-blue: 0 0 0.125em #0078d4;--text-shadow-dark: 0 0 0.125em #323232;--box-shad-1: 0 0.8333333333px 1.724137931px 0 rgba(0, 0, 0, 0.15), 0 0.1526717557px 0.4651162791px 0 rgba(0, 0, 0, 0.1);--box-shad-2: 0 1.6666666667px 3.4482758621px 0 rgba(0, 0, 0, 0.15), 0 0.3053435115px 0.9302325581px 0 rgba(0, 0, 0, 0.1);--box-shad-3: 0 2.5px 5.1724137931px 0 rgba(0, 0, 0, 0.15), 0 0.4580152672px 1.3953488372px 0 rgba(0, 0, 0, 0.1);--box-shad-4: 0 3.3333333333px 6.8965517241px 0 rgba(0, 0, 0, 0.15), 0 0.6106870229px 1.8604651163px 0 rgba(0, 0, 0, 0.1);--box-shad-5: 0 4.1666666667px 8.6206896552px 0 rgba(0, 0, 0, 0.15), 0 0.7633587786px 2.3255813953px 0 rgba(0, 0, 0, 0.1);--theme-color-text: #282230;--theme-color-foreground: #282230;--theme-color-foreground-alpha: rgba(40, 34, 48, 0.3);--theme-color-foreground-alpha-low: rgba(40, 34, 48, 0.8);--theme-color-foreground-alpha-high: rgba(40, 34, 48, 0.1);--theme-color-background: #ffffff;--theme-color-background-alpha: rgba(40, 34, 48, 0.3);--theme-color-background-alpha-low: rgba(40, 34, 48, 0.8);--theme-color-background-alpha-high: rgba(40, 34, 48, 0.1);--theme-color-paper: #f1f1f1;--theme-color-paper-alpha: rgba(241, 241, 241, 0.3);--theme-color-paper-alpha-low: rgba(241, 241, 241, 0.8);--theme-color-paper-alpha-high: rgba(241, 241, 241, 0.1);--theme-color-border: rgba(40, 34, 48, 0.2)}:root [density=small]{--box-density-0: 0rem;--box-density-1: 0.25rem;--box-density-2: 0.5rem;--box-density-3: 0.75rem;--box-density-4: 1rem;--box-density-5: 1.25rem;--box-density-6: 1.5rem;--box-density-7: 1.75rem;--box-density-8: 2rem;--box-density-9: 2.25rem;--box-density-10: 2.5rem;--box-density-11: 2.75rem;--box-density-12: 3rem;--box-density-preset-tiny: 0.125rem;--box-density-preset-small: 0.25rem;--box-density-preset-medium: 0.75rem;--box-density-preset-large: 1rem}:root [density=default]{--box-density-0: 0rem;--box-density-1: 0.5rem;--box-density-2: 1rem;--box-density-3: 1.5rem;--box-density-4: 2rem;--box-density-5: 2.5rem;--box-density-6: 3rem;--box-density-7: 3.5rem;--box-density-8: 4rem;--box-density-9: 4.5rem;--box-density-10: 5rem;--box-density-11: 5.5rem;--box-density-12: 6rem;--box-density-preset-tiny: 0.25rem;--box-density-preset-small: 0.5rem;--box-density-preset-medium: 1.5rem;--box-density-preset-large: 2rem}:root [density=large]{--box-density-0: 0rem;--box-density-1: 0.875rem;--box-density-2: 1.75rem;--box-density-3: 2.625rem;--box-density-4: 3.5rem;--box-density-5: 4.375rem;--box-density-6: 5.25rem;--box-density-7: 6.125rem;--box-density-8: 7rem;--box-density-9: 7.875rem;--box-density-10: 8.75rem;--box-density-11: 9.625rem;--box-density-12: 10.5rem;--box-density-preset-tiny: 0.4375rem;--box-density-preset-small: 0.875rem;--box-density-preset-medium: 2.625rem;--box-density-preset-large: 3.5rem}:root,:root [data-theme=light]{--theme-color-text: #282230;--theme-color-foreground: #282230;--theme-color-foreground-alpha: rgba(40, 34, 48, 0.3);--theme-color-foreground-alpha-low: rgba(40, 34, 48, 0.8);--theme-color-foreground-alpha-high: rgba(40, 34, 48, 0.1);--theme-color-background: #ffffff;--theme-color-background-alpha: rgba(40, 34, 48, 0.3);--theme-color-background-alpha-low: rgba(40, 34, 48, 0.8);--theme-color-background-alpha-high: rgba(40, 34, 48, 0.1);--theme-color-paper: #f1f1f1;--theme-color-paper-alpha: rgba(241, 241, 241, 0.3);--theme-color-paper-alpha-low: rgba(241, 241, 241, 0.8);--theme-color-paper-alpha-high: rgba(241, 241, 241, 0.1);--theme-color-border: rgba(40, 34, 48, 0.2);--theme-color-overlay: rgba(208, 191, 151, 0.2)}:root [data-theme=dark]{--theme-color-text: #f1f1f1;--theme-color-foreground: #f1f1f1;--theme-color-foreground-alpha: rgba(241, 241, 241, 0.3);--theme-color-foreground-alpha-low: rgba(241, 241, 241, 0.8);--theme-color-foreground-alpha-high: rgba(241, 241, 241, 0.1);--theme-color-background: #27323a;--theme-color-background-alpha: rgba(241, 241, 241, 0.3);--theme-color-background-alpha-low: rgba(241, 241, 241, 0.8);--theme-color-background-alpha-high: rgba(241, 241, 241, 0.1);--theme-color-paper: #f1f1f1;--theme-color-paper-alpha: rgba(58, 59, 59, 0.3);--theme-color-paper-alpha-low: rgba(58, 59, 59, 0.8);--theme-color-paper-alpha-high: rgba(58, 59, 59, 0.1);--theme-color-border: rgba(241, 241, 241, 0.3);--theme-color-overlay: rgba(255, 255, 255, 0.1)}

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

@@ -1,37 +1,26 @@
-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): any => {
-
-        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 default utils;
+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/static/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/svelte.config.js

@@ -0,0 +1,25 @@
+import adapter from '@sveltejs/adapter-auto';
+import preprocess from 'svelte-preprocess';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+    // Consult https://github.com/sveltejs/svelte-preprocess
+    // for more information about preprocessors
+    preprocess: preprocess(),
+
+    kit: {
+        adapter: adapter(),
+
+        // Override http methods in the Todo forms
+        methodOverride: {
+            allowed: ['PATCH', 'DELETE']
+        },
+        vite: {
+            optimizeDeps: {
+                include: ["highlight.js", "highlight.js/lib/core"],
+            },
+        },
+    }
+};
+
+export default config;

package/tsconfig.json

@@ -1,46 +1,3 @@
-{
-  "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig.json to read more about this file */
-
-    /* Basic Options */
-    // "incremental": true,                         /* Enable incremental compilation */
-    "target": "ESNEXT"
-    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "module": "commonjs"
-    /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-    "allowJs": false,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": false,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "declaration": true
-    /* Generates corresponding '.d.ts' file. */,
-    "declarationDir": "./lib",
-    /* Generates corresponding '.d.ts' file. */
-
-    "outDir": "./lib"
-    /* Redirect output structure to the directory. */,
-    "rootDirs": [
-      "lib/scripts"
-    ],
-    /* Strict Type-Checking Options */
-
-    "typeRoots": [
-      "./node_modules/@types",
-      "./src"
-    ]
-    /* List of folders to include type definitions from. */
-    // "types": ["../src/index.d.ts"],       /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-  }
-  // "files": ["./src/index.ts"]
-}
+{
+	"extends": "./.svelte-kit/tsconfig.json"
+}

package/webpack.config.js

@@ -25,6 +25,7 @@ module.exports = {
             loader: "sass-loader",
             options: {
               sourceMap: isDevelopment,
+              sassOptions: { quietDeps: true },
             },
           },
         ],
@@ -39,6 +40,7 @@ module.exports = {
             loader: "sass-loader",
             options: {
               sourceMap: isDevelopment,
+              sassOptions: { quietDeps: true },
             },
           },
         ],

package/cssfabric.config.js

@@ -1,3 +0,0 @@
-
-
-module.exports = {}