npm - yummacss - Versions diffs - 0.1.1 - Mend

yummacss 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/CHANGELOG.md +46 -0
package/LICENSE +21 -0
package/README.md +54 -0
package/dist/yumma.css +23026 -0
package/gulpfile.js +28 -0
package/index.js +8 -0
package/package.json +34 -0
package/public/css/yumma.min.css +1 -0
package/yumma-css/_base.scss +30 -0
package/yumma-css/_breakpoints.scss +43 -0
package/yumma-css/_colors.scss +282 -0
package/yumma-css/_functions.scss +5 -0
package/yumma-css/_grid.scss +111 -0
package/yumma-css/_utilities.scss +693 -0
package/yumma-css/_variables.scss +51 -0
package/yumma-css/components/_badge.scss +34 -0
package/yumma-css/components/_button.scss +65 -0
package/yumma-css/components/_card.scss +23 -0
package/yumma-css/components/_navbar.scss +29 -0
package/yumma-css/index.scss +20 -0

package/yumma-css/_breakpoints.scss ADDED Viewed

@@ -0,0 +1,43 @@
+$breakpoints: (
+    "xsm": 0,
+    "sm": 480px,
+    "md": 720px,
+    "lg": 960px,
+    "xlg": 1200px,
+);
+@mixin xsm {
+    @media (min-width: map-get($breakpoints, "xsm")) {
+        @content;
+    }
+}
+@mixin sm {
+    @media (min-width: map-get($breakpoints, "sm")) {
+        @content;
+    }
+}
+@mixin md {
+    @media (min-width: map-get($breakpoints, "md")) {
+        @content;
+    }
+}
+@mixin lg {
+    @media (min-width: map-get($breakpoints, "lg")) {
+        @content;
+    }
+}
+@mixin xlg {
+    @media (min-width: map-get($breakpoints, "xlg")) {
+        @content;
+    }
+}
+@mixin breakpoint($bp: 0) {
+    @media(min-width: $bp) {
+        @content;
+    }
+}

package/yumma-css/_colors.scss ADDED Viewed

