✨ 1.1.6

css/extra.css

@@ -2,54 +2,54 @@
  * Flex grid
  */
 .flex-grid-template {
-  --grid-gap-x:30px;
-  --grid-gap-y:30px;
-  --grid-col:3;
+  --grid-gap-x: 30px;
+  --grid-gap-y: 30px;
+  --grid-col: 3;
   /* calculate new width */
-  --grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));
-  --grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));
-  display:flex;
-  flex-wrap:wrap;
-  gap:var(--grid-gap-y) var(--grid-gap-x);
+  --grid-gap-x-total: calc(var(--grid-gap-x) * (var(--grid-col) - 1));
+  --grid-space-each: calc(var(--grid-gap-x-total) / var(--grid-col));
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--grid-gap-y) var(--grid-gap-x);
 }
 
 .flex-grid-template > * {
-  width:calc(100% / var(--grid-col) - var(--grid-space-each));
+  width: calc(100% / var(--grid-col) - var(--grid-space-each));
 }
 
-@media only screen and (max-width:768px) {
+@media only screen and (max-width: 768px) {
   .flex-grid-template {
-    --grid-col:2;
+    --grid-col: 2;
   }
 }
-@media only screen and (max-width:480px) {
+@media only screen and (max-width: 480px) {
   .flex-grid-template {
-    --grid-col:1;
+    --grid-col: 1;
   }
 }
 /**
  * Background object fit
  */
 .img-wrapper-cover > img {
-  object-position:center center;
-  height:100%;
-  width:100%;
-  min-height:100%;
-  min-width:100%;
-  max-height:100%;
-  max-width:100%;
-  display:block;
-  object-fit:cover;
+  object-position: center center;
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  min-width: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  display: block;
+  object-fit: cover;
 }
 
 .img-wrapper-contain > img {
-  object-position:center center;
-  height:100%;
-  width:100%;
-  min-height:100%;
-  min-width:100%;
-  max-height:100%;
-  max-width:100%;
-  display:block;
-  object-fit:contain;
+  object-position: center center;
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  min-width: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  display: block;
+  object-fit: contain;
 }

dist/atomic.css

@@ -1,5 +1,5 @@
 /*!
-* Atomic CSS 1.1.5
+* Atomic CSS 1.1.6
 * https://github.com/viivue/atomic-css
 */
 /**
@@ -970,3 +970,59 @@
 .ar-12 {
   aspect-ratio: 1/2;
 }
+
+/**
+ * Flex grid
+ */
+.flex-grid-template {
+  --grid-gap-x: 30px;
+  --grid-gap-y: 30px;
+  --grid-col: 3;
+  /* calculate new width */
+  --grid-gap-x-total: calc(var(--grid-gap-x) * (var(--grid-col) - 1));
+  --grid-space-each: calc(var(--grid-gap-x-total) / var(--grid-col));
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--grid-gap-y) var(--grid-gap-x);
+}
+
+.flex-grid-template > * {
+  width: calc(100% / var(--grid-col) - var(--grid-space-each));
+}
+
+@media only screen and (max-width: 768px) {
+  .flex-grid-template {
+    --grid-col: 2;
+  }
+}
+@media only screen and (max-width: 480px) {
+  .flex-grid-template {
+    --grid-col: 1;
+  }
+}
+/**
+ * Background object fit
+ */
+.img-wrapper-cover > img {
+  object-position: center center;
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  min-width: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.img-wrapper-contain > img {
+  object-position: center center;
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  min-width: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  display: block;
+  object-fit: contain;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viivue/atomic-css",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "⚛️ Customizable Atomic CSS Framework.",
   "main": "./dist/atomic.min.css",
   "scripts": {

scss/_build.scss

@@ -28,4 +28,5 @@
 @import "skeleton";
 @import "width-height";
 @import "cursors";
-@import "aspect-ratio";
+@import "aspect-ratio";
+@import "extra";

scss/_defs.scss

@@ -1,7 +1,7 @@
 /// Definitions
 /// DO NOT EDIT!
 
-$version: "1.1.5";
+$version: "1.1.6";
 $info: ();
 
 // axes