@medyll/cssfabric 0.1.12 → 0.2.0

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

@@ -1,80 +0,0 @@
-@use '../../_utils';
-
-$_color-types-config: (color bg bg-themed border-color);
-$_color-tint: (_ lighter light dark darker complement); // invert
-
-$color-metadata: (
-        title: color,
-        title_tag: "its about colors",
-        description: "cssfabric color system: its about colors"
-);
-$color-config: (
-        gray-config: utils.get_fabric_conf(gray-config),
-        color-types-config: $_color-types-config,
-        theme: utils.get_fabric_conf(theme),
-        scheme: utils.get_fabric_conf(scheme),
-        palette: utils.get_fabric_conf(palette),
-        gray: utils.get_fabric_conf(gray)
-);
-
-$color-docs: (
-        attributes: (
-                color: (
-                        tag: color,
-                        keys: (
-                                scheme palette gray
-                        ),
-                        levelsLinked: (
-                                scheme: utils.getObjectKeys(utils.get_fabric_conf(scheme)),
-                                palette: utils.getObjectKeys(utils.get_fabric_conf(palette)),
-                                gray: utils.getObjectKeys(utils.get_fabric_conf(gray))
-                        ),
-                        levelsDeclin: (
-                                palette: $_color-tint
-                        ),
-                        about: "color for text level html elements"
-                ),
-                background-color: (
-                        tag: bg,
-                        keys: (
-                                scheme palette gray
-                        ),
-                        levelsLinked: (
-                                scheme: utils.getObjectKeys(utils.get_fabric_conf(scheme)),
-                                palette: utils.getObjectKeys(utils.get_fabric_conf(palette)),
-                                gray: utils.getObjectKeys(utils.get_fabric_conf(gray)) // prefix with gray
-                        ),
-                        levelsDeclin: (
-                                palette: $_color-tint
-                        ),
-                        about: "background colors"
-                ),
-                background-themed: (
-                        tag: "bg-themed",
-                        keys: (
-                                scheme palette gray
-                        ),
-                        levelsLinked: (
-                                gray: utils.getObjectKeys(utils.get_fabric_conf(gray)),
-                                scheme: utils.getObjectKeys(utils.get_fabric_conf(scheme)),
-                                palette: utils.getObjectKeys(utils.get_fabric_conf(palette))
-                        ),
-                        levelsDeclin: (
-                                palette: $_color-tint
-                        ),
-                        about: "same as background-color, but with added contrasted color to text"
-                ),
-                border-color: (
-                        tag: border-color,
-                        keys: (
-                                palette gray
-                        ), 
-                        levelsLinked: (
-                                gray: utils.getObjectKeys(utils.get_fabric_conf(gray)),
-                                scheme: utils.getObjectKeys(utils.get_fabric_conf(scheme)),
-                                palette: utils.getObjectKeys(utils.get_fabric_conf(palette))
-                        ),
-                        about: "border colors are slightly darker to maximize surrounding effect"
-                )
-        )
-);

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

@@ -1,23 +0,0 @@
-
-@use "sass:map";
-// load scss config file
-@use '../../_utils'; 
-@use 'color-build' as build; 
-@use "../cssfabric-config";
-// load general config variables
-$config: cssfabric-config.$cssfabric-config;
-
-// load general config variables
-// media queries sizes, in rem
-$_media_quey_sizes: map-get($config, media_quey_sizes);
-
-// builder responsive  
-$min_value: 0;
-
-@each $mq_size_key,
-$mq_size_value in $_media_quey_sizes {
-    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
-        @include build.buildColor($mq_size_key);
-    }
-    $min_value: $mq_size_value;
-} 

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

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

package/src/cssfabric/modules/css-fabric.scss

@@ -1,2 +0,0 @@
-@use '../../../src/vendor/normalize/normalize.min.css';
- 

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

