Merge pull request #17 from viivue/flex-grid

Add flex-grid-template and image-object-fit for Atomic CSS

css/extra.css

@@ -0,0 +1,55 @@
+/**
+ * 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;
+}

scss/_config.scss

@@ -35,7 +35,8 @@
 //$breakpoints: (
 //        "lg": 1280px,
 //        "md": 1024px,
-//        "sm": 480px,
+//        "sm": 768px,
+//        "xs": 480px,
 //);
 
 // vertical spacing

scss/_defs.scss

@@ -30,7 +30,8 @@ $variables: ();
 $breakpoints: (
         "lg": 1180px,
         "md": 1024px,
-        "sm": 480px,
+        "sm": 768px,
+        "xs": 480px,
 );
 
 // font sizes

scss/extra.scss

@@ -0,0 +1,58 @@
+@import 'helpers';
+
+/**
+ * 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: map-get($breakpoints, "sm")) {
+  .flex-grid-template {
+    --grid-col: 2;
+  }
+}
+
+@media only screen and (max-width: map-get($breakpoints, "xs")) {
+  .flex-grid-template {
+    --grid-col: 1;
+  }
+}
+
+/**
+ * Background object fit
+ */
+@mixin img-object-fit {
+  object-position: center center;
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  min-width: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  display: block;
+}
+
+.img-wrapper-cover > img {
+  @include img-object-fit;
+  object-fit: cover;
+}
+
+.img-wrapper-contain > img {
+  @include img-object-fit;
+  object-fit: contain;
+}