Basic Structure Created with Components

subhadipbhowmik · Sep 26, 2024 · 2ab786c · 2ab786c
1 parent b53328b
commit 2ab786c
Show file tree

Hide file tree

Showing 13 changed files with 1,111 additions and 4,597 deletions.
diff --git a/clipcss/_breakpoints.scss b/clipcss/_breakpoints.scss
@@ -1,46 +1,82 @@
 $breakpoints: (
-  "xs": 0,
-  "sm": 480px,
-  "md": 720px,
-  "lg": 960px,
-  "xl": 1200px,
-  "xxl": 1400px
+    "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;
-  }
+@mixin xs(){
+    @media (min-width: map-get($breakpoints, "xs")) {
+        @content;
+    }
 }
 
-// Handling specific breakpoints
-.responsive-text {
-  // Default (for xs, or smallest screens)
-  color: red;
+@mixin sm(){
+    @media (min-width: map-get($breakpoints, "sm")) {
+        @content;
+    }
+}
+
+@mixin md(){
+    @media (min-width: map-get($breakpoints, "md")) {
+        @content;
+    }
+}
+
+@mixin lg(){
+    @media (min-width: map-get($breakpoints, "lg")) {
+        @content;
+    }
+}
+
+@mixin xl(){
+    @media (min-width: map-get($breakpoints, "xl")) {
+        @content;
+    }
+}
 
-  @include breakpoint("sm") {
-    color: blue;
-  }
+@mixin xxl(){
+    @media (min-width: map-get($breakpoints, "xxl")) {
+        @content;
+    }
+}
+
+
+@mixin breakpoint($bp: 0){
+    @media (min-width: $bp) {
+        @content;
+    }
+}
 
-  @include breakpoint("md") {
-    color: green;
-  }
+.responsive-text{
+    @include xs(){
+        color: red;
+    }
 
-  @include breakpoint("lg") {
-    color: yellow;
-  }
+    @include sm(){
+        color: blue;
+    }
 
-  @include breakpoint("xl") {
-    color: purple;
-  }
+    @include md(){
+        color: green;
+    }
 
-  @include breakpoint("xxl") {
-    color: orange;
-  }
+    @include lg(){
+        color: yellow;
+    }
 
-  // Custom breakpoint beyond predefined ones
-  @include breakpoint(1600px) {
-    color: pink;
-  }
+    @include xl(){
+        color: purple;
+    }
+
+    @include xxl(){
+        color: orange;
+    }
+
+    @include breakpoint(1600px){
+        color: pink;
+    }
 }
+
diff --git a/clipcss/_grid.scss b/clipcss/_grid.scss
@@ -1,56 +1,122 @@
 @use 'sass:math';
 
 $grid-columns: 12;
+$grid-gaps: (
+  "0": 0,
+  "1": 4px,
+  "2": 8px,
+  "3": 12px,
+  "4": 16px,
+  "5": 20px,
+  "6": 24px,
+  "7": 28px,
+  "8": 32px,
+  "9": 36px,
+  "10": 40px,
+  "11": 44px,
+  "12": 48px,
+  "13": 52px,
+  "14": 56px,
+  "15": 60px,
+  "16": 64px,
+  "17": 68px,
+  "18": 72px,
+  "19": 76px,
+  "20": 80px,
+  "21": 84px,
+  "22": 88px,
+  "23": 92px,
+  "24": 96px,
+  "25": 100px
+);
+
+$layout-values: flex-start, flex-end , center, space-between, space-around, space-evenly;
+
 
 .container {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-    box-sizing: border-box;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
 }
 
 .row {
-    display: flex;
-    flex-flow: row wrap;
+  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);
-        }
-    }
+// grid gaps
+@each $key, $value in $grid-gaps {
+  .gap-#{$key} > * {
+    padding: $value; 
+  }
+
+  .gap-#{$key}{
+    margin-left: -$value;
+    margin-right: -$value;
+  }
 }
 
-@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);
-        }
-    }
+// justify content classes
+@each $value in $layout-values {
+  .justify-#{$value} {
+    justify-content: $value;
+  }
 }
 