@@ -1,150 +0,0 @@
-// load scss config file
-@use '../../_utils';
-@use '../cssfabric-config' as cssfabric-vars;
-@use 'flex-vars';
-
-$flex-config: flex-vars.$flex-config;
-$cssfabric-config: cssfabric-vars.$cssfabric-config;
-
-$sep: map-get($cssfabric-config, sep);
-// read variables
-$grid-code: map-get($flex-config, moduleNameShort);
-$grid-h: map-get($flex-config, horCode);
-$grid-v: map-get($flex-config, vertCode);
-
-$cssProps: map-get($flex-config, cssProps);
-$cssItemsProps: map-get($flex-config, cssItemsProps);
-
-$gridFullWidth: map-get($flex-config, gridFullWidth);
-
-$grow-shrink-steps: map-get($flex-config, grow-shrink-steps);
-
-$grid-code-sep: #{$grid-code}#{$sep};
-
-@mixin makeGrid($mqKey) {
-  $prefix: if($mqKey, #{$grid-code}-#{$mqKey}, #{$grid-code});
-  $h_prop: #{$prefix}#{$sep}#{$grid-h};
-  $v_prop: #{$prefix}#{$sep}#{$grid-v};
-
-  %flex {
-    display: flex;
-  }
-
-  .#{$grid-code},
-  .#{$h_prop} {
-    display: flex;
-    flex-direction: row;
-
-    & > .#{$grid-code-sep}#{$gridFullWidth} {
-      flex: 1 1 0;
-    }
-
-    &.#{$grid-code-sep}align-middle {
-      align-items: center;
-    }
-
-    &.#{$grid-code-sep}align-top {
-      align-items: flex-start;
-    }
-
-    &.#{$grid-code-sep}align-left {
-      align-items: flex-start;
-    }
-
-    &.#{$grid-code-sep}align-right {
-      justify-content: flex-end;
-    }
-
-    &.#{$grid-code-sep}align-bottom {
-      align-items: flex-end;
-    }
-
-    &.#{$grid-code-sep}align-center {
-      justify-content: center;
-    }
-
-    &.#{$grid-code-sep}align-middle-center {
-      justify-content: center;
-      align-content: center;
-      align-items: center;
-    }
-
-    &.#{$grid-code-sep}align-stretch {
-      color: blue;
-      align-items: stretch;
-    }
-  }
-
-  .#{$v_prop} {
-    display: flex;
-    flex-direction: column;
-
-    & > .#{$grid-code-sep}#{$gridFullWidth} {
-      flex: 1 1 0;
-      max-height: 100%;
-    }
-
-    &.#{$grid-code-sep}align-middle {
-      justify-content: center;
-    }
-
-    &.#{$grid-code-sep}align-top {
-      justify-content: flex-start;
-    }
-
-    &.#{$grid-code-sep}align-left {
-      align-items: flex-start;
-    }
-
-    &.#{$grid-code-sep}align-right {
-      align-items: flex-end;
-    }
-
-    &.#{$grid-code-sep}align-bottom {
-      justify-content: flex-end;
-    }
-
-    &.#{$grid-code-sep}align-center {
-      align-items: center;
-    }
-
-    &.#{$grid-code-sep}align-middle-center {
-      align-items: center;
-      justify-content: center;
-    }
-
-    &.#{$grid-code-sep}align-stretch {
-      color: red;
-      align-items: stretch;
-    }
-  }
-
-
-  .#{$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);
-    }
-  }
-
-  // align-self rules for children */
-  .self {
-    @each $fabricRule, $value in map-get($cssItemsProps, self) {
-      @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
-    }
-  }
-  @for $i from 0 through $grow-shrink-steps {
-    .#{$grid-code-sep}grow#{$sep}#{$i} {
-      flex-grow: #{$i};
-    }
-
-    .#{$grid-code-sep}shrink#{$sep}#{$i} {
-      flex-shrink: $i;
-    }
-  }
-
-}

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

@@ -1,84 +0,0 @@
-@use '../../utils';
-
-
-$_grow-shrink-steps: 2;
-
-
-$_grid-align: (top middle bottom left right center middle-center stretch);
-
-$_classNames: (
-        wrap: wrap,
-        wrap-reverse: wrap-reverse
-);
-
-$_cssProps: (
-        flexWrap: (
-                wrap: wrap,
-                wrap-reverse: wrap-reverse
-        ),
-        grid-justify: (
-                start: flex-start,
-                end: flex-end,
-                between: space-between,
-                stretch: stretch,
-                center: flex-center
-        ),
-        grid-items: (
-                baseline: baseline,
-                stretch: stretch,
-                start: flex-start,
-                center: center,
-                end: flex-end
-        ),
-        grid-content: (
-                start: flex-start,
-                center: center,
-                end: flex-end,
-                between: space-between,
-                equal: space-evenly
-        )
-); 
-
-$_cssItemsProps: (
-        self: (
-                start: flex-start,
-                end: flex-end,
-                stretch: stretch
-        )
-);
-
-$flex-metadata: (
-        title: "flex",
-        tag: "flex",
-        description: "cssfabric flex system module"
-);
-
-$flex-config: (
-        moduleName: flex,
-        moduleNameShort: flex,
-        horCode: h,
-        vertCode: v,
-        gridFullWidth: main,
-        grow-shrink-steps:$_grow-shrink-steps,
-        cssProps: $_cssProps,
-        cssItemsProps: $_cssItemsProps
-);
-
-$flex-docs: (// add align-middle non generated className // grow + shrink
-        attributes:(
-                grid:(
-                        tag: flex,
-                        keys: (v, h),
-                        classNames: (
-                                align: $_grid-align,
-                                grid:utils.getObjectKeys(map-get($_cssProps, flexWrap)), // add inline !
-                        ),
-                        about: "a classic flex grid system, and hey, it gets height !"
-                ),
-                self:(
-                        tag: self,
-                        keys: utils.getObjectKeys(map-get($_cssItemsProps, self)),
-                        about: "flex children specific classnames"
-                )
-        )
-);

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

@@ -1,25 +0,0 @@
-
-
-// load scss config file
-@use '../../_utils';
-@use '_flex-build' as build;
-@use "../cssfabric-config";
-// load general config variables
-$config: cssfabric-config.$cssfabric-config;
-
-// load general config variables
-// media queries sizes, in rem
-$_media_quey_sizes: map-get($config, media_quey_sizes);
- 
- 
-// builder responsive  
-$min_value: 0;
-
-@each $mq_size_key,
-$mq_size_value in $_media_quey_sizes {
-  @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
-    @include build.makeGrid($mq_size_key);
-  }
-  $min_value: $mq_size_value;
-} 
- 

