💄 Add responsive utility classes

Author: Frontendland

src/pages/css/utilities.astro

@@ -4,6 +4,14 @@ import Layout from '@static/Layout.astro'
 
 import Card from '@components/Card/Card.astro'
 
+const breakpoints: any = {
+    'none': 3,
+    'xs': 4,
+    'sm': 4,
+    'md': 6,
+    'lg': 8
+}
+
 const spacings = [
     'xxs',
     'xs',
@@ -126,4 +134,22 @@ const wraps = [
             </Card>
         ))}
     </div>
+
+    <h3>Grid</h3>
+    {Object.keys(breakpoints).map(key => (
+        <Fragment>
+            {Array.from({ length: breakpoints[key] - 1 }, (_, i) => i + 2).map(i => (
+                <div class:list={[
+                    'grid my',
+                    key === 'none' ? `col-${i}` : `${key}-${i}`
+                ]}>
+                    {Array(i).fill(0).map(_ => (
+                        <Card>
+                            <Box>{key}-{i}</Box>
+                        </Card>
+                    ))}
+                </div>
+            ))}
+        </Fragment>
+    ))}
 </Layout>

src/scss/global/utility.scss

@@ -48,7 +48,13 @@ $alignments: (
               $class: string.slice($key, 2, -1) + $firstLetter;
             }
 
-            &.#{$class} { gap: $value; }        
+            &.#{$class} { gap: $value; }      
+
+            @each $key, $v in $breakpoints {
+                @include media($key) {
+                    &.#{$key}-#{$class} { gap: $value; }   
+                }
+            }
         }
     }
 
@@ -69,7 +75,27 @@ $alignments: (
         align-items: center;
     }
 
-    // Flex wraps
+    @each $key, $value in $breakpoints {
+        @include media($key) {
+            @each $alignmentKey, $alignmentValue in $alignments {
+                .#{$key}-#{$alignmentKey} {
+                    @if (string.index($alignmentKey, 'items')) {
+                        align-items: $alignmentValue;
+                    } @else {
+                        justify-content: $alignmentValue;
+                    } 
+                }
+            }
+
+            .flex.#{$key}-center,
+            .grid.#{$key}-center {
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
+
+    // Flex directions & wraps
     .flex {
         @include layout(flex, default);
 
@@ -86,6 +112,24 @@ $alignments: (
         }
     }
 
+    @each $key, $value in $breakpoints {
+        @include media($key) {
+            .flex {
+                @each $direction in $flexDirectionValues {
+                    &.#{$key}-#{$direction} {
+                        flex-direction: $direction;
+                    }
+                }
+
+                @each $wrap in $flexWrapValues {
+                    &.#{$key}-#{$wrap} {
+                        flex-wrap: $wrap;
+                    }
+                }
+            }
+        }
+    }
+
     // Grid columns
     .grid {
         @include layout(grid, default);