@medyll/cssfabric 0.0.12 → 0.0.16

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@medyll/cssfabric",
-  "version": "0.0.12",
+  "version": "0.0.16",
   "private": false,
-  "main": "./lib",
+  "bin": {
+    "@medyll/cssfabric": "./bin/index.js"
+  },
   "repository": "https://github.com/medyll/cssfabric",
   "scripts": {
     "dev": "tsc -w || exit 1",
@@ -12,7 +14,8 @@
     "watch-json": "gulp watchJson",
     "watch-include": "gulp watchInclude",
     "watch-readme": "gulp watchReadme",
-    "task-download": "gulp taskDownload"
+    "task-download": "gulp taskDownload",
+    "css-build": "sass   src/cssfabric/modules/vars.scss css/mystyles.css"
   },
   "dependencies": {
     "chokidar": "^3.5.1",
@@ -38,7 +41,6 @@
     "gulp-download": "0.0.1",
     "gulp-download-stream": "^0.0.6",
     "gulp-ignore": "^3.0.0",
-    "gulp-jsbeautifier": "^3.0.1",
     "gulp-json-modify": "^1.0.2",
     "gulp-json-transform": "^0.4.7",
     "gulp-merge-json": "^2.1.1",

package/src/_generated/export.variables.json

@@ -196,7 +196,7 @@
                     "bg-themed",
                     "border-color"],
                     "theme": {
-                        "primary": "#0288d1", "foreground": "#282230", "background": "#f1f1f1"
+                        "primary": "#0288d1", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#f1f1f1"
                     }
 
                     ,
@@ -306,7 +306,7 @@
                     "horCode": "h",
                     "vertCode": "v",
                     "gridFullWidth": "main",
-                    "grow-shrink-steps": 4,
+                    "grow-shrink-steps": 2,
                     "cssProps": {
                         "flexWrap": {
                             "wrap": "wrap", "wrap-reverse": "wrap-reverse"
@@ -354,12 +354,12 @@
                             }
 
                             ,
-                            "about": "a classic grid system, and hey, it gets height !"
+                            "about": "a classic flex grid system, and hey, it gets height !"
                         }
 
                         ,
                         "self": {
-                            "tag": "self", "keys": ["start", "end", "stretch"], "about": "grid children specific classnames"
+                            "tag": "self", "keys": ["start", "end", "stretch"], "about": "flex children specific classnames"
                         }
                     }
                 }
@@ -402,6 +402,10 @@
                             "start": "flex-start", "end": "flex-end", "stretch": "stretch"
                         }
                     }
+
+                    ,
+                    "grid-max-rows": 8,
+                    "grid-max-cols": 12
                 }
 
                 ,
@@ -422,7 +426,7 @@
                             }
 
                             ,
-                            "about": "a classic grid system, and hey, it gets height !"
+                            "about": "a classic grid system"
                         }
 
                         ,
@@ -685,6 +689,23 @@
                 }
             }
 