-@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);
-        }
+// Column definitions for different breakpoints
+@for $i from 1 through $grid-columns {
+  // Extra small columns (xs)
+  .col-xs-#{$i} {
+    box-sizing: border-box;
+    flex-grow: 0;
+    width: math.div($i * 100%, $grid-columns);
+  }
+
+  // Small columns (sm)
+  @include sm() {
+    .col-sm-#{$i} {
+      box-sizing: border-box;
+      flex-grow: 0;
+      width: math.div($i * 100%, $grid-columns);
     }
-}
+  }
+
+  // Medium columns (md)
+  @include md() {
+    .col-md-#{$i} {
+      box-sizing: border-box;
+      flex-grow: 0;
+      width: math.div($i * 100%, $grid-columns);
+    }
+  }
+
+  // Large columns (lg)
+  @include lg() {
+    .col-lg-#{$i} {
+      box-sizing: border-box;
+      flex-grow: 0;
+      width: math.div($i * 100%, $grid-columns);
+    }
+  }
+
+  // Extra-large columns (xl)
+  @include xl() {
+    .col-xl-#{$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);
-        }
+  // Extra-extra-large columns (xxl)
+  @include xxl() {
+    .col-xxl-#{$i} {
+      box-sizing: border-box;
+      flex-grow: 0;
+      width: math.div($i * 100%, $grid-columns);
     }
+  }
 }
+
diff --git a/clipcss/_variables.scss b/clipcss/_variables.scss
@@ -33,9 +33,7 @@ $colors: (
 */
 
 // Spacing Variables
-$spacer: 1rem;
-$base-space: 0.7rem;
-$base-margin: 1.7rem;
+$base-margin: 4px;
 $base-padding: 4px;
 
 // Border Variables

diff --git a/clipcss/components/_card.scss b/clipcss/components/_card.scss
@@ -23,36 +23,37 @@
 
     // 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;
+        padding: $base-padding; // Adjust padding for small screens
+        font-size: $base-font-size;
     }
 
     @include sm() {
-        padding: $base-padding-sm;
-        font-size: $base-font-size-sm;
+        padding: $base-padding;
+        font-size: $base-font-size;
     }
 
     @include md() {
-        padding: $base-padding-md;
-        font-size: $base-font-size-md;
+        padding: $base-padding;
+        font-size: $base-font-size;
     }
 
     @include lg() {
-        padding: $base-padding-lg;
-        font-size: $base-font-size-lg;
+        padding: $base-padding;
+        font-size: $base-font-size;
     }
 
     @include xl() {
-        padding: $base-padding-xl;
-        font-size: $base-font-size-xl;
+        padding: $base-padding;
+        font-size: $base-font-size;
     }
 
     @include xxl() {
-        padding: $base-padding-xxl;
-        font-size: $base-font-size-xxl;
+        padding: $base-padding;
+        font-size: $base-font-size;
     }
 }
 
 // Debugging the border-radius
 @debug "Checking the radius of the card";
 @debug math.div($base-border-radius, 4);
+
diff --git a/clipcss/components/_navbar.scss b/clipcss/components/_navbar.scss
@@ -0,0 +1,30 @@
+@use 'sass:math';
+
+%flex-layout{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+.navbar{
+    @extend %flex-layout;
+    padding: $base-padding $base-padding * 2;
+    box-shadow: $base-box-shadow;
+
+    .site-title{
+        font-size: $base-font-size * 1.5;
+    }
+
+    .container{
+        @extend %flex-layout;
+    }
+}
+
+@each $key, $val in $colors {
+    .navbar-#{$key} {
+        @extend .navbar;
+        background-color: $val;
+    }
+}
diff --git a/clipcss/index.scss b/clipcss/index.scss
@@ -13,6 +13,7 @@
 /* Components (button, card, navbar) */
 @import "components/card";
 @import "components/button";
+@import "components/navbar";
 
 /* Utilities (margin, padding, opacity, display, etc.) */
 @import "utilities";