@medyll/cssfabric 0.2.0 → 0.2.3

package/src/components/docs/Docs.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import cssfabric from '../../lib/scripts/cssfabric';
+  import utils from '../../lib/scripts/utils';
+  import {htmlUtils} from '../../utils';
+  import 'svelte-highlight/styles/github.css';
+
+  export let module      = '';
+  const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
+
+  //$: console.log({module, moduleAttributes});
+
+  let toParseKeys =
+        ['keys',
+         'levels',
+         'levelsDeclin',
+         'levelsLinked',
+         'classNames'];
+
+  function tre(part: any) {
+    
+    // if object, if array !!!
+    // console.log(part)
+    let out: any,
+        levelValues: any;
+    
+    if (part && !Array.isArray(part) && typeof (part === 'object')) {
+
+
+      out = Object.keys(part).map((levelKey) => {
+        let levelValue = part[levelKey];
+
+        if (Array.isArray(levelValue)) {
+          levelValues = levelValue.map(x => `<div class="marg-r-4 w-2-min">${x}</div>`).join('');
+        }
+        
+        return `<div class="flex flex-h">
+                               <div class="color-gray-600 w-small marg-r-1 border-b pad">${levelKey} </div>
+                                              <div class="flex flex-h flex-wrap marg-l-2 pad ">${levelValues}</div>
+                                                             </div>`;
+      }).join('');
+    } else {
+      
+      switch (utils.isArrayOfTypes(part)) {
+        case 'strings':
+        case 'numbers':
+          out = `<div class="flex flex-h flex-wrap gap-tiny">` + part.map((x: string) => `<div class="pad">${x}</div>`).join('') + `</div>`;
+          break;
+        case 'arrays':
+          out = part.map((x: string[]) => x.join('')).map((x: any) => htmlUtils.enclose(x)).join('');
+          break;
+        
+      }
+    }
+
+    return out;
+  }
+</script>
+
+<svelte:head>
+    <title>{module} cssfabric documentation</title>
+</svelte:head>
+
+<div>
+
+    <!--{@debug moduleAttributes}-->
+    {#each Object.entries(moduleAttributes) as [moduleAttribute, moduleAttributeModel]}
+
+        <div class={"pad-b-8"}>
+            <div class={"flex-h flex-inline border-b  theme-border-primary align-middle cell-spacing marg-b-1"}>
+                <label>{moduleAttributeModel.tag}</label>
+                <div class={"text-400"}>{moduleAttribute}</div>
+            </div>
+            <div class={"color-gray-500 marg-b-2 pad-l-8 "}>
+                <div class={"dsp-inline pad-all-2"}>
+                    {moduleAttributeModel.about}
+                </div>
+            </div>
+            <div class={"cell-spacing flex-main"}>
+                {#each toParseKeys as keyToParse}
+                    {#if moduleAttributeModel?.[keyToParse]}
+                        <div class={"flex marg-b-4"}>
+                            <div class={"w-8 pad-l-4 border-l-4 text-900"}>
+                                {keyToParse}:
+                            </div>
+                            <!--<div>
+                                <HighlightAuto  code={'tre(moduleAttributeModel?.[keyToParse])'} />
+                            </div>-->
+                            <div class={"marg-l-4"}>
+                                {@html tre(moduleAttributeModel?.[keyToParse])}
+                            </div>
+                        </div>
+                    {/if}
+                {/each}
+            </div>
+        </div>
+    {/each}
+</div>

package/src/components/docs/DocsClassNames.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+
+  import cssfabric from '../../lib/scripts/cssfabric';
+
+  export let module;
+  const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
+
+</script>
+
+<div>
+    <div class={"flex-v flex-items-end pad-r-4"}>
+        <div class={"txt-800 border-b dsp-inline"}>
+            cssfabric classnames
+        </div>
+        <div class={"txt-gray-300 marg-b-1"}>
+            generated classnames
+        </div>
+    </div>
+    <div class={"pad"}>
+        {#each Object.keys(moduleAttributes) as moduleAttribute  }
+            <div>
+                <h4 class={"pad-tb"}>{moduleAttribute}</h4>
+                <div class={"text-gray-400 pad-tb"}>
+                    {`- cssfabric expressions list for  css ${moduleAttribute} rules`}
+                </div>
+                <div class={"marg-b-8"}>
+                    {#each cssfabric.getModuleClassNames.getModuleTagClassNames({module, moduleAttribute}) as className}
+                        <div class={""}>.{className}</div>
+                    {/each}
+                </div>
+            </div>
+        {/each}
+    </div>
+</div>

package/src/components/docs/DocsDemo.svelte

@@ -0,0 +1,84 @@
+<script lang='ts'>
+
+
+  import cssfabric from '../../lib/scripts/cssfabric';
+  import ProxyDsp from '../demo/proxy/ProxyDsp.svelte';
+
+  export let module      = '';
+  const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
+
+  let out;
+
+  function proxyDsp(val: any, moduleAttribute: any, moduleRule: string = 'default') {
+    if (Array.isArray(val)) {
+      return DspArray(val, moduleAttribute, moduleRule);
+    } else {
+      return dspObject(val, moduleAttribute, moduleRule);
+    }
+  }
+
+  function DspArray(val: any[], moduleAttribute: any, moduleRule: any) {
+    return `<div class={"marg-b-2"}>
+            <p class={"marg-b-2 pad-tb"}>cssfabric.${moduleRule} : ${moduleAttribute} classnames for cssfabric</p>
+            <div class={"flex-h flex-wrap cell-spacing"}>
+                ` + val.map((className, y) => {
+        /*return <DemoElement moduleAttribute={moduleAttribute} moduleRule={moduleRule}
+         cssFabricClassName={className}>
+         [{moduleAttribute}] .{class}
+         </DemoElement>*/
+    }) + `
+            </div>
+        </div>`;
+  }
+
+  function dspObject(val: Record<string, any>, moduleAttribute: any, moduleRule: any) {
+    return `<div>` +
+           Object.keys(val).map((moduleRule) => {
+             return `<div>
+                    <h5 class={"pad-2 pad-r-8 dsp-block-inline border-b"}>${moduleRule}</h5>
+                    <div class={"marg-l-4"}>` +
+                    proxyDsp(val[moduleRule], moduleAttribute, moduleRule)
+                    + `</div>
+                </div>`;
+           })
+           + `</div>`;
+  }
+
+</script>
+<div>
+    <!--<div class={"flex-v flex-items-end pad-r-8"}>
+      <div class={"txt-800 border-b dsp-inline"}>
+      cssfabric classnames
+      </div>
+      <div class={"txt-gray-300 marg-b-4"}>
+      generated examples
+      </div>
+      </div> -->
+
+    <div class="pad-8">
+
+        {#each Object.entries(moduleAttributes) as [moduleAttribute, moduleAttributeValues] }
+
+            <div class={"w-sm-full"}>
+                <h4 class={"border-l-2 pad-l-2"}>module {moduleAttribute}</h4>
+                <div class={"marg-l-4 text-gray-400 pad-tb"}>
+                    {`- cssfabric demo for  css ${moduleAttribute} rules`}
+                </div>
+                <div class={"marg-b-4 marg-l-4"}>
+                    {#each [cssfabric.getModuleTagDebug({module, moduleAttribute})] as moduleDebug }
+                        {#each Object.entries(moduleDebug) as [tag, debugTag]}
+                            <div>
+                                <h5>- {tag}</h5>
+                                <div class={' marg-l-4'}>
+                                    <ProxyDsp val={debugTag} {moduleAttribute}/>
+                                </div>
+                            </div>
+                        {/each}
+                    {/each}
+                </div>
+            </div>
+        {/each}
+
+        })
+    </div>
+</div>

package/src/components/header/Header.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import logo from './svelte-logo.svg';
+</script>
+
+<header>
+	<div class="corner">
+		<a href="https://kit.svelte.dev">
+			<img src={logo} alt="SvelteKit" />
+		</a>
+	</div>
+
+	<nav>
+	</nav>
+
+</header>
+
+<style>
+	header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.corner {
+		width: 3em;
+		height: 3em;
+	}
+
+	.corner a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.corner img {
+		width: 2em;
+		height: 2em;
+		object-fit: contain;
+	}
+
+	nav {
+		display: flex;
+		justify-content: center;
+		--background: rgba(255, 255, 255, 0.7);
+	}
+
+	svg {
+		width: 2em;
+		height: 3em;
+		display: block;
+	}
+
+	path {
+		fill: var(--background);
+	}
+
+	ul {
+		position: relative;
+		padding: 0;
+		margin: 0;
+		height: 3em;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		list-style: none;
+		background: var(--background);
+		background-size: contain;
+	}
+
+	li {
+		position: relative;
+		height: 100%;
+	}
+
+	li.active::before {
+		--size: 6px;
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 0;
+		left: calc(50% - var(--size));
+		border: var(--size) solid transparent;
+		border-top: var(--size) solid var(--accent-color);
+	}
+
+	nav a {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		padding: 0 1em;
+		color: var(--heading-color);
+		font-weight: 700;
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		transition: color 0.2s linear;
+	}
+
+	a:hover {
+		color: var(--accent-color);
+	}
+</style>

package/src/components/header/svelte-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

package/src/cssfabric/_utils.scss

@@ -0,0 +1,203 @@
+@use "sass:string";
+@use "sass:map";
+@use "sass:math";
+@use "sass:color";
+
+// load main fabric vars
+@use 'modules/cssfabric-config' as cssfabric-config;
+
+// link to fabric conf scss file, which often move ;)
+@function get_fabric_conf($prop: null,$val: null) {
+  @if not $prop {
+    @return cssfabric-config.$cssfabric-config;
+  }
+  @if $prop and not $val {
+    @return map-get(cssfabric-config.$cssfabric-config, $prop);
+  }
+  @if $val {
+    $in: map-get(cssfabric-config.$cssfabric-config, $prop);
+    @return map-get($in, $prop, $val);
+  }
+}
+
+// css dimensions rules builder responsive
+@mixin fabricResponsiveEncloser($mq_size_value, $mq_min_size_value: null) {
+  // and (min-width: $mq_min_size_value + rem)
+  // @debug $mq_size_value $mq_min_size_value;
+  $type-width: if($mq_size_value==180, max, max);
+  $width: if($mq_size_value==180, $mq_min_size_value, $mq_size_value);
+
+  // @debug  (#{$type-width}-width: $width + rem) ;
+  @media only screen and (#{$type-width}-width: $width + px) {
+    @content;
+  }
+}
+
+@mixin fabricAttributes($sep, $frag, $property, $value) {
+  #{$sep + $frag} {
+    #{$property}: #{$value};
+  }
+}
+
+@mixin scssVarsToCssVars($module, $module-config) {
+  /** 
+  * cssfabric generated file
+  * css vars for #{$module} 
+  */
+  @each $red, $rt in $module-config {
+    // list map string
+    @if (type_of($rt) == "string") {
+      $key: #{$module}-#{$red};
+      --cssfabric-#{$key}: #{$rt};
+    }
+    @if (type_of($rt) == "map") {
+      @each $rtkey, $rtval in $rt {
+        $type: type_of($rtval);
+        $key: #{$module}-#{$red}-#{$rtkey};
+        $compval: is-map; // #{string.slice(#{#ss($rtval)}, 4)};
+
+        $comp: if($type== map or $type == list, #{$compval}, #{$rtval});
+
+        --cssfabric-#{$key}: #{$comp};
+      }
+    }
+    @if (type_of($rt) == "list") {
+      $key: #{$module}-#{$red};
+      --cssfabric-#{$key}: #{string.slice(#{#ss($rt)}, 4)};
+    }
+  }
+}
+
+@mixin alphaTize($key,$color,$ranges: (_:0.3,low:0.8,high:0.1)) {
+  @each $range, $val in $ranges {
+    $rg: if($range==_,'',-#{$range});
+    #{$key}-alpha#{$rg} : #{color.change($color,$alpha:$val)};
+  }
+}
+
+@function getGraySteps($steps, $gray-start, $gray-end) {
+  $gray-schemes: ();
+
+  @for $i from 0 through $steps {
+
+    $color: mix($gray-end, $gray-start, math.div($i , $steps) * 100%);
+
+    $gray-schemes: map.set($gray-schemes, #{($i+1) * 100}, $color);
+  }
+
+  @return $gray-schemes;
+}
+
+@function applyColorEffect($theme-level, $color) {
+  $switch-named: map-get(
+                  (
+                          light: lighten($color, 15%),
+                          lighter: lighten($color, 30%),
+                          dark: darken($color, 10%),
+                          darker: darken($color, 20%),
+                          complement: complement($color),
+                          invert: invert($color)
+                  ),
+                  $theme-level
+  );
+
+  @return $switch-named;
+}
+
+@function getColorPropertyType($fabric-tag) {
+  /** get property for #{$fabric-tag} */
+  @return map-get(
+                  (
+                          color: color,
+                          text: color,
+                          foreground: color,
+                          bg: background-color,
+                          bg-themed: background-color,
+                          border: border-color
+                  ),
+                  $fabric-tag
+  );
+}
+
+@function getThemeLevels($declinations-config, $color_primary) {
+  $out: ();
+  // primary secondary tertiary
+  @each $color-grade, $color-value in $declinations-config {
+    $color: $color-value;
+    $out: map.set($out, $color-grade, $color);
+    @each $theme-level in (light lighter dark darker complement invert) {
+      $new-theme-level: #{$color-grade}-#{$theme-level};
+      $newColor: applyColorEffect($theme-level, $color);
+      $out: map.set($out, $new-theme-level, $newColor);
+    }
+  }
+
+  @return $out;
+}
+
+@function getBoxIterator($iterator, $unit-config,$_unit-size-config) {
+  $out: ("_": "_");
+
+  @for $grid_size_value from 1 through $iterator {
+    $css_size_value: ($grid_size_value * $_unit-size-config) + $unit-config;
+    $out: map.set($out, $grid_size_value, $css_size_value);
+  }
+  @return $out
+}
+
+@function getShadowIterator($factors,$box-shadows-steps) {
+  $out: ();
+
+  $v_fact: map-get($factors, v_fact);
+  $h_fact: map-get($factors, h_fact);
+
+  $v_fact_2: map-get($factors, v_fact_2);
+  $h_fact_2: map-get($factors, h_fact_2);
+
+  $acc: 1;
+
+  @for $shadows_step from 1 through $box-shadows-steps {
+    $acc: $acc * 2;
+    $v: $shadows_step * 2;
+
+    $v_val: math.div($acc, $v_fact);
+    $h_val: math.div($acc, $h_fact);
+
+    $v_val_2: math.div($acc, $v_fact_2);
+    $h_val_2: math.div($acc, $h_fact_2);
+
+    $out: map.set($out, $acc, #{$v_val} + #{$h_val});
+  }
+
+  @return $out;
+}
+
+@function cssDimensionPropertyBuilder($scale_prop,$dimensions_grid_ratio) {
+  $out: ();
+
+  @for $z_value from 1 through $dimensions_grid_ratio {
+    $key: $z_value + "-" + $dimensions_grid_ratio;
+    $val: (math.div($z_value , $dimensions_grid_ratio) * 100) +#{"%"};
+
+    $out: map.set($out, $key, $val);
+  }
+
+  @return $out
+}
+
+@function getObjectKeys($object) {
+  $out: ();
+  @each $key, $value in $object {
+    $out: append($out, $key);
+  }
+
+  @return $out;
+}
+
+@function getObjectValues($object) {
+  @return $object;
+}
+
+@function getObjectKeyValues($object) {
+  @return $object;
+}

package/src/cssfabric/modules/_cssfabric-config.scss

@@ -0,0 +1,173 @@
+@use "sass:map";
+@use "sass:math";
+
+
+// prefix ?
+// scoped ?
+
+// dimensions
+
+// grays
+$has-color-gray: true;
+$has-color-gray-responsive: true;
+// text - done conditionals
+$has-text-transform: true;
+$has-text-transform-responsive: false;
+$has-text-align: true;
+$has-text-align-responsive: false;
+$has-text-font: true;
+$has-text-font-responsive: false;
+$has-text-shadow-color-scheme: true;
+$has-text-shadow-color-scheme-responsive: false;
+$has-text-shadow-color-palette: true;
+$has-text-shadow-color-palette-responsive: false;
+
+// colors
+$has-color-palette: true;
+$has-color-palette-responsive: false;
+$has-color-scheme: true;
+$has-color-scheme-responsive: false;
+$has-color-gray: true;
+$has-color-gray-responsive: false;
+
+$has-color-foreground: true;
+$has-color-bg: true;
+$has-color-bg-themed: true;
+$has-color-border: true;
+
+
+$theme-color-primary: rgb(32, 23, 0) !default;
+$theme-color-secondary: #D14B02 !default;
+$theme-color-tertiary: #88D102 !default;
+//light theme
+$theme-color-foreground: #282230 !default;
+$theme-color-background: #ffffff !default;
+$theme-color-paper: #f1f1f1 !default;
+
+$theme-color-shadow: green !default;
+// dark theme
+$theme-dark-color-foreground: #f1f1f1 !default;
+$theme-dark-color-background: #27323a !default;
+$theme-dark-color-paper: #3a3b3b !default;
+
+$theme-dark-color-shadow: black !default;
+
+// grays
+$gray-start: #f4f4f4 !default;
+$gray-end: #999 !default;
+$gray-steps: 5 !default;
+
+$densities-ratios: (small:0.5, default:1, large:1.75);
+
+$box-position-shorthand: pos !default;
+$box-display-shorthand: dsp !default;
+$box-shadow-shorthand: shad !default;
+$box-border-shorthand: border !default;
+$box-padding-shorthand: pad !default;
+$box-margin-shorthand: marg !default;
+$box-gap-shorthand: gap !default;
+
+$box-unit-presets: (tiny:0.5, small:1, medium:3, large:4) !default;
+$box-radius: (tiny:4px, small:8px, medium:16px) !default;
+
+$scale-tag-width-shorthand: w !default;
+$scale-tag-height-shorthand: h !default;
+
+$cssfabric-metadata: (
+        title: "cssfabric",
+        tag: "cssfabric",
+        description: "cssfabric global config variables"
+);
+
+// vars
+$vars-box-density: --box-density !default;
+$vars-box-density-preset: --box-density-preset !default;
+
+$vars-theme-color-shadow: --theme-color-shadow !default;
+$vars-theme-dark-color-shadow: --theme-dark-color-shadow !default;
+
+$cssfabric-config: (
+        cfg-has-dimension-strict: true,
+        CFG_HAS_DIMENSION_MIN: true,
+        CFG_HAS_DIMENSION_MAX: true,
+        size_step: 0.5rem,
+        size-step-unit: rem,
+        sep: "-",
+        sizes: (
+                tiny: 32,
+                small: 64,
+                medium: 128,
+                large: 256,
+                full: 100%
+        ),
+        media_quey_sizes: (
+                xxl: 1300,
+                xl: 1200,
+                lg: 960,
+                md: 760
+        ),
+        densities-ratios: $densities-ratios,
+        themes:(
+                light:(
+                        foreground: $theme-color-foreground,
+                        background: $theme-color-background,
+                        paper: $theme-color-paper,
+                ),
+                dark:(
+                        foreground: $theme-dark-color-foreground,
+                        background: $theme-dark-color-background,
+                        paper: $theme-dark-color-paper
+                ),
+        ),
+        theme: (
+                primary: $theme-color-primary,
+                secondary: $theme-color-secondary,
+                tertiary: $theme-color-tertiary,
+                foreground: $theme-color-foreground,
+                background: $theme-color-background,
+                paper: $theme-color-paper,
+        ),
+        scheme: (
+                discrete: #ccc,
+                success: green,
+                info: #FFDD57FF,
+                warning: hsl(48, 96%, 46%),
+                alert: hsl(27, 100%, 50%),
+                error: red
+        ),
+        palette: (
+                'yellow': #ffb900,
+                'orange': #d83b01,
+                'red': #d13438,
+                'magenta': #b4009e,
+                'purple': #5c2d91,
+                'green': #107c10,
+                'teal': #008272,
+                'blue': #0078d4,
+                'dark': #323232,
+        ),
+        border-radius:(
+                tiny:4px, small:8px, medium:16px
+        ),
+        gray: getGraySteps($gray-steps, $gray-start, $gray-end),
+        gray-config: (
+                start: $gray-start,
+                end: $gray-end,
+                steps: $gray-steps
+        )
+);
+
+@function getGraySteps($steps, $gray-start, $gray-end) {
+  $gray-schemes: ();
+
+  @for $i from 0 through $steps {
+
+    $color: mix($gray-end, $gray-start, math.div($i , $steps) * 100%);
+
+    $gray-schemes: map.set($gray-schemes, #{($i+1) * 100}, $color);
+  }
+
+  @return $gray-schemes;
+}
+
+$cssfabric-docs: ();