+            ,
+            "zindex": {
+                "_data": {
+                    "z_groups": ["a", "z"]
+                }
+
+                ,
+                "_metadata": {
+                    "title": "zindex", "tag": "zI", "description": "cssfabric zindex module to set z-index on all html elements"
+                }
+
+                ,
+                "_docs": {
+                    "z_groups": "_"
+                }
+            }
+
             ,
             "theme": {
                 "_data": {
@@ -692,7 +713,7 @@
                     "moduleName": "theme",
                     "moduleNameShort": "theme",
                     "color-default-config": {
-                        "primary": "#0288d1", "foreground": "#282230", "background": "#f1f1f1"
+                        "primary": "#0288d1", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#f1f1f1"
                     }
 
                     ,
@@ -709,7 +730,7 @@
                     "bg",
                     "border"],
                     "color": {
-                        "primary": "#0288d1", "primary-light": "#23b0fd", "primary-lighter": "#6ecbfe", "primary-dark": "#02679e", "primary-darker": "#01466c", "primary-complement": "#d14b02", "primary-invert": "#fd772e", "secondary": "#d14b02", "secondary-light": "#fd7023", "secondary-lighter": "#fea16e", "secondary-dark": "#9e3902", "secondary-darker": "#6c2701", "secondary-complement": "#0288d1", "secondary-invert": "#2eb4fd", "tertiary": "#0288d1", "tertiary-light": "#23b0fd", "tertiary-lighter": "#6ecbfe", "tertiary-dark": "#02679e", "tertiary-darker": "#01466c", "tertiary-complement": "#d14b02", "tertiary-invert": "#fd772e"
+                        "primary": "#0288d1", "primary-light": "#23b0fd", "primary-lighter": "#6ecbfe", "primary-dark": "#02679e", "primary-darker": "#01466c", "primary-complement": "#d14b02", "primary-invert": "#fd772e", "secondary": "#D14B02", "secondary-light": "#fd7023", "secondary-lighter": "#fea16e", "secondary-dark": "#9e3902", "secondary-darker": "#6c2701", "secondary-complement": "#0288d1", "secondary-invert": "#2eb4fd", "tertiary": "#88D102", "tertiary-light": "#b0fd23", "tertiary-lighter": "#cbfe6e", "tertiary-dark": "#679e02", "tertiary-darker": "#466c01", "tertiary-complement": "#4b02d1", "tertiary-invert": "#772efd"
                     }
                 }
 
@@ -734,23 +755,6 @@
                     }
                 }
             }
-
-            ,
-            "zindex": {
-                "_data": {
-                    "z_groups": ["a", "b", "c", "d", "e", "f", "g"]
-                }
-
-                ,
-                "_metadata": {
-                    "title": "zindex", "tag": "zI", "description": "cssfabric zindex module to set z-index on all html elements"
-                }
-
-                ,
-                "_docs": {
-                    "z_groups": "_"
-                }
-            }
         }
     }
 }

package/src/cssfabric/_utils.scss

@@ -26,7 +26,7 @@
   $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 + rem) {
+  @media only screen and (#{$type-width}-width: $width + px) {
     @content;
   }
 }
@@ -95,19 +95,6 @@
   @return $switch-named;
 }
 
