yummacss 1.0.3 → 1.2.0

package/gulpfile.js

@@ -3,26 +3,26 @@ const sass = require('gulp-sass')(require('sass'));
 const clean = require('gulp-clean-css');
 const rename = require('gulp-rename');
 
-function buildStyles() {
+function standardFile() {
     return src('yumma-css/**/*.scss')
         .pipe(sass())
         .pipe(rename('yumma.css'))
         .pipe(dest('dist'));
 }
 
-function minifyStyles() {
+function minifiedFile() {
     return src('dist/yumma.css')
         .pipe(clean())
         .pipe(rename({ suffix: '.min' }))
         .pipe(dest('dist'));
 }
 
-function watchTask() {
-    watch(['yumma-css/**/*.scss', '*.html'], series(buildStyles, minifyStyles));
+function watchFiles() {
+    watch(['yumma-css/**/*.scss', '*.html'], series(standardFile, minifiedFile));
 }
 
-exports.buildStyles = buildStyles;
-exports.minifyStyles = minifyStyles;
-exports.watch = watchTask;
+exports.standardFile = standardFile;
+exports.minifiedFile = minifiedFile;
+exports.watch = watchFiles;
 
-exports.default = series(buildStyles, minifyStyles, watchTask);
+exports.default = series(standardFile, minifiedFile, watchFiles);

package/index.js

@@ -1,7 +1,7 @@
-const packageJson = require('./package.json');
+const pkg = require('./package.json');
 
 const showVer = () => {
-    const version = packageJson.version;
+    const version = pkg.version;
     console.log(`You're running Yumma CSS v${version}!`);
 };
 

package/package.json

@@ -1,28 +1,26 @@
 {
   "name": "yummacss",
-  "version": "1.0.3",
-  "description": "A CSS library for streamlined UI development.",
+  "version": "1.2.0",
+  "description": "Build beautiful websites with small class names.",
   "main": "index.js",
   "style": "dist/yumma.css",
   "author": "Renildo Pereira",
   "keywords": [
-    "customization",
-    "ux design",
-    "css"
+    "css",
+    "css library",
+    "customization"
   ],
   "license": "MIT",
-  "homepage": "https://yummacss.vercel.app/",
+  "homepage": "https://yummacss.com",
   "bugs": {
     "url": "https://github.com/yumma-lib/yumma-css/issues"
   },
   "scripts": {
-    "build": "gulp buildStyles",
-    "minify": "gulp minifyStyles",
-    "watch": "gulp watchTask",
-    "prod": "concurrently \"gulp buildStyles\" \"gulp minifyStyles\""
+    "std": "gulp standardFile",
+    "min": "gulp minifiedFile",
+    "watch": "gulp watchFiles"
   },
   "devDependencies": {
-    "concurrently": "^8.2.2",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-copy": "^4.0.1",

package/yumma-css/_base.scss

@@ -1,43 +1,62 @@
-/* Yumma CSS - https://yummacss.vercel.app/ */
+/* Yumma CSS - https://yummacss.com */
+
+*,
+*::before,
+*::after {
+    border-width: 0;
+    border-style: solid;
+    box-sizing: border-box;
+}
+
 * {
-    color: inherit;
     margin: 0;
-    font-family: system-ui, sans-serif;
+    color: inherit;
+    font-family: $yma-system-fonts;
 }
 
 body {
+    line-height: 1.5;
     font-family: inherit;
 }
 
-a {
-    color: inherit;
-    text-decoration: none;
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
 }
 
-hr {
-    border: 0;
-    border-top: 1px solid #efefef;
-    margin: 1em 0;
+input,
+button,
+textarea,
+select {
+    font: inherit;
 }
 
-html {
-    scroll-behavior: smooth;
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
 }
 
-img,
-picture,
-svg,
-video {
-    max-width: 100%;
-    display: block;
+a {
+    text-decoration: none;
 }
 
+ol,
 ul {
     padding: 0;
     list-style: none;
 }
 
-::before,
-::after {
-    box-sizing: border-box;
-}
+hr {
+    border: 0;
+    margin: 1em 0;
+    border-top: $ym-colors-transparent;
+}

package/yumma-css/_breakpoints.scss

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

package/yumma-css/_colors.scss

@@ -1,4 +1,4 @@
-@each $k, $v in $base-colors {
+@each $k, $v in $yma-colors {
     // backgrounds
     .bg-#{$k} {
         background-color: $v;
@@ -103,6 +103,16 @@
         }
     }
 
+    .td-#{$k} {
+        text-decoration-color: $v;
+    }
+
+    .h\:td-#{$k} {
+        &:hover {
+            text-decoration-color: $v;
+        }
+    }
+
     @if ($v !=black and $v !=white) {
         // light variations
         @for $i from 1 through 6 {
@@ -200,7 +210,7 @@
                 caret-color: mix(white, $v, $i * 10%);
             }
 
-            .h\:cc-#{$k}-#{$i} {
+            .h\:cc-l-#{$k}-#{$i} {
                 &:hover {
                     caret-color: mix(white, $v, $i * 10%);
                 }
@@ -299,7 +309,7 @@
                 }
             }
 
-            .cc-#{$k}-#{$i} {
+            .cc-d-#{$k}-#{$i} {
                 caret-color: mix(black, $v, $i * 10%);
             }
 

package/yumma-css/_fonts.scss

@@ -1,19 +1,19 @@
 .ff-d {
- font-family: system-ui, sans-serif;
- font-weight: $base-font;
+    font-family: $yma-system-fonts;
+    font-weight: $yma-font-weight;
 }
 
 .ff-c {
- font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
- font-weight: $base-font;
+    font-family: $yma-charter-fonts;
+    font-weight: $yma-font-weight;
 }
 
 .ff-i {
- font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
- font-weight: $base-font;
+    font-family: $yma-inter-fonts;
+    font-weight: $yma-font-weight;
 }
 
 .ff-m {
- font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
- font-weight: $base-font;
-}
+    font-family: $yma-monospace-fonts;
+    font-weight: $yma-font-weight;
+}

package/yumma-css/_grid.scss

@@ -9,12 +9,11 @@ $grid-gaps: (
     "3": 30px,
     "4": 40px,
     "5": 50px,
-    "6": 60px,
+    "6": 60px
 );
 
-@each $k,
-$v in $grid-gaps {
-    .gap-#{$k}>* {
+@each $k, $v in $grid-gaps {
+    .gap-#{$k} > * {
         padding: $v;
     }
 
@@ -25,9 +24,9 @@ $v in $grid-gaps {
 }
 
 // column classes
-@include xsm {
+@include xs {
     @for $i from 1 through $grid-columns {
-        .col-#{$i}-xsm {
+        .xs\:col-#{$i} {
             box-sizing: border-box;
             flex-grow: 0;
             width: math.div($i * 100%, $grid-columns);
@@ -37,7 +36,7 @@ $v in $grid-gaps {
 
 @include sm {
     @for $i from 1 through $grid-columns {
-        .col-#{$i}-sm {
+        .sm\:col-#{$i} {
             box-sizing: border-box;
             flex-grow: 0;
             width: math.div($i * 100%, $grid-columns);
@@ -47,7 +46,7 @@ $v in $grid-gaps {
 
 @include md {
     @for $i from 1 through $grid-columns {
-        .col-#{$i}-md {
+        .md\:col-#{$i} {
             box-sizing: border-box;
             flex-grow: 0;
             width: math.div($i * 100%, $grid-columns);
@@ -57,7 +56,7 @@ $v in $grid-gaps {
 
 @include lg {
     @for $i from 1 through $grid-columns {
-        .col-#{$i}-lg {
+        .lg\:col-#{$i} {
             box-sizing: border-box;
             flex-grow: 0;
             width: math.div($i * 100%, $grid-columns);
@@ -65,12 +64,12 @@ $v in $grid-gaps {
     }
 }
 
-@include xlg {
+@include xl {
     @for $i from 1 through $grid-columns {
-        .col-#{$i}-xlg {
+        .xl\:col-#{$i} {
             box-sizing: border-box;
             flex-grow: 0;
             width: math.div($i * 100%, $grid-columns);
         }
     }
-}
+}

package/yumma-css/_layout.scss

@@ -6,13 +6,13 @@
     box-sizing: border-box;
 }
 
-.row {
-    display: flex;
-    flex-flow: row wrap;
-}
-
 .ins {
     display: flex;
     align-items: center;
     justify-content: center;
-}
+}
+
+.row {
+    display: flex;
+    flex-flow: row wrap;
+}