@@ -0,0 +1,282 @@
+@each $k,
+$v in $base-colors {
+    .bg-#{$k} {
+        background-color: $v;
+    }
+    .bg-h-#{$k} {
+        &:hover {
+            background-color: $v;
+        }
+    }
+    .bc-#{$k} {
+        border-color: $v;
+        border-style: solid;
+        border-width: 1px;
+    }
+    .bc-h-#{$k} {
+        &:hover {
+            border-color: $v;
+            border-style: solid;
+            border-width: 1px;
+        }
+    }
+    .bc-b-#{$k} {
+        border-bottom-color: $v;
+        border-style: solid;
+        border-width: 1px;
+    }
+    .bc-b-h-#{$k} {
+        &:hover {
+            border-bottom-color: $v;
+            border-style: solid;
+            border-width: 1px;
+        }
+    }
+    .bc-l-#{$k} {
+        border-left-color: $v;
+        border-style: solid;
+        border-width: 1px;
+    }
+    .bc-l-h-#{$k} {
+        &:hover {
+            border-left-color: $v;
+            border-style: solid;
+            border-width: 1px;
+        }
+    }
+    .bc-r-#{$k} {
+        border-right-color: $v;
+        border-style: solid;
+        border-width: 1px;
+    }
+    .bc-r-h-#{$k} {
+        &:hover {
+            border-right-color: $v;
+            border-style: solid;
+            border-width: 1px;
+        }
+    }
+    .bc-t-#{$k} {
+        border-top-color: $v;
+        border-style: solid;
+        border-width: 1px;
+    }
+    .bc-t-h-#{$k} {
+        &:hover {
+            border-top-color: $v;
+            border-style: solid;
+            border-width: 1px;
+        }
+    }
+    .t-#{$k} {
+        color: $v;
+    }
+    .t-h-#{$k} {
+        &:hover {
+            color: $v;
+        }
+    }
+    @if($v !=black and $v !=white) {
+        // light variations
+        @for $i from 1 through 6 {
+            .bg-l-#{$k}-#{$i} {
+                background-color: mix(white, $v, $i * 10%);
+            }
+            .bg-h-l-#{$k}-#{$i} {
+                &:hover {
+                    background-color: mix(white, $v, $i * 10%);
+                }
+            }
+            .bc-l-#{$k}-#{$i} {
+                border-color: mix(white, $v, $i * 10%);
+                border-style: solid;
+                border-width: 1px;
+            }
+            .bc-h-l-#{$k}-#{$i} {
+                &:hover {
+                    border-color: mix(white, $v, $i * 10%);
+                    border-style: solid;
+                    border-width: 1px;
+                }
+            }
+            .bc-b-l-#{$k}-#{$i} {
+                border-bottom-color: mix(white, $v, $i * 10%);
+                border-style: solid;
+                border-width: 1px;
+            }
+            .bc-b-h-l-#{$k}-#{$i} {
+                &:hover {
+                    border-bottom-color: mix(white, $v, $i * 10%);
+                    border-style: solid;
+                    border-width: 1px;
+                }
+            }
+            .bc-l-l-#{$k}-#{$i} {
+                border-left-color: mix(white, $v, $i * 10%);
+                border-style: solid;
+                border-width: 1px;
+            }
+            .bc-l-h-l-#{$k}-#{$i} {
+                &:hover {
+                    border-left-color: mix(white, $v, $i * 10%);
+                    border-style: solid;
+                    border-width: 1px;
+                }
+            }
+            .bc-r-l-#{$k}-#{$i} {
+                border-right-color: mix(white, $v, $i * 10%);
+                border-style: solid;
+                border-width: 1px;
+            }
+            .bc-r-h-l-#{$k}-#{$i} {
+                &:hover {
+                    border-right-color: mix(white, $v, $i * 10%);
+                    border-style: solid;
+                    border-width: 1px;
+                }
+            }
+            .bc-t-l-#{$k}-#{$i} {
+                border-top-color: mix(white, $v, $i * 10%);
+                border-style: solid;
+                border-width: 1px;
+            }
+            .bc-t-h-l-#{$k}-#{$i} {
+                &:hover {
+                    border-top-color: mix(white, $v, $i * 10%);
+                    border-style: solid;
+                    border-width: 1px;
+                }
+            }
+            .t-l-#{$k}-#{$i} {
+                color: mix(white, $v, $i * 10%);
+            }
+            .t-h-l-#{$k}-#{$i} {
+                &:hover {
+                    color: mix(white, $v, $i * 10%);
+                }
+            }
+        }
+        // dark variations
+        @for $i from 1 through 6 {
+            .bg-d-#{$k}-#{$i} {
+                background-color: mix(black, $v, $i * 10%);
+            }
+            .bg-h-d-#{$k}-#{$i} {
+                &:hover {
+                    background-color: mix(black, $v, $i * 10%);
+                }
+            }
+            .bc-d-#{$k}-#{$i} {
+                border-color: mix(black, $v, $i * 10%);
+                border-style: solid;
+                border-width: 1px;
+            }
+            .bc-h-d-#{$k}-#{$i} {
+                &:hover {
+                    border-color: mix(black, $v, $i * 10%);
+                    border-style: solid;
+                    border-width: 1px;
+                }
+            }
+            .bc-b-d-#{$k}-#{$i} {
+                border-bottom-color: mix(black, $v, $i * 10%);
+                border-style: solid;
+                border-width: 1px;
+            }
+            .bc-b-h-d-#{$k}-#{$i} {
+                &:hover {
+                    border-bottom-color: mix(black, $v, $i * 10%);
+                    border-style: solid;
+                    border-width: 1px;
+                }
+            }
+            .bc-l-d-#{$k}-#{$i} {
+                border-left-color: mix(black, $v, $i * 10%);
+                border-style: solid;
+                border-width: 1px;
+            }
+            .bc-l-h-d-#{$k}-#{$i} {
+                &:hover {
+                    border-left-color: mix(black, $v, $i * 10%);
+                    border-style: solid;
+                    border-width: 1px;
+                }
+            }
+            .bc-r-d-#{$k}-#{$i} {
+                border-right-color: mix(black, $v, $i * 10%);
+                border-style: solid;
+                border-width: 1px;
+            }
+            .bc-r-h-d-#{$k}-#{$i} {
+                &:hover {
+                    border-right-color: mix(black, $v, $i * 10%);
+                    border-style: solid;
+                    border-width: 1px;
+                }
+            }
+            .bc-t-d-#{$k}-#{$i} {
+                border-top-color: mix(black, $v, $i * 10%);
+                border-style: solid;
+                border-width: 1px;
+            }
+            .bc-t-h-d-#{$k}-#{$i} {
+                &:hover {
+                    border-top-color: mix(black, $v, $i * 10%);
+                    border-style: solid;
+                    border-width: 1px;
+                }
+            }
+            .t-d-#{$k}-#{$i} {
+                color: mix(black, $v, $i * 10%);
+            }
+            .t-h-d-#{$k}-#{$i} {
+                &:hover {
+                    color: mix(black, $v, $i * 10%);
+                }
+            }
+        }
+    }
+}