-@function themeDeclinationColors($theme-color: primary, $theme-color-primary) {
-  $switch-theme-color: map-get(
-                  (
-                          primary: $theme-color-primary,
-                          secondary: complement($theme-color-primary),
-                          tertiary: complement(complement($theme-color-primary))
-                  ),
-                  $theme-color
-  );
-
-  @return $switch-theme-color;
-}
-
 @function getColorPropertyType($fabric-tag) {
   /** get property for #{$fabric-tag} */
   @return map-get(
@@ -124,8 +111,9 @@
 
 @function getThemeLevels($declinations-config, $color_primary) {
   $out: ();
-  @each $color-grade in $declinations-config {
-    $color: themeDeclinationColors($color-grade, $color_primary);
+  // 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};

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

@@ -21,12 +21,11 @@ $cssfabric-config: (
                 full: 100%
         ),
         media_quey_sizes: (
-                xxxl: 180,
-                xxl: 120,
-                xl: 90,
-                lg: 64,
-                md: 48,
-                sm: 35.7
+                xxl: 1300,
+                xl: 1200,
+                lg: 960,
+                md: 760,
+                sm: 0
         ),
         themes:(
                 light:(
@@ -42,6 +41,8 @@ $cssfabric-config: (
         ),
         theme: (
                 primary: #0288d1,
+                secondary: #D14B02,
+                tertiary: #88D102,
                 foreground: #282230,
                 background: #f1f1f1,
         ),
@@ -73,17 +74,17 @@ $cssfabric-config: (
 );
 
 @function getGraySteps($steps, $gray-start, $gray-end) {
-        $gray-schemes: ();
+  $gray-schemes: ();
 
-        @for $i from 0 through $steps {
+  @for $i from 0 through $steps {
 
-                $color: mix($gray-end, $gray-start, math.div($i , $steps) * 100%);
+    $color: mix($gray-end, $gray-start, math.div($i , $steps) * 100%);
 
-                $gray-schemes: map.set($gray-schemes, #{($i+1) * 100}, $color);
-        }
-@debug $gray-schemes;
+    $gray-schemes: map.set($gray-schemes, #{($i+1) * 100}, $color);
+  }
+  @debug $gray-schemes;
 
-        @return $gray-schemes;
+  @return $gray-schemes;
 }
 
 $cssfabric-docs: ();

package/src/cssfabric/modules/animation/animation.scss

@@ -1,3 +1,3 @@
-@use 'animation-build' as build;
+// @use 'animation-build' as build;
 
-@include build.buildAnimation();
+// @include build.buildAnimation();

package/src/cssfabric/modules/base/_base-vars.scss

@@ -1,5 +1,6 @@
+ 
 @use '../../_utils';
-
+ 
 $base-metadata: (
     title: "base",
     tag: "base",
@@ -14,4 +15,5 @@ $base-config: (
     sizes: utils.get_fabric_conf(sizes)
 );
 
-$base-docs: ();
+$base-docs: ( 
+);

package/src/cssfabric/modules/box/_box-build.scss

@@ -57,7 +57,7 @@ $css-shorthands: (
 
   //
   @if ($css_prop== "padding" or $css_prop== "margin") {
-    $computed_value: var(--box-sp-#{$grid_size_value});
+    $computed_value: var(--box-unit-#{$grid_size_value});
   }
 
   // complex write method: 1px value
@@ -72,7 +72,7 @@ $css-shorthands: (
   $iterator: $box-sizes-config;
   @for $grid_size_value from 1 through $iterator {
     $css_size_value: ($grid_size_value * $box-unit-size-config) + $box-unit-config;
-    --box-sp-#{$grid_size_value} : #{$css_size_value};
+    --box-unit-#{$grid_size_value} : #{$css_size_value};
   }
 }
 

package/src/cssfabric/modules/box/box-responsive.scss

@@ -7,7 +7,7 @@ $config: cssfabric-config.$cssfabric-config;
 
 $_media_quey_sizes: map-get($config, media_quey_sizes);
 
-// builder responsive
+// responsive builder here
 $min_value: 0;
 
 @each $mq_size_key, $mq_size_value in $_media_quey_sizes {

package/src/cssfabric/modules/color/_color-build.scss

@@ -103,6 +103,6 @@ $gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-g
   @each $color-type-key in $color-types-config {
     @include fabricColors("palette", $color-palette, $color-type-key, $mq_size_key, true);
     @include fabricColors("scheme", $color-schemes, $color-type-key, $mq_size_key);
-    @include fabricColors("gray", $gray-schemes, $color-type-key, $mq_size_key);
+    @include fabricColors("grey", $gray-schemes, $color-type-key, $mq_size_key);
   }
 }

package/src/cssfabric/modules/color/color.scss

@@ -1,3 +1,9 @@
-@use '_color-build' as build;
 
-@include build.buildColor(null);
+
+ @use '../../_utils';
+ @use '_color-build' as build; 
+ 
+
+@include build.buildColor(null); 
+
+ 

package/src/cssfabric/modules/flex/_flex-build.scss

@@ -21,7 +21,7 @@ $grow-shrink-steps: map-get($flex-config, grow-shrink-steps);
 
 $grid-code-sep: #{$grid-code}#{$sep};
 
-@mixin makeGrid($mqKey) { 
+@mixin makeGrid($mqKey) {
   $prefix: if($mqKey, #{$grid-code}-#{$mqKey}, #{$grid-code});
   $h_prop: #{$prefix}#{$sep}#{$grid-h};
   $v_prop: #{$prefix}#{$sep}#{$grid-v};
@@ -30,6 +30,7 @@ $grid-code-sep: #{$grid-code}#{$sep};
     display: flex;
   }
 
+  .#{$grid-code},
   .#{$h_prop} {
     display: flex;
     flex-direction: row;
@@ -38,39 +39,37 @@ $grid-code-sep: #{$grid-code}#{$sep};
       flex: 1 1 0;
     }
 
-    &.align-middle, &.#{$grid-code-sep}align-middle {
+    &.#{$grid-code-sep}align-middle {
       align-items: center;
     }
 
-    &.align-top, &.#{$grid-code-sep}align-top {
+    &.#{$grid-code-sep}align-top {
       align-items: flex-start;
     }
 
-    &.align-left, &.#{$grid-code-sep}align-left {
-      // justify-content: flex-start;
+    &.#{$grid-code-sep}align-left {
       align-items: flex-start;
     }
 
-    &.align-right, &.#{$grid-code-sep}align-right {
+    &.#{$grid-code-sep}align-right {
       justify-content: flex-end;
-      // align-items: end;
     }
 
-    &.align-bottom, &.#{$grid-code-sep}align-bottom {
+    &.#{$grid-code-sep}align-bottom {
       align-items: flex-end;
     }
 
-    &.align-center, &.#{$grid-code-sep}align-center {
+    &.#{$grid-code-sep}align-center {
       justify-content: center;
     }
 
-    &.align-middle-center, &.#{$grid-code-sep}align-middle-center {
+    &.#{$grid-code-sep}align-middle-center {
       justify-content: center;
       align-content: center;
       align-items: center;
     }
 
-    &.align-stretch , &.#{$grid-code-sep}align-stretch {
+    &.#{$grid-code-sep}align-stretch {
       color: blue;
       align-items: stretch;
     }
@@ -85,85 +84,67 @@ $grid-code-sep: #{$grid-code}#{$sep};
       max-height: 100%;
     }
 
-    &.align-middle, &.#{$grid-code-sep}align-middle {
+    &.#{$grid-code-sep}align-middle {
       justify-content: center;
     }
 
-    &.align-top, &.#{$grid-code-sep}align-top {
+    &.#{$grid-code-sep}align-top {
       justify-content: flex-start;
     }
 
-    &.align-left, &.#{$grid-code-sep}align-left {
+    &.#{$grid-code-sep}align-left {
       align-items: flex-start;
     }
 
-    &.align-right, &.#{$grid-code-sep}align-right {
+    &.#{$grid-code-sep}align-right {
       align-items: flex-end;
     }
 
