first commit

Author: fmanimashaun

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Ijebucss/abstracts/_breakpoints.scss

@@ -0,0 +1,7 @@
+$breakpoints: (
+  xs: 0px,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+);

Ijebucss/abstracts/_colors.scss

@@ -0,0 +1,30 @@
+// theme colors
+$primary: #326dee !default;
+$secondary: #1ac888 !default;
+$error: #d32752 !default;
+$info: #f6c31c !default;
+$color-warning: #ffc107 !default;
+$color-danger: #dc3545 !default;
+$color-light: #f8f9fa !default;
+$color-dark: #343a40 !default;
+
+// color palette
+$colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'error': $error,
+  'info': $info,
+  'warning': $color-warning,
+  'danger': $color-danger,
+  'light': $color-light,
+  'dark': $color-dark,
+  'blue': #1919e6,
+  'red': #e61919,
+  'yellow': #e6e619,
+  'green': #19e635,
+  'orange': #ffa600,
+  'purple': #9900ff,
+  'gray': #808080,
+  'black': black,
+  'white': white,
+);

Ijebucss/abstracts/_functions.scss

@@ -0,0 +1,5 @@
+@function light-comp($color) {
+  $complement: complement($color);
+  $light-complement: lighten($complement, 30%);
+  @return $light-complement;
+}

Ijebucss/abstracts/_index.scss

@@ -0,0 +1,5 @@
+@forward "variables";
+@forward "colors";
+@forward "mixins";
+@forward "functions";
+@forward "breakpoints";

Ijebucss/abstracts/_mixins.scss

@@ -0,0 +1,48 @@
+@use "variables" as *;
+@use "breakpoints" as *;
+
+@mixin btn ($bg-color: #e2e2e2) {
+  text-decoration: none;
+    cursor: pointer;
+    display: inline-block;
+    border: 0;
+    padding: $base-padding $base-padding * 2;
+    border-radius: $base-border-radius;
+    background-color: $bg-color;
+}
+
+@mixin xs {
+  @media (min-width: map-get($breakpoints, xs)) {
+    @content;
+  }
+}
+
+@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;
+  }
+}
+
+@mixin breakpoint($bp: 0) {
+  @media (min-width: $bp) {
+    @content;
+  }
+}

Ijebucss/abstracts/_variables.scss

@@ -0,0 +1,29 @@
+// spacing
+$base-padding: 0.74rem !default;
+$base-margin: 0.75rem !default;
+
+//borders
+$base-border-thickness: 1px !default;
+$base-border-radius: 20px !default;
+
+// box-shadow
+$base-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1) !default;
+
+// font sizes
+$base-font-size: 1rem !default;
+$font-size-sm: $base-font-size * 0.75 !default;
+$font-size-lg: $base-font-size * 1.5 !default;
+$font-size-xl: $base-font-size * 2 !default;
+$font-size-xxl: $base-font-size * 3 !default;
+
+// font weights
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+
+
+// colors
+$color-primary: #007bff !default;
+$color-secondary: #6c757d !default;
+$color-success: #28a745 !default;
+$color-info: #17a2b8 !default;

Ijebucss/base/_general.scss

@@ -0,0 +1,2 @@
+// import google font
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

Ijebucss/base/_index.scss

@@ -0,0 +1,2 @@
+@forward "reset";
+@forward "general";

Ijebucss/base/_reset.scss

@@ -0,0 +1,27 @@
+/* reset styles */
+* {
+  color: inherit;
+  margin: 0;
+}
+
+body {
+  font-family: Poppins;
+}
+
+ul {
+  padding: 0;
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+hr {
+  border: 0;
+  border-top: 1px dotted #efefef;
+}
+
+img {
+  max-width: 100%;
+}

Ijebucss/components/_badge.scss

@@ -0,0 +1,21 @@
+@use 'sass:math';
+@use '../abstracts' as *;
+
+@mixin badge($bg-color: $info) {
+  border-radius: $base-border-radius * 4;
+  background-color: $bg-color;
+  padding: math.div($base-padding, 4) math.div($base-padding, 2);
+  font-size: $font-size-sm;
+  font-weight: normal;
+}
+
+.badge {
+  @include badge;
+}
+
+@each $key,
+$val in $colors {
+  .badge-#{$key} {
+    @include badge($val);
+  }
+}

Ijebucss/components/_button.scss

@@ -0,0 +1,34 @@
+@use '../abstracts' as *;
+
+.btn {
+  @include btn;
+}
+
+@each $key, $val in $colors {
+  .btn-#{$key} {
+    @include btn($val);
+
+    &:hover {
+      background-color: lighten($val, 10%);
+    }
+  }
+
+  .btn-outlined-#{$key} {
+    @include btn(white);
+    border: $base-border-thickness solid $val;
+
+    &:hover {
+      background-color: $val;
+    }
+  }
+
+  .btn-complement-#{$key} {
+    @include btn($val);
+    color: light-comp($val);
+
+    &:hover {
+      color: $val;
+      background-color: light-comp($val);
+    }
+  }
+}

Ijebucss/components/_card.scss

@@ -0,0 +1,24 @@
+@use "sass:math";
+@use "../abstracts" as *;
+
+.card {
+  display: block;
+  padding: $base-padding;
+  border: $base-border-thickness solid #ddd;
+  box-shadow: $base-box-shadow;
+  border-radius: math.div($base-border-radius, 4);
+
+  &-title {
+    font-size: $font-size-lg;
+    padding-bottom: $base-padding;
+    font-weight: bold;
+  }
+
+  &-body {
+    font-size: $base-font-size;
+
+    a {
+      text-decoration: underline;
+    }
+  }
+}

Ijebucss/components/_index.scss

@@ -0,0 +1,4 @@
+@forward "button";
+@forward "badge";
+@forward "card";
+@forward "navbar";

Ijebucss/components/_navbar.scss

@@ -0,0 +1,31 @@
+@use "../abstracts" as *;
+
+%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: $font-size-lg;
+  }
+
+  .container {
+    @extend %flex-layout;
+  }
+}
+
+@each $key,
+$val in $colors {
+  .navbar-#{$key} {
+    @extend .navbar;
+    background-color: $val;
+  }
+}

Ijebucss/index.scss

@@ -0,0 +1,16 @@
+// variables and functions
+@use "abstracts";
+
+// base styling
+@use "base";
+
+// colors
+
+// components (button, card, navbar)
+@use "components";
+
+// layout (grid, flexbox, position)
+@use "layout";
+
+//utilities (margin, padding, opacity etc)
+@use "utilities";