Grid System Implemented

clipcss/_breakpoints.scss

@@ -0,0 +1,46 @@
+$breakpoints: (
+  "xs": 0,
+  "sm": 480px,
+  "md": 720px,
+  "lg": 960px,
+  "xl": 1200px,
+  "xxl": 1400px
+);
+
+// A more general mixin for breakpoints
+@mixin breakpoint($size) {
+  @media (min-width: map-get($breakpoints, $size)) {
+    @content;
+  }
+}
+
+// Handling specific breakpoints
+.responsive-text {
+  // Default (for xs, or smallest screens)
+  color: red;
+
+  @include breakpoint("sm") {
+    color: blue;
+  }
+
+  @include breakpoint("md") {
+    color: green;
+  }
+
+  @include breakpoint("lg") {
+    color: yellow;
+  }
+
+  @include breakpoint("xl") {
+    color: purple;
+  }
+
+  @include breakpoint("xxl") {
+    color: orange;
+  }
+
+  // Custom breakpoint beyond predefined ones
+  @include breakpoint(1600px) {
+    color: pink;
+  }
+}

clipcss/_grid.scss

@@ -0,0 +1,56 @@
+@use 'sass:math';
+
+$grid-columns: 12;
+
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+.row {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+@include xs() {
+    @for $i from 1 through $grid-columns {
+        .col-xs-#{$i} {
+            box-sizing: border-box;
+            flex-grow: 0;
+            width: math.div($i * 100%, $grid-columns);
+        }
+    }
+}
+
+@include sm() {
+    @for $i from 1 through $grid-columns {
+        .col-sm-#{$i} {
+            box-sizing: border-box;
+            flex-grow: 0;
+            width: math.div($i * 100%, $grid-columns);
+        }
+    }
+}
+
+@include md() {
+    @for $i from 1 through $grid-columns {
+        .col-md-#{$i} {
+            box-sizing: border-box;
+            flex-grow: 0;
+            width: math.div($i * 100%, $grid-columns);
+        }
+    }
+}
+
+@include lg() {
+    @for $i from 1 through $grid-columns {
+        .col-lg-#{$i} {
+            box-sizing: border-box;
+            flex-grow: 0;
+            width: math.div($i * 100%, $grid-columns);
+        }
+    }
+}

clipcss/components/_card.scss

@@ -1,26 +1,58 @@
 @use 'sass:math';
 
-.card{
+.card {
     display: block;
     padding: $base-padding;
     border: $base-border-thickness solid #ddd;
     box-shadow: $base-box-shadow;
     margin: $base-margin;
     border-radius: math.div($base-border-radius, 4);
 
-    .card-title{
+    .card-title {
         color: $primary;
         padding-bottom: $base-padding;
         font-weight: bold;
     }
 
-    .card-body{
+    .card-body {
         font-size: $base-font-size;
-        a{
+        a {
             text-decoration: underline;
         }
     }
+
+    // Ensure proper layout and padding across different breakpoints
+    @include xs() {
+        padding: $base-padding-xs; // Adjust padding for small screens
+        font-size: $base-font-size-xs;
+    }
+
+    @include sm() {
+        padding: $base-padding-sm;
+        font-size: $base-font-size-sm;
+    }
+
+    @include md() {
+        padding: $base-padding-md;
+        font-size: $base-font-size-md;
+    }
+
+    @include lg() {
+        padding: $base-padding-lg;
+        font-size: $base-font-size-lg;
+    }
+
+    @include xl() {
+        padding: $base-padding-xl;
+        font-size: $base-font-size-xl;
+    }
+
+    @include xxl() {
+        padding: $base-padding-xxl;
+        font-size: $base-font-size-xxl;
+    }
 }
 
+// Debugging the border-radius
 @debug "Checking the radius of the card";
-@debug math.div($base-border-radius, 4);
+@debug math.div($base-border-radius, 4);

clipcss/index.scss

@@ -4,6 +4,8 @@
 
 /* Base & Layout */
 @import "base";
+@import "breakpoints";
+@import "grid";
 
 /* Colours */
 @import "colors";