-    &.align-bottom, &.#{$grid-code-sep}align-bottom {
+    &.#{$grid-code-sep}align-bottom {
       justify-content: flex-end;
     }
 
-    &.align-center, &.#{$grid-code-sep}align-center {
+    &.#{$grid-code-sep}align-center {
       align-items: center;
     }
 
-    &.align-middle-center, &.#{$grid-code-sep}align-middle-center {
+    &.#{$grid-code-sep}align-middle-center {
       align-items: center;
       justify-content: center;
     }
 
-    &.align-stretch, &.#{$grid-code-sep}align-stretch {
+    &.#{$grid-code-sep}align-stretch {
       color: red;
       align-items: stretch;
     }
   }
 
-  .#{$h_prop},
-  .#{$v_prop} {
-    box-sizing: border-box;
-
-    & > * {
-      box-sizing: border-box;
-    }
 
-    & > *:not(.#{$grid-code-sep}#{$gridFullWidth}) {
-      flex: 0 0 auto;
-    }
+  .#{$grid-code-sep}inline {
+    display: inline-flex;
+  }
 
-    &.#{$grid-code-sep}inline {
-      display: inline-flex;
+  // wrap rules
+  .#{$grid-code} {
+    @each $fabricRule, $value in map-get($cssProps, flexWrap) {
+      @include utils.fabricAttributes('&'+$sep, $fabricRule, 'flex-wrap', $value);
     }