package/yumma-css/_functions.scss ADDED Viewed

@@ -0,0 +1,5 @@
+@function light-comp($color){
+    $complement: complement($color);
+    $light-complement: lighten($complement, 30%);
+    @return $light-complement;
+}

package/yumma-css/_grid.scss ADDED Viewed

@@ -0,0 +1,111 @@
+@use "sass:math";
+$grid-columns: 12;
+$grid-gaps: (
+    "0": 0,
+    "1": 10px,
+    "2": 20px,
+    "3": 30px,
+    "4": 40px,
+    "5": 50px,
+    "6": 60px,
+);
+$layout-val: (
+    "c": center,
+    "f-e": flex-end,
+    "f-s": flex-start,
+    "s-a": space-around,
+);
+// base layout classes
+.cnn {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+.ins {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+.row {
+    display: flex;
+    flex-flow: row wrap;
+}
+@each $k,
+$v in $grid-gaps {
+    .gap-#{$k}>* {
+        padding: $v;
+    }
+    .gap-#{$k} {
+        margin-left: -$v;
+        margin-right: -$v;
+    }
+}
+// justify content classes
+@each $k,
+$v in $layout-val {
+    .jc-#{$k} {
+        justify-content: $v;
+    }
+}
+// col classes
+@include xsm {
+    @for $i from 1 through $grid-columns {
+        .col-#{$i}-xsm {
+            box-sizing: border-box;
+            flex-grow: 0;
+            width: math.div($i * 100%, $grid-columns);
+        }
+    }
+}
+@include sm {
+    @for $i from 1 through $grid-columns {
+        .col-#{$i}-sm {
+            box-sizing: border-box;
+            flex-grow: 0;
+            width: math.div($i * 100%, $grid-columns);
+        }
+    }
+}
+@include md {
+    @for $i from 1 through $grid-columns {
+        .col-#{$i}-md {
+            box-sizing: border-box;
+            flex-grow: 0;
+            width: math.div($i * 100%, $grid-columns);
+        }
+    }
+}
+@include lg {
+    @for $i from 1 through $grid-columns {
+        .col-#{$i}-lg {
+            box-sizing: border-box;
+            flex-grow: 0;
+            width: math.div($i * 100%, $grid-columns);
+        }
+    }
+}
+@include xlg {
+    @for $i from 1 through $grid-columns {
+        .col-#{$i}-xlg {
+            box-sizing: border-box;
+            flex-grow: 0;
+            width: math.div($i * 100%, $grid-columns);
+        }
+    }
+}