package/src/cssfabric/modules/flex/flex.scss

@@ -1,3 +0,0 @@
-@use '_flex-build' as build;
-
-@include build.makeGrid(null);

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

@@ -1,84 +0,0 @@
-// load scss config file
-@use '../../_utils';
-@use '../cssfabric-config';
-@use 'grid-vars';
-
-$grid-config: grid-vars.$grid-config;
-$cssfabric-config: cssfabric-config.$cssfabric-config;
-
-$sep: map-get($cssfabric-config, sep);
-// read variables
-$grid-code: map-get($grid-config, moduleNameShort);
-$grid-h: map-get($grid-config, horCode);
-$grid-v: map-get($grid-config, vertCode);
-
-$cssProps: map-get($grid-config, cssProps);
-$cssItemsProps: map-get($grid-config, cssItemsProps);
-
-$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) {
-  $prefix: if($mqKey, #{$grid-code}-#{$mqKey}, #{$grid-code});
-  $h_prop: #{$prefix}#{$sep}#{$grid-h};
-  $v_prop: #{$prefix}#{$sep}#{$grid-v};
-
-  .#{$grid-code} {
-    display: grid;
-    &-auto-flow-cols {
-      grid-auto-flow: column;
-    }
-    &-auto-cols-auto {
-      grid-auto-columns: auto;
-    }
-    &-auto-cols-min	 {
-      grid-auto-columns: min-content;
-    }
-    &-auto-cols-max {
-      grid-auto-columns: max-content;
-    }
-    &-auto-cols {
-      grid-auto-columns: minmax(0, 1fr);
-    }
-
-    &-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);
-    }
-
-
-  }
-
-  .#{$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));
-    }
-  }
-  /* 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

@@ -1,88 +0,0 @@
-@use '../../utils';
-
-
-$_grow-shrink-steps: 4;
-
-$grid-max-cols: 12;
-$grid-max-rows: 8;
-
-$_grid-align: (top middle bottom left right center middle-center stretch);
-
-$_classNames: (
-        wrap: wrap,
-        wrap-reverse: wrap-reverse
-);
-
-$_cssProps: (
-        flexWrap: (
-                wrap: wrap,
-                wrap-reverse: wrap-reverse
-        ),
-        grid-justify: (
-                start: flex-start,
-                end: flex-end,
-                between: space-between,
-                stretch: stretch,
-                center: flex-center
-        ),
-        grid-items: (
-                baseline: baseline,
-                stretch: stretch,
-                start: flex-start,
-                center: center,
-                end: flex-end
-        ),
-        grid-content: (
-                start: flex-start,
-                center: center,
-                end: flex-end,
-                between: space-between,
-                equal: space-evenly
-        )
-);
-
-$_cssItemsProps: (
-        self: (
-                start: flex-start,
-                end: flex-end,
-                stretch: stretch
-        )
-);
-
-$grid-metadata: (
-        title: "grid",
-        tag: "grid",
-        description: "cssfabric flex grid system module"
-);
-
-$grid-config: (
-        moduleName: grid,
-        moduleNameShort: grid,
-        horCode: h,
-        vertCode: v,
-        gridFullWidth: main,
-        grow-shrink-steps:$_grow-shrink-steps,
-        cssProps: $_cssProps,
-        cssItemsProps: $_cssItemsProps,
-        grid-max-rows: $grid-max-rows,
-        grid-max-cols: $grid-max-cols
-);
-
-$grid-docs: (// add align-middle non generated className // grow + shrink
-        attributes:(
-                grid:(
-                        tag: grid,
-                        keys: (v, h),
-                        classNames: (
-                                align: $_grid-align,
-                                grid:utils.getObjectKeys(map-get($_cssProps, flexWrap)), // add inline !
-                        ),
-                        about: "a classic grid system"
-                ),
-                self:(
-                        tag: self,
-                        keys: utils.getObjectKeys(map-get($_cssItemsProps, self)),
-                        about: "grid children specific classnames"
-                )
-        )
-);

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

@@ -1,25 +0,0 @@
-
-
-// load scss config file
-@use '../../_utils';
-@use '_grid-build' as build;
-@use "../cssfabric-config";
-// load general config variables
-$config: cssfabric-config.$cssfabric-config;
-
-// load general config variables
-// media queries sizes, in rem
-$_media_quey_sizes: map-get($config, media_quey_sizes);
- 
-
-// builder responsive  
-$min_value: 0;
-
-@each $mq_size_key,
-$mq_size_value in $_media_quey_sizes {
-  @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
-    @include build.makeGrid($mq_size_key);
-  }
-  $min_value: $mq_size_value;
-} 
- 

package/src/cssfabric/modules/grid/grid.scss

@@ -1,6 +0,0 @@
-
-// load _build
-@use '_grid-build' as build;
-
-
-@include build.makeGrid(null);