+  }
 
-    @for $i from 1 through $grow-shrink-steps {
-      & .#{$grid-code-sep}grow#{$sep}#{$i} {
-        flex-grow: $i;
-      }
-
-      & .#{$grid-code-sep}shrink#{$sep}#{$i} {
-        flex-shrink: $i;
-      }
+  // align-self rules for children */
+  .self {
+    @each $fabricRule, $value in map-get($cssItemsProps, self) {
+      @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
     }
   }
-
-  /** raw css properties distribution */
-  .#{$h_prop},
-  .#{$v_prop} {
-    // wrap rules
-    &.#{$grid-code} {
-      @each $fabricRule, $value in map-get($cssProps, flexWrap) {
-        @include utils.fabricAttributes('&'+$sep, $fabricRule, 'flex-wrap', $value);
-      }
+  @for $i from 0 through $grow-shrink-steps {
+    .#{$grid-code-sep}grow#{$sep}#{$i} {
+      flex-grow: #{$i};
     }
 
-    // align-self rules for children */
-    & .self {
-      @each $fabricRule, $value in map-get($cssItemsProps, self) {
-        @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
-      }
+    .#{$grid-code-sep}shrink#{$sep}#{$i} {
+      flex-shrink: $i;
     }
   }
 
-
 }

package/src/cssfabric/modules/flex/_flex-vars.scss

@@ -1,7 +1,7 @@
 @use '../../utils';
 
 
-$_grow-shrink-steps: 4;
+$_grow-shrink-steps: 2;
 
 
 $_grid-align: (top middle bottom left right center middle-center stretch);
@@ -72,16 +72,13 @@ $flex-docs: (// add align-middle non generated className // grow + shrink
                         classNames: (
                                 align: $_grid-align,
                                 grid:utils.getObjectKeys(map-get($_cssProps, flexWrap)), // add inline !
-                          //items: utils.getObjectKeys(map-get($_cssProps, grid-items)),
-                          //content:utils.getObjectKeys(map-get($_cssProps, grid-content)),
-                          //justify:utils.getObjectKeys(map-get($_cssProps, grid-justify))
                         ),
-                        about: "a classic grid system, and hey, it gets height !"
+                        about: "a classic flex grid system, and hey, it gets height !"
                 ),
                 self:(
                         tag: self,
                         keys: utils.getObjectKeys(map-get($_cssItemsProps, self)),
-                        about: "grid children specific classnames"
+                        about: "flex children specific classnames"
                 )
         )
 );

package/src/cssfabric/modules/grid/_grid-build.scss

@@ -19,6 +19,9 @@ $gridFullWidth: map-get($grid-config, gridFullWidth);
 
 $grow-shrink-steps: map-get($grid-config, grow-shrink-steps);
 
+$grid-max-cols: map-get($grid-config, grid-max-cols);
+$grid-max-rows: map-get($grid-config, grid-max-rows);
+
 $grid-code-sep: #{$grid-code}#{$sep};
 
 @mixin makeGrid($mqKey) {
@@ -26,66 +29,56 @@ $grid-code-sep: #{$grid-code}#{$sep};
   $h_prop: #{$prefix}#{$sep}#{$grid-h};
   $v_prop: #{$prefix}#{$sep}#{$grid-v};
 
-  %flex {
-    display: grid; 
-  }
-
-  .#{$h_prop} {
+  .#{$grid-code} {
     display: grid;
-    flex-direction: row;
-
-    & > .#{$grid-code-sep}#{$gridFullWidth} {
-      flex: 1 1 0;
+    &-auto-flow-cols {
+      grid-auto-flow: column;
     }
-
-
-  }
-
-  .#{$v_prop} {
-    display: grid;
-    flex-direction: column;
-
-    & > .#{$grid-code-sep}#{$gridFullWidth} {
-      flex: 1 1 0;
-      max-height: 100%;
+    &-auto-cols-auto {
+      grid-auto-columns: auto;
     }
-
-    &.align-middle, &.#{$grid-code-sep}align-middle {
-      justify-content: center;
+    &-auto-cols-min	 {
+      grid-auto-columns: min-content;
     }
-
-  }
-
-  .#{$h_prop},
-  .#{$v_prop} {
-
-    & > *:not(.#{$grid-code-sep}#{$gridFullWidth}) {
-      flex: 0 0 auto;
+    &-auto-cols-max {
+      grid-auto-columns: max-content;
+    }
+    &-auto-cols {
+      grid-auto-columns: minmax(0, 1fr);
     }
 
-    &.#{$grid-code-sep}inline {
-      display: inline-grid;
+    &-auto-flow-rows {
+      grid-auto-flow: row;
+    }
+    &-auto-rows-auto {
+      grid-auto-rows: auto;
+    }
+    &-auto-rows-min	 {
+      grid-auto-rows: min-content;
+    }
+    &-auto-rows-max {
+      grid-auto-rows: max-content;
+    }
+    &-auto-rows {
+      grid-auto-rows: minmax(0, 1fr);
     }
 
+
   }
 
-  /** raw css properties distribution */
-  .#{$h_prop},
-  .#{$v_prop} {
-    // wrap rules
-    &.#{$grid-code} {
-      @each $fabricRule, $value in map-get($cssProps, flexWrap) {
-        @include utils.fabricAttributes('&'+$sep, $fabricRule, 'flex-wrap', $value);
-      }
+  .#{$grid-code-sep}inline {
+    display: inline-grid;
+  }
+  /* template-columns */
+  @for $col-row from 1 through $grid-max-cols {
+    .#{$grid-code}-cols-#{$col-row} {
+      grid-template-columns: repeat(#{$col-row}, minmax(0, 1fr));
     }
-
-    // align-self rules for children */
-    & .self {
-      @each $fabricRule, $value in map-get($cssItemsProps, self) {
-        @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
-      }
+  }
+  /* template-rows */
+  @for $col-row from 1 through $grid-max-rows {
+    .#{$grid-code}-rows-#{$col-row} {
+      grid-template-rows: repeat(#{$col-row}, minmax(0, 1fr));
     }
   }
-
-
 }

package/src/cssfabric/modules/grid/_grid-vars.scss

@@ -3,6 +3,8 @@
 
 $_grow-shrink-steps: 4;
 
+$grid-max-cols: 12;
+$grid-max-rows: 8;
 
 $_grid-align: (top middle bottom left right center middle-center stretch);
 
@@ -61,7 +63,9 @@ $grid-config: (
         gridFullWidth: main,
         grow-shrink-steps:$_grow-shrink-steps,
         cssProps: $_cssProps,
-        cssItemsProps: $_cssItemsProps
+        cssItemsProps: $_cssItemsProps,
+        grid-max-rows: $grid-max-rows,
+        grid-max-cols: $grid-max-cols
 );
 
 $grid-docs: (// add align-middle non generated className // grow + shrink
@@ -72,11 +76,8 @@ $grid-docs: (// add align-middle non generated className // grow + shrink
                         classNames: (
                                 align: $_grid-align,
                                 grid:utils.getObjectKeys(map-get($_cssProps, flexWrap)), // add inline !
-                          //items: utils.getObjectKeys(map-get($_cssProps, grid-items)),
-                          //content:utils.getObjectKeys(map-get($_cssProps, grid-content)),
-                          //justify:utils.getObjectKeys(map-get($_cssProps, grid-justify))
                         ),
-                        about: "a classic grid system, and hey, it gets height !"
+                        about: "a classic grid system"
                 ),
                 self:(
                         